Chrome扩展Manifest V3：URL源变更时自动关闭侧边面板问题求助

你的核心问题是切换到已打开的不同源标签页时，侧边面板未自动关闭，原因有两点：

1. 仅监听了tabs.onUpdated事件（仅在标签页URL更新时触发），但切换到已存在的标签页时该事件不会触发，导致关闭逻辑未执行。
2. 调用chrome.sidePanel.setOptions时未指定tabId，设置会全局生效，无法精准控制单个标签页的侧边面板状态。

修改后的background.js代码如下：

let allowedOrigin = null;

// 点击扩展图标时初始化允许的源，并打开当前标签页的侧边面板
chrome.action.onClicked.addListener(async (tab) => {
  allowedOrigin = new URL(tab.url).origin;
  await chrome.sidePanel.setOptions({
    tabId: tab.id,
    path: 'sidepanel.html',
    enabled: true
  });
});

// 监听标签页URL更新（当前标签页导航到新地址时触发）
chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!allowedOrigin || !tab.url) return;
  const currentOrigin = new URL(tab.url).origin;
  await chrome.sidePanel.setOptions({
    tabId: tabId,
    enabled: currentOrigin === allowedOrigin,
    ...(currentOrigin === allowedOrigin && { path: 'sidepanel.html' })
  });
});

// 监听标签页切换（切换到已打开的其他标签页时触发）
chrome.tabs.onActivated.addListener(async (activeInfo) => {
  if (!allowedOrigin) return;
  const tab = await chrome.tabs.get(activeInfo.tabId);
  if (!tab.url) return;
  const currentOrigin = new URL(tab.url).origin;
  await chrome.sidePanel.setOptions({
    tabId: activeInfo.tabId,
    enabled: currentOrigin === allowedOrigin,
    ...(currentOrigin === allowedOrigin && { path: 'sidepanel.html' })
  });
});

关键修改说明： #

• 新增tabs.onActivated事件监听，覆盖标签页切换的场景，这是原代码缺失的核心逻辑。
• 所有chrome.sidePanel.setOptions调用都指定tabId，确保设置仅作用于目标标签页，避免全局状态干扰。
• 简化状态判断逻辑：直接根据当前标签页的Origin是否匹配，决定是否启用侧边面板，匹配时自动加载面板路径。

测试验证： #

1. 点击扩展图标打开侧边面板后，在当前标签页导航到不同Origin的URL，面板会自动关闭。
2. 切换到已打开的不同Origin标签页，面板会自动关闭；切换回同源标签页，面板会重新显示。

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