Question

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

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

但是我怎么能这样做，所以我不改变图标，而是在浏览器中添加一个小图像？我真的不确定该怎么称呼它...它类似于扩展＆＃34; AdBlock＆＃34;它有图标，然后是图标左下方的数字，告诉您已阻止了多少广告。

对于我的分机，我试图显示＆＃34;状态＆＃34;通过在扩展程序的浏览器内图标上显示绿色/黄色/红色方块来扩展。

如何制作它，比如说，图标左下方会出现一个绿色方块，类似于被屏蔽的广告数量？现在，我有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。

Answer 2

现在， chrome.browserAction.setBadgeBackgroundColor（对象详细信息）不支持css样式颜色关键字。

如https://developer.chrome.com/extensions/browserAction#method-setBadgeBackgroundColor所述，您可以使用十六进制RGB值或颜色数组。

更改Chrome扩展程序图标

2 个答案: