javascript - chrome 扩展 browserAction onclick 切换

Question

我喜欢在 Chrome 扩展中切换 browserAction，它应该独立于选项卡

这是代码

Manifest.json

    {
       "name": "Toggle",
       "version": "1.0",
       "description": "Build an Extension!",
       "manifest_version": 2,
       "permissions": ["activeTab"],
       "icons": {
          "16": "images/hand16.png",
          "32": "images/hand32.png",
          "48": "images/hand48.png"
        },
       "background": {
          "scripts": ["background.js"],
          "persistent": false
        },
        "content_scripts": [
        {
          "matches": [
            "<all_urls>"
          ],
          "js": ["jquery.min.js","content.js"]
        }
      ],
        "browser_action": {
        "default_icon": "images/hand16.png",
        "default_title": "toggle"
      }
     }

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.message === "current-tab"){
    console.log('activated');
    chrome.runtime.sendMessage({"message": "set_active_icon"});
  }
  if(request.message === "deactivate"){
    console.log('deactivated');
    chrome.runtime.sendMessage({"message": "set_default_icon"});
  }
});

背景.js

click=0;
chrome.browserAction.onClicked.addListener(function(tab) {

  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
       if(click == 0){
        chrome.tabs.sendMessage(tabs[0].id, {"message": "current-tab"});
        click=1;
      }
      else{
        chrome.tabs.sendMessage(tabs[0].id, {"message": "deactivate"});
        click=0;
      }


    });
});


// Icon change
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

    if( request.message === "set_active_icon" ) {
      console.log('suces');
      chrome.browserAction.setIcon({
                path: "images/grab.png",
                tabId: sender.tab.id
            });
    }
    else if (request.message === "set_default_icon") {
      chrome.browserAction.setIcon({
                path: "images/hand16.png",
                tabId: sender.tab.id
            });
    }
  });

您可以注意到，单击该图标时，控制台中会打印“已激活”，再次单击该图标时，您可以看到“已停用”消息，但是当您在其他选项卡中重复相同的操作时，该脚本将在您所在的位置运行在上一个选项卡中离开，但我需要它独立于选项卡，并且我知道这是因为我声明为“单击”的全局变量，并且不确定如何以不同的方式处理它，或者我是否遗漏了一些属性(property)？我是否需要使用本地存储，如果需要如何？

提前致谢

Answer 1

现在，您似乎正在全局跟踪点击状态。您需要独立跟踪每个选项卡。

您可以通过将该逻辑放入内容脚本中来实现此目的。让后台页面监听 browserAction 点击，然后向相关选项卡发送 "toggle-tab" 消息。然后，选项卡可以仅以当前事件状态响应消息，并且后台页面可以相应地设置图标。

另一个注意事项:您不必通过发送新消息来回复消息。这就是 addListener 回调的 sendResponse 参数的用途。 chrome.tabs.sendMessage 函数采用第三个参数，它是一个回调函数，用于接收传递给 sendResponse 的参数。例如:

content.js

// Let each content script manage its own active state.
let isActive = false;
// When the background page sends a message telling this tab to toggle its
// active state, do so, and then respond with the new active state.
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.message === "toggle-tab") {
    isActive = !isActive; // toggle the active state
    sendResponse(isActive); // respond with the new active state
  }
});

背景.js

// When the browserAction click occurs, tell the content script to
// toggle its own active state. When the content script responds with
// its new active state, set the right icon.
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id, {message: "toggle-tab"}, function(isActive) {
    setIcon(tab.id, isActive);
  });
});

// Set the right icon in the given tab id, depending on that tab's active state.
function setIcon(tabId, isActive) {
  const path = isActive ? "images/grab.png" : "images/hand16.png";
  chrome.browserAction.setIcon({
    path, tabId
  });
}