如何为Chrome扩展同时配置Popup与Side Panel？

问题根源：当同时配置action.default_popup和side_panel.default_path时，Chrome会优先触发Side Panel打开逻辑，导致Popup无法正常显示。要实现按站点切换显示Popup/Side Panel，需要通过代码控制点击行为，而非纯manifest配置。

步骤1：修改manifest.json #

移除action.default_popup（否则无法触发点击事件监听），添加后台服务 worker 及必要权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_title": "Click to open extension"
  },
  "host_permissions": [
    "https://developer.chrome.com/*"
  ],
  "side_panel": {},
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "activeTab",
    "sidePanel"
  ]
}

步骤2：编写后台逻辑（background.js） #

监听扩展图标点击事件，根据当前站点URL判断打开Popup还是Side Panel：

// 初始化Side Panel路径
chrome.runtime.onInstalled.addListener(() => {
  chrome.sidePanel.setOptions({
    path: 'sidepanel.html',
    enabled: true
  });
});

// 处理图标点击事件
chrome.action.onClicked.addListener(async (tab) => {
  const currentUrl = new URL(tab.url);
  // 匹配目标站点
  if (currentUrl.hostname === 'developer.chrome.com') {
    // 打开Side Panel
    await chrome.sidePanel.open({ tabId: tab.id });
  } else {
    // 打开Popup窗口（可自行调整尺寸）
    await chrome.windows.create({
      url: 'popup.html',
      type: 'popup',
      width: 300,
      height: 400
    });
  }
});

补充说明 #

• 移除action.default_popup是关键：只有未配置默认Popup时，chrome.action.onClicked事件才会触发，从而实现自定义点击逻辑。
• 如果需要在Popup中直接切换到Side Panel，可在popup.html的js中添加chrome.sidePanel.open({ tabId: ... })逻辑。

内容的提问来源于stack exchange，提问作者J.N.