Changing chrome extension icon
<p>So i know how to change the icon for the extension-</p>

<pre><code>chrome.browserAction.setIcon({
    path : "green.png"
});
</code></pre>

<p>But how would I make it so im not changing the icon and instead i'm adding a little image to the in-browser icon? Im really not sure what to call it... It would be similar to the extension "AdBlock" where it has its icon then a number in the bottom left of the icon telling you how many ads have been blocked.</p>

<p>For my extension, i'm trying to display the "status" of the extension by showing a green/yellow/red square on the in-browser icon of the extension.</p>

<p>How would I make it so, say, a green square popped up in the bottom left of the icon, similar to the number of ads being blocked? Right now, I have 3 different images and I change the icon to the respective image but I feel there is a much more intuitive way to do this.</p>

<p>EDIT:</p>

<p>So I came up with this code, but the badge color stays red regardless of anything I do-</p>

<pre><code>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"})
    }
}
</code></pre>

<p>And I get this console error-</p>

<pre><code>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
</code></pre>

<p>jquery.js:5 POST <a href="https://shibboleth.buffalo.edu/idp/Authn/Stateless" rel="nofollow">https://shibboleth.buffalo.edu/idp/Authn/Stateless</a> 500 (Internal Server Error)x.support.cors.e.crossDomain.send @ jquery.js:5x.extend.ajax @ jquery.js:5x.(anonymous function) @ jquery.js:5(anonymous function) @ rap.js:116l @ jquery.js:3c.fireWith @ jquery.js:3k @ jquery.js:5(anonymous function) @ jquery.js:5</p>