javascript - 更改 chrome 扩展程序图标

Question

所以我知道如何更改扩展程序的图标-

chrome.browserAction.setIcon({
    path : "green.png"
});

但是我该怎么做才能不更改图标，而是在浏览器图标中添加一个小图像？我真的不知道该怎么调用它...它类似于扩展程序“AdBlock”，它有自己的图标，然后是图标左下角的一个数字，告诉您有多少广告被阻止了。

对于我的扩展程序，我试图通过在扩展程序的浏览器图标上显示绿色/黄色/红色方 block 来显示扩展程序的“状态”。

我如何做到这一点，比如说，在图标的左下角弹出一个绿色方 block ，类似于被屏蔽的广告数量？现在，我有 3 张不同的图片，我将图标更改为相应的图片，但我觉得有一种更直观的方法可以做到这一点。

编辑:

所以我想出了这段代码，但无论我做什么，徽章颜色都保持红色-

chrome.browserAction.setBadgeText( { text: " " } );

function setIconStatus(status){
    if (status == 1){
        chrome.browserAction.setBadgeBackgroundColor({color:"green"})
    } else if (status == 0){
        chrome.browserAction.setBadgeBackgroundColor({color:"red"})
    } else {
        chrome.browserAction.setBadgeBackgroundColor({color:"yellow"})
    }
}

我得到这个控制台错误-

Unchecked runtime.lastError while running browserAction.setBadgeBackgroundColor: Unknown error.
at setIconStatus (chrome-extension://blnceljpkdfniagjdagcnfeceanjcipe/rap.js:17:24)
at chrome-extension://blnceljpkdfniagjdagcnfeceanjcipe/rap.js:86:3reportIfUnchecked @ extensions::lastError:133handleResponse @ extensions::sendRequest:78

jquery.js:5 POST https://shibboleth.buffalo.edu/idp/Authn/Stateless 500(内部服务器错误)x.support.cors.e.crossDomain.send @jquery.js:5x.extend.ajax @jquery.js:5x.(匿名函数)@jquery.js:5(匿名函数)@rap .js:116l @jquery.js:3c.fireWith @jquery.js:3k @jquery.js:5(匿名函数) @jquery.js:5

Answer 1

因为您只是希望出现一个彩色框:

var status = " ";
chrome.browserAction.setBadgeText( { text: status } );
                                           // Red, Green, Blue, Alpha
chrome.browserAction.setBadgeBackgroundColor({color: [0,255,0,255]});

除此之外，您还可以使用 html canvas 元素对图标图像进行动态更改。然后用编辑后的图像更新 browseActionIcon。