在 URL 来源更改时关闭 Chrome 扩展侧面板

Question

我有一个用 Manifest V3 编写的 Chrome 扩展程序，当用户单击 Chrome 工具栏中的扩展程序图标时，它会打开一个侧面板。我希望侧面板在具有相同 URL 来源的所有选项卡上保持打开状态，并在用户导航到任何其他 URL 时自动关闭。我尝试添加一个

onUpdate

事件侦听器，如 Google 提供的代码示例中所述：https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/function-samples/cookbook.sidepanel-site -具体

但是，在选项卡上打开扩展程序后，当我切换到具有不同 URL 来源的选项卡时，侧面板不会消失。我正在使用 Chrome 版本 115.0.5790.102 在本地运行我的扩展程序

这是我的background.js 文件：

let activatedTabUrl = null;

chrome.action.onClicked.addListener(async (tab) => {
  activatedTabUrl = new URL(tab.url).origin;

  await chrome.sidePanel.setOptions({
    path: 'sidepanel.html',
    enabled: true
  });
});

chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  if (url.origin === activatedTabUrl) {
    await chrome.sidePanel.setOptions({
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    await chrome.sidePanel.setOptions({
      enabled: false
    });
  }
});

我的manifest.json：

{
    "manifest_version": 3,
    "name": "my extension",
    "version": "1.0",
    "description": "desc",
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_title": "Click to open panel"
    },
    "permissions": ["activeTab", 
                    "storage",
                    "scripting", 
                    "tabs",
                    "sidePanel"]
}

如有任何帮助，我们将不胜感激！

Answer 1

我注意到的一件事是 Chrome 的示例包括在 setOptions 调用期间将 tabId 值与其他选项一起传递。你可以尝试一下。