javascript - Chrome 扩展：在运行时更改地址栏按钮背景颜色

Question

是否可以在页面加载事件中更改按钮背景颜色，但到目前为止我根本没有找到任何这样的方法。如果不可能，那么我很乐意使用一些在页面加载后加载的预定义图像。

我尝试了以下方法，但没有成功：

脚本.js

// chrome.browserAction.setIcon("red.png");
chrome.browserAction.setIcon({path:'red.png'});

清单.json

{
  "name": "Domain Colors",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [{
      "matches": ["http://*/*"],
      "js": ["script.js"]
  }],
  "permissions": [ "tabs", "http://*/*" ],
  "browser_action": {
    "default_title": "Colry",
    "default_icon": "blue.png"
  }
}

Answer 1

为了使用browserActionAPI，需要一个后台页面。如果你想保持你当前的控制流（通过内容脚本更新图标），你需要传递 messages。这是最低要求：

// script.js
chrome.extension.sendMessage('');
// background.js
chrome.extension.onMessage.addListener(function(message, sender) {
    chrome.browserAction.setBadgeBackgroundColor({
        color: 'red',
        tabId: sender.tab.id
    });
});

清单文件需要一个额外的条目：

"background": {
    "scripts": ["background.js"]
}

您不需要内容脚本来检测页面加载。可以使用单个事件监听器（在后台页面中）：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
    if (changeInfo.status === 'loading') {
        chrome.browserAction.setBadgeBackgroundColor({
            color: 'red',
            tabId: tabId
        });
    }
});

仔细查看chrome.browserAction.setBadgeBackgroundColor. 还有很多使用 browserAction API 的示例，您应该能够通过查看这些示例自己获得一个工作扩展。