Chrome 扩展程序 - 仅更改活动选项卡的 default_icon答案

【问题标题】：Chrome Extension - Change default_icon for active tab onlyChrome 扩展程序 - 仅更改活动选项卡的 default_icon
【发布时间】：2015-03-05 18:18:35
【问题描述】：

我正在构建一个简单的扩展，它需要根据页面中是否存在 JS 变量来更改 default_icon。就这么简单，至少有这个功能。

我设法在这种情况下更改了每个页面加载时的图片，但我想更进一步，在用户更改他关注的标签时，为用户浏览器中所有加载的标签更改图片。我在尝试仅更改活动选项卡的 default_icon 时遇到问题。

有人知道我应该怎么做吗？（我还是个 Chrome 扩展的初学者）

我的 content.js ：

if (test == "OK") {
    // Setting OK Icon
    chrome.runtime.sendMessage({"message": "Existing"});
}
else if (test == "NOK") {
    // Setting NOK Icon
    chrome.runtime.sendMessage({"message": "Not existing"});
}

我的背景.js：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "Existing" ) {
        chrome.browserAction.setIcon({path:"OKicon.png"});
    }

    if( request.message === "Not Existing" ) {
        chrome.browserAction.setIcon({path:"NOKicon.png"});
    }
  }
);

【问题讨论】：

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

好吧，你应该看看chrome.browserAction.setIcon documentation。

整数（可选）tabId

将更改限制在选择特定选项卡时。关闭选项卡时自动重置。

正是需要的！现在，标签 ID 为reported in the sender parameter：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "Existing" ) {
        chrome.browserAction.setIcon({
            path:"OKicon.png",
            tabId: sender.tab.id
        });
    }

    if( request.message === "Not Existing" ) {
        chrome.browserAction.setIcon({
            path:"NOKicon.png",
            tabId: sender.tab.id
        });
    }
  }
);

【讨论】：

非常感谢！就是这样！我尝试使用那个 tabId，但我不知道该放什么。感谢您的宝贵时间！

【解决方案2】：

你基本上就在那里。您需要做的就是将内容脚本中的逻辑包装为window focus 事件的回调。

window.onfocus = function(){
  if (test == "OK") {
      // Setting OK Icon
      chrome.runtime.sendMessage({"message": "Existing"});
  } else {
      // Setting NOK Icon
      chrome.runtime.sendMessage({"message": "Not existing"});
  }
}

当用户更改焦点时，background 脚本将收到来自context 脚本的运行时消息并相应地更改扩展图标。

【讨论】：

其实是setIcon直接支持的，看我的回答