如何基于当前标签页URL实现Chrome扩展程序图标的显示与隐藏

Chrome 114及以上版本已经支持该需求，低于该版本的Chrome无法实现完全隐藏扩展图标的效果，只能将图标置灰禁用。

方案1：使用chrome.action.setVisible() API（推荐，Chrome 114+ / Manifest V3 支持） #

该API是Chrome官方新增的扩展图标显隐控制接口，可以实现完全按照当前标签页URL显示/隐藏工具栏的扩展图标。

实现步骤： #

• 在manifest.json中配置必要的权限和基础配置：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs"],
  "host_permissions": ["<all_urls>"],
  "action": {}
}

如果你的扩展仅需要在特定站点生效，也可以把host_permissions替换为对应的站点匹配规则，减少权限申请范围。

• 在后台Service Worker（即上面配置的background.js）中添加监听逻辑：

// 替换为你需要适配的目标站点匹配规则
const TARGET_SITE_REGEX = /^https?:\/\/(www\.)?your-target-site\.com\//

// 监听标签页切换事件，切换标签时更新图标显隐状态
chrome.tabs.onActivated.addListener(async (activeInfo) => {
  const currentTab = await chrome.tabs.get(activeInfo.tabId)
  const isTargetSite = TARGET_SITE_REGEX.test(currentTab.url || '')
  await chrome.action.setVisible({
    tabId: activeInfo.tabId,
    visible: isTargetSite
  })
})

// 监听标签页URL更新事件，页面地址变化时更新图标显隐状态
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo) => {
  if (!changeInfo.url) return
  const isTargetSite = TARGET_SITE_REGEX.test(changeInfo.url)
  await chrome.action.setVisible({
    tabId: tabId,
    visible: isTargetSite
  })
})

注意事项： #

• 如果希望扩展图标在匹配站点时直接显示在工具栏而非溢出菜单中，可在扩展首次启动时引导用户手动固定你的扩展图标，即可实现需求中描述的体验。
• 该API仅支持Manifest V3版本扩展，Manifest V2已被Chrome正式废弃，无法使用该能力。

方案2：兼容低版本Chrome的替代方案 #

如果需要兼容Chrome 114以下版本，无法实现完全隐藏图标，只能使用DeclarativeContent API实现非目标站点下图标置灰、不可点击的效果，和隐藏的体验接近。

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