I am building a browser extension, and I want it to respond to only a specific list of urls - at the moment, I am just testing it with one URL, and I am trying to get an icon to change from white to green when a specific website is visited. (I want a browser action, not a page action).The icon is currently not changing colour when I visit the sample URL.
So, to be precise, the question is: how can I get a Chrome extension to respond to a specific collection of URLs, by changing it's icon colour?
This is the code I have written/tweaked:
var url = "https://www.cadbury.co.uk/";
/* 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 based the above code on the question How to change the color of icon according to user login, which is related to my problem.
Update [25/10/15] - the code below shows a green icon in the search bar when one of the URL's listed is visited (currently only Cadbury). But what I want is an icon on the tool bar - that is, a browser action, (not a page action) and for that icon to change colour when a specific website is visited.
// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
// This makes green icon show in search bar...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when a page's URL contains a 'cadbury.co.uk' ...
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {urlContains: 'cadbury.co.uk' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
I think I need to be using a browserAction though.
And this code resembles the behaviour I'm looking for, but rather than the icon changing colour when it is clicked, I want it to change colour when specific urls are visited.
var min = 1;
var max = 5;
var current = min;
function updateIcon() {
chrome.browserAction.setIcon({path:"icon" + current + ".png"});
current++;
if (current > max)
current = min;
}
chrome.browserAction.onClicked.addListener(updateIcon);
updateIcon();