Javascript chrome扩展浏览器操作点击切换

我喜欢在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"
      }
     }

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

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

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

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

您可以注意到，当单击图标时，控制台中会显示“已激活”，再次单击时，您会看到“已停用”消息，但当您在其他选项卡中重复相同操作时，脚本将在您在上一选项卡中停止的位置工作，但我需要它独立于选项卡，我知道这是因为我声明为“click”的全局变量，不确定如何以不同的方式处理它，或者我缺少一些属性？ 我是否需要使用本地存储，如果需要，如何使用

---

提前感谢

现在，您似乎正在全局跟踪

单击

状态。您需要为每个选项卡单独跟踪它

您可以通过将该逻辑放入内容脚本中来实现这一点。让背景页面监听

浏览操作

点击，然后向相关选项卡发送

切换选项卡

消息。然后，选项卡就可以用当前的活动状态响应消息，后台页面可以相应地设置图标

另一个注意事项：您不必通过发送新消息来响应消息。这就是

addListener

回调的

sendResponse

参数的作用。

chrome.tabs.sendMessage

函数接受第三个参数，该参数是一个回调函数，用于接收传递给

sendResponse

的参数。例如：

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

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

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

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

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

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

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

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

---

现在，您似乎正在全局跟踪

单击

状态。您需要为每个选项卡单独跟踪它

您可以通过将该逻辑放入内容脚本中来实现这一点。让背景页面监听

浏览操作

点击，然后向相关选项卡发送

切换选项卡

消息。然后，选项卡就可以用当前的活动状态响应消息，后台页面可以相应地设置图标

另一个注意事项：您不必通过发送新消息来响应消息。这就是

addListener

回调的

sendResponse

参数的作用。

chrome.tabs.sendMessage

函数接受第三个参数，该参数是一个回调函数，用于接收传递给

sendResponse

的参数。例如：

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

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

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

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

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

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

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

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

---

1） 将选项卡id指定为setIcon中的第一个参数，请参阅文档。2） 使用chrome.storage.local来存储

单击
状态，方法是使用tab id作为键。您能否详细介绍一下，如何存储tabid，您能否给出一个示例代码？1）将tab id指定为setIcon中的第一个参数，请参阅文档。2） 使用chrome.storage.local来存储
单击
状态，方法是使用选项卡id作为键。您能否详细介绍一下，如何存储选项卡id，您能否给出一个示例代码？