Click here to Skip to main content
15,790,884 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am working on a browser extension, and the first problem I'm trying to resolve is:

How can you get a browser extension to detect specific URLs, and respond by changing the colour of it's tool bar icon? Also, would 'pageAction' be more appropriate?

I have tested this code, and the icon does not turn green (as required) when I visit the url: "".

I looked this problem up on Stack Overflow, and found some useful code, and tweaked it like so:

/*There will eventually be a list of urls in a database for the extension to check through*/
var url = ""; 

/* Listen for external messages (messages from web-pages) */
chrome.runtime.onMessageExternal.addListener(function(url, sender) {
if (sender.url == url) {

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

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


(I am initially working with Chrome, but want it to be compatible with Safari and Firefox eventually too). I based the above code on the following Stack Overflow answer, which is a little related to my problem: How to change the color of icon according to user login

Some hints in the right direction would be much appreciated.
Updated 24-Oct-15 8:29am
Dave Kreskowiak 24-Oct-15 9:39am    
Before anyone can give you any kind of answer you're going to have to define exactly what you expect this code to do, what it is doing, and what you mean by "doesn't work".

Just saying "doesn't work" is not a proper problem description.
Patrice T 24-Oct-15 9:48am    
What is your question ?
Advice: stay focus on a single problem, and list only related code.
Enigma1001 24-Oct-15 13:31pm    
Thanks for comments - I have re-written the question, and I hope it is clearer now.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900