Chrome扩展:在运行时更改地址栏按钮的背景颜色

Question

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

我尝试了以下操作，但没有成功：

script.js

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

manifest.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，需要一个后台页面。如果您想保持当前的控制流(通过内容脚本更新图标)，则需要传递消息。以下是最低要求：

// 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的示例，您应该能够通过查看这些示例来获得自己的工作扩展。