title: Changing chrome extension icon
body: <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>