javascript - Chrome 扩展 - 使用热键运行 JS 脚本

Question

我正在编写一个简单的扩展来执行以下操作:

当我打开某个网站时，例如example.com，然后按某个热键(Ctrl + Space)，页面应滚动到某个垂直位置(例如 500px)。

这是我目前拥有的代码:

ma​​nifest.json

{
"name": "Scroll",
"description" : "Scroll",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [{
    "matches": ["https://www.example.com/*"],
    "js": ["script.js"]
}],
"commands": {
    "_execute_browser_action": {
        "suggested_key": {
            "default": "Ctrl+Space"
        }
    }
}

}

script.js

window.scrollTo(0, 500);

当我测试它时，页面打开后滚动到 500px。但我希望它仅在按下热键时滚动。我检查了一些教程，但无法弄清楚我缺少什么。任何帮助，将不胜感激。谢谢。

编辑:

修改后的文件:

ma​​nifest.json

{
    "name": "Scroll",
    "description" : "Scroll.",
    "version": "1.0",
    "manifest_version": 2,
    "background": {
        "scripts": ["script.js"],
        "persistent": false
    },
    "commands": {
        "scroll": {
            "suggested_key": {
                "default": "Ctrl+Space"
            },
            "description": "Scroll"
        }
    }
}

script.js

chrome.commands.onCommand.addListener(function (command) {
    if (command == "scroll") {
        // alert("Test"); this works
        window.scrollTo(0, 500); // this doesn't work
    }
});

当我测试它时它会显示警报，但它不会执行滚动。

Answer 1

您需要的是后台脚本。

后台脚本是在后台运行并在用户与 Chrome 浏览器交互时监听触发器的脚本(例如监听选项卡上的单击事件或在您的情况下监听击键)。

您的滚动代码位于内容脚本中，它将在页面加载时始终运行。因此您会看到这样的行为。

在后台脚本中，您可以编写滚动代码。因此，只有在看到击键时它才会滚动。

这将为您提供更多帮助:Background Pages in Chrome Extension

希望这有帮助。

<小时/>

编辑:试试这个:

"commands": {
    "scroll" : {
        "suggested_key": {
             "default": "Ctrl+Space" 
        },
        "description": "Scroll Function"
    }    
}

将上述代码放入 manifest.json 中。

chrome.commands.onCommand.addListener(function (command) {
    if (command === "scroll") {
        alert("scrolled");
    }
});

将此代码放入您的 background.js 中。