我为我的 chrome 扩展程序构建了相同的功能。
这将创建一个开/关开关/切换（搜索谷歌时有这么多名字来解决这个问题:)）
我通过以下方法在应用程序和内容脚本之间使用按摩：
清单
在所有页面上插入我的内容脚本 (hover.js) 并运行我的扩展脚本 (background.js)
....
"browser_action": {
"default_icon": {
"19": "icons/icon-active.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["css/hover.css"],
"js": ["js/hover.js"]
}
],
"background" : { "scripts": ["js/background.js"] },
....
background.js
在这里，我们正在准备后台脚本（在所有 chrome 窗口上运行）以发送和接收扩展状态
// start extension as active
var status = true;
// set toggle of extension on browser action click and notify content script
chrome.browserAction.onClicked.addListener(function(tabs) {
if (status == 'true'){
status = false;
chrome.browserAction.setIcon({path: "icons/16x16.png"});
}
else{
status = true;
chrome.browserAction.setIcon({path: "icons/icon-active.png"});
}
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {status: status});
});
});
// check status on tab update and notify content script
chrome.tabs.onActivated.addListener(function() {
if (status == 'true'){
chrome.browserAction.setIcon({path: "icons/icon-active.png"});
}
else{
chrome.browserAction.setIcon({path: "icons/16x16.png"});
}
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {status: status});
});
});
//send extension status on request
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.status == "getStatus")
sendResponse({status: status});
});
如您所见，有 3 个功能：
-
更改浏览器操作按钮单击的状态。
-
当您移动到不同的选项卡并通知内容脚本时检查状态（每个选项卡都有自己的内容脚本“实例”，因此在一个选项卡中禁用可能在另一个选项卡中仍处于活动状态）。
-
根据内容脚本的请求发送状态响应。
内容脚本
// check extension status
chrome.runtime.sendMessage({status: "getStatus"}, function(response) {
if (response.status == 'true'){
// check elements mouse is hover
document.addEventListener("mouseover", setLink, true);
}
else{
document.removeEventListener("mouseover", setLink, true);
}
});
// wait for massage from background script
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.status == 'true'){
// check elements mouse is hover
document.addEventListener("mouseover", setLink, true);
}
else{
document.removeEventListener("mouseover", setLink, true);
}
});
每个内容脚本应首先通过向后台脚本发送消息来检查扩展程序的状态并接收状态更新。
另外，如果我们在一个选项卡中关闭扩展，当我们更改选项卡时，我们会通知内容脚本更改。
我确信这可以在脚本方面做得更好，但我希望它会有所帮助......