Chrome扩展侧边面板返回合规页面后无法自动重新打开问题排查

问题核心原因 #

当你将侧边面板的enabled设为false后，仅重新设置enabled: true只会恢复该标签页使用侧边面板的权限，但不会主动打开面板。而点击扩展图标时，浏览器会自动调用chrome.sidePanel.open()方法，因此能正常触发面板显示。

修复代码 #

chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  // 仅在页面完全加载且URL有效时执行逻辑
  if (!tab.url || info.status !== 'complete') return;
  
  const url = new URL(tab.url);
  const domain = url.hostname;
  const domainSetting = getSettingInfo(domain);
  
  if (domainSetting !== false) {
    console.log("SHOW");
    await chrome.sidePanel.setOptions({
      tabId: tabId,
      path: 'sidepanel.html',
      enabled: true
    });
    // 主动调用open方法打开侧边面板
    await chrome.sidePanel.open({ tabId: tabId });
  } else {
    console.log("DISABLE");
    await chrome.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});

关键修改点 #

1. 增加页面加载完成判断：通过info.status === 'complete'确保只在页面完全加载后处理面板状态，避免页面加载过程中多次触发onUpdated导致的逻辑重复或异常。
2. 主动调用open方法：在设置enabled: true后，调用chrome.sidePanel.open()强制打开面板，恢复显示状态。
3. 变量声明优化：给domainSetting加上const声明，避免全局变量污染引发潜在问题。

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