页面不匹配content_scripts规则时如何让扩展禁用或不可点击

你要的效果本质是根据当前页面域名是否匹配规则，动态控制扩展图标的启用/禁用状态，具体实现分Manifest V2和Manifest V3两种版本：

Manifest V2 版本 #

• 首先修改manifest.json，将全局生效的browser_action替换为仅特定页面生效的page_action，保留你原有的content_scripts配置：

{
  "manifest_version": 2,
  "page_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs"],
  "content_scripts": [
    {
      "matches": ["https://www.google.com/*"],
      "js": ["contentScript.bundle.js"],
      "css": ["styles.css"]
    }
  ]
}

• 然后在后台脚本background.js中监听标签页状态，动态控制图标是否可用：

// 和你content_scripts的匹配规则保持一致即可
const MATCH_RULE = /^https:\/\/www\.google\.com\//

function updateIconState(tabId, pageUrl) {
  if (MATCH_RULE.test(pageUrl)) {
    chrome.pageAction.show(tabId)
  } else {
    chrome.pageAction.hide(tabId)
  }
}

// 监听标签页切换
chrome.tabs.onActivated.addListener(activeInfo => {
  chrome.tabs.get(activeInfo.tabId, tab => {
    updateIconState(activeInfo.tabId, tab.url)
  })
})

// 监听当前标签页地址更新
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.url) {
    updateIconState(tabId, changeInfo.url)
  }
})

该方案下，不匹配规则的页面扩展图标会直接灰化，点击无任何响应，也不会弹出popup。

Manifest V3 版本 #

Manifest V3废弃了pageAction，统一用action控制图标，后台脚本替换为service worker，实现逻辑如下：

• 修改manifest.json配置：

{
  "manifest_version": 3,
  "action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://www.google.com/*"],
      "js": ["contentScript.bundle.js"],
      "css": ["styles.css"]
    }
  ]
}

• 在service worker（background.js）中添加状态控制逻辑：

const MATCH_RULE = /^https:\/\/www\.google\.com\//

function updateIconState(tabId, pageUrl) {
  if (MATCH_RULE.test(pageUrl)) {
    chrome.action.enable(tabId)
  } else {
    chrome.action.disable(tabId)
    // 可额外配置禁用状态的自定义图标
    // chrome.action.setIcon({tabId, path: "icon-disabled.png"})
  }
}

// 监听标签页切换
chrome.tabs.onActivated.addListener(activeInfo => {
  chrome.tabs.get(activeInfo.tabId, tab => {
    updateIconState(activeInfo.tabId, tab.url)
  })
})

// 监听当前标签页地址更新
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.url) {
    updateIconState(tabId, changeInfo.url)
  }
})

小提示：如果不想手动重复写匹配规则，可以直接通过chrome.runtime.getManifest().content_scripts[0].matches读取manifest中配置的规则列表，避免两边规则不一致。

另外你配置的content_scripts本身就只会在匹配域名下注入，非匹配页面不会运行对应的注入脚本，不需要额外处理。

内容的提问来源于stack exchange，提问作者user16691768