Chrome Extension: Change Address bar Button Background color at runtime

Question

Is it possible to change button background color on page load event but so far I did not find any such method at all. If it is not possible then I am happy to use some pre-defined images that loads up after page load.

I have tried the following, without success:

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"
  }
}

This is the code. http://pastie.org/5438480 I was talking about address bar button — Volatil3, Nov 26 '12 at 18:18
for some weird reason I am getting *setBadgeBackgroundColor* or *setIcon* method undefined. — Volatil3, Nov 26 '12 at 18:35
See [Can `chrome.*` extension API's be used inside content scripts?](http://stackoverflow.com/questions/11700822/can-chrome-extension-apis-be-used-inside-content-scripts/11700893#11700893) — Rob W, Nov 26 '12 at 18:59
I am getting a bit confuse. Should I send a message to sendIcon() method or sendBadgeText by passing paramer as a JSON Object? — Volatil3, Nov 26 '12 at 19:31

Rob W · Accepted Answer · 2012-11-27T09:13:44.083

8

In order to use the browserAction API, a background page is required. If you want to keep your current control flow (update icon via a content script), you need to pass messages. Here's the bare minimum:

// script.js
chrome.extension.sendMessage('');
// background.js
chrome.extension.onMessage.addListener(function(message, sender) {
    chrome.browserAction.setBadgeBackgroundColor({
        color: 'red',
        tabId: sender.tab.id
    });
});

The manifest file needs one additional entry:

"background": {
    "scripts": ["background.js"]
}

You don't need content scripts for the purpose of detecting page loads. A single event listener can be used (in the background page):

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
    if (changeInfo.status === 'loading') {
        chrome.browserAction.setBadgeBackgroundColor({
            color: 'red',
            tabId: tabId
        });
    }
});

Have a close look at the documentation of chrome.browserAction.setBadgeBackgroundColor. There are also lots of examples using the browserAction API, you should be able to get a working extension yourself by looking at these samples.

edited Nov 27 '12 at 09:13

answered Nov 26 '12 at 21:20

Rob W

341,306
83
791
678

Thansk for your snippet. Sorry for being so dumb but.. I am trying it but somehow it's not refreshing background.html file even if **reload** the extension. It's keep showing old code and keep executing it. How to force so that background.js reflects the changes? – Volatil3 Nov 27 '12 at 06:20
Ok turned out that .js page was being cached. BackgroundBadgeText did not work for me however setIcon() did work but that is making changes across all tabs rather selective one. – Volatil3 Nov 27 '12 at 06:30
@Volatil3 I had one small typo in my answer. Does it work now? – Rob W Nov 27 '12 at 09:14
**tabId: sender.tab.id** Is not making any difference. – Volatil3 Nov 27 '12 at 12:43
I also noted one thing that the event **onMessage** does not fire randomly when I refresh a page. Is it a normal behavior? – Volatil3 Nov 27 '12 at 12:58
ok I sorted out showing in selective tab but randomness of not firing events is still mystery for me. – Volatil3 Nov 27 '12 at 13:10
@Volatil3 Probably because you're visiting https websites, which are excluded by the match pattern. For this reason, I recommend to use the `chrome.tabs.onUpdated` method, which works for all tabs. – Rob W Nov 27 '12 at 16:30
I had a bit of a struggle with this one. Turns out you have to have at least `"browser_action": {}` in your _manifest.json_. If it's not there, you'll get the `Uncaught TypeError: Cannot read property '...' of undefined` error. Perhaps it's worth mentioning in the answer? – Grx70 Sep 15 '19 at 13:03

Chrome Extension: Change Address bar Button Background color at runtime

1 Answers1