Chrome Extensions: How do you gray out icon depending on the url?

Question

Does chrome have an api to disable (and thus gray out) chrome extensions on certain urls or do I just have to have a if statement that checks the url and switches out the icon accordingly?

Answer 1

You could use chrome.declarativeContent, it allows you to show page action depending on the URL of a web page and the CSS selectors its content matches.

You could create conditions ( yes, you could use regex) and actions ( ShowPageAction SetIcon) via a constructor like new chrome.declarativeContent.PageStateMatcher and new chrome.declarativeContent.ShowPageAction(). Detailed sample are listed in the api documentation.

var rule2 = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
      pageUrl: { hostEquals: 'www.google.com', schemes: ['https'] },
      css: ["input[type='password']"]
    }),
    new chrome.declarativeContent.PageStateMatcher({
      css: ["video"]
    })
  ],
  actions: [ new chrome.declarativeContent.ShowPageAction() ]
};

chrome.runtime.onInstalled.addListener(function(details) {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([rule2]);
  });
});

Answer 2

add to manifest.js:

"background": { "scripts": ["background.js"] },
"content_scripts" :[
    {
      "matches" : [
        "*://*.example.com/*"
      ],
      "js" : ["main.js"],
      "run_at" : "document_idle"

    }
  ]

main.js:

chrome.runtime.sendMessage({type:'showPageAction'});

background.js:

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    if(message.type === 'showPageAction'){
        chrome.pageAction.show(sender.tab.id);
    }
});