Chrome扩展SidePanel：如何仅用activeTab权限限定特定URL显示

可以实现，但因为activeTab权限的限制，逻辑需要基于用户主动触发扩展的操作（比如点击扩展图标），而非自动监听所有标签页的URL变化。以下是具体实现方案：

1. 配置manifest.json #

只申请activeTab和sidePanel权限，无需tabs权限：

{
  "manifest_version": 3,
  "name": "特定站点侧边栏",
  "version": "1.0",
  "permissions": ["activeTab", "sidePanel"],
  "action": {
    "default_icon": {
      "16": "icon16.png"
    }
  },
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

2. 编写service-worker.js逻辑 #

监听扩展图标的点击事件，仅在当前标签页属于目标站点时启用侧边栏：

const GOOGLE_ORIGIN = 'https://www.google.com';

chrome.action.onClicked.addListener(async (tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  
  if (url.origin === GOOGLE_ORIGIN) {
    // 启用并打开当前标签的侧边栏
    await chrome.sidePanel.setOptions({
      tabId: tab.id,
      enabled: true
    });
    await chrome.sidePanel.open({ tabId: tab.id });
  } else {
    // 禁用当前标签的侧边栏（若之前启用过）
    await chrome.sidePanel.setOptions({
      tabId: tab.id,
      enabled: false
    });
    // 可选：提示用户仅支持目标站点
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icon16.png',
      title: '提示',
      message: '仅在google.com站点支持侧边栏'
    });
  }
});

方案说明 #

• 由于activeTab仅允许访问用户主动触发扩展的当前标签页，无法像tabs权限那样自动监听所有标签页的URL变化，因此侧边栏的状态切换需要用户点击扩展图标触发。
• 如果用户在目标站点内导航到其他域名（比如从google.com跳转到第三方网站），侧边栏不会自动关闭，需再次点击图标触发检查。

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