Chrome 扩展程序：如何根据 url 使图标变灰？

Question

chrome 是否有一个 api 来禁用（并因此变灰）某些 url 上的 chrome 扩展，或者我是否只需要一个 if 语句来检查 url 并相应地切换出图标？

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);
    }
});

Answer 3

You use browserAction instead of browserAction , but there are some things to note:

According to my test, you cannot use "<all_urls>" and "activeTab" in "content_scripts" and "Permissions", otherwise the icon will always be colored.

"content_scripts": [
  {
    "matches": ["<all_urls>"],   //  error
    "js": ["content.js"],
  }
],
"permissions": ["<all_urls>", "activeTab", "storage", "tabs", "declarativeContent"],    //  error

narrow down

"content_scripts": [
  {
    "matches": ["http://127.0.0.1/*"],
    "js": ["content.js"],
  }
],
"permissions": ["storage", "tabs", "declarativeContent"],

background.js

let rule1 = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
      pageUrl: { hostEquals: '127.0.0.1' },
    }),
  ],
  actions: [new chrome.declarativeContent.ShowPageAction()],
};

chrome.declarativeContent.onPageChanged.removeRules(undefined, data => {
  chrome.declarativeContent.onPageChanged.addRules([rule1], data => {
    console.log('addRules', data);
  });
});

The removeRules operation is performed because the rule will be added repeatedly every time the extension is refreshed.

Reference question link

https://stackoverflow.com/a/63434774/9854149