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"});
  }
});

background.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
            });
    }
  });

你可以注意到，当点击图标时，＆＃34;激活＆＃34;在控制台中打印并再次单击它，您可以看到＆＃34;取消激活＆＃34;消息，但是当您在其他选项卡中重复相同的操作时，脚本将在上一个选项卡中停止的位置工作，但我需要它独立于选项卡，我知道它是因为我声明为＆的全局变量＃34;单击＆＃34;并不确定如何以不同的方式处理它或我错过了一些财产？我是否需要使用本地存储，如果是这样的话？

提前致谢

Answer 1

现在，您似乎在全球范围内跟踪click州。您需要单独为每个标签跟踪它。

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

另一个注意事项：您不必通过发送新邮件来回复邮件。这是sendResponse回调的addListener参数的用途。 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
  }
});

<强> background.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
  });
}

chrome扩展browserAction onclick toggle

1 个答案: