google插件开发：如何开启特定标签页的sidePanel

google插件开发：如何开启特定标签页的sidePanel

在介绍特定标签页的sidePanel之前，先记录一下全局开启：

{
  manifest_version: 3,
  name: 'youtube字幕提取助手',
  description: '将youtube字幕提取并转换成格式化文档下载到本地',
  ...,
  "side_panel": {
    "default_path": "src/sidepanel/sidepanel.html"
  },
  "permissions": [
	...,
    "sidePanel"
  ],
}

配置side_panel后，相当于给所有标签页都开启了sidePanel权限，也就是说当你在A页面打开了插件的sidePanel后，切换到其他页面，sidePanel不会隐藏，也不会改变显示内容

然而，大多数情况下，我们的插件是需要为特定域名、特定标签页服务的。

如何开启特定标签页的sidePanel

manifest.json仅指定permissions，而不需要且不能指定side_panel / default_path配置

{
  manifest_version: 3,
  name: 'youtube字幕提取助手',
  description: '将youtube字幕提取并转换成格式化文档下载到本地',
  ...,
  // 注释掉全局sidepanel配置，改为特定标签页动态配置
  // "side_panel": {
  //  "default_path": "src/sidepanel/sidepanel.html"
  // },
  "permissions": [
	...,
    "sidePanel"
  ],
}

接下来的是重点：

​chrome.sidePanel.open：用于编码的方式来打开sidePanel，且要求是在用户手势操作内完成。

​/utils/sidePanel.ts：

// 打开`sidePanel`的方法
export const handleSidePanel = async (tab: chrome.tabs.Tab) => {
    try {
        // 确保为该标签页配置了sidepanel（用于popup调用场景）
        await chrome.sidePanel.setOptions({
            tabId: tab.id,
            path: 'src/sidepanel/sidepanel.html',
            enabled: true
        });
        
        await chrome.sidePanel.open({ tabId: tab.id, windowId: tab.windowId });

		...

    } catch (error) {
        console.error('处理sidepanel操作失败:', error);
    }
}

使用发现：popup中调用没有问题，serviceWorker中监听contextMenu会出现以下报错：

原因：

1. ​popup整个作用域都会保留gesture（手势）的作用域

2. 而serviceWorker内gesture（手势）的作用域判定更加严格：

   1. 如果写了异步操作，如上述代码中的await chrome.sidePanel.setOptions，则会丢失gesture（手势）的作用域

解决方案：

在serviceWorker中先进行chrome.sidePanel.open，确保gesture环境下的调用

chrome.contextMenus.onClicked.addListener(async(info, tab) => {
  if (info.menuItemId === 'preview') {
    if (tab?.url?.includes('youtube.com')) {
      try {
        // 在用户手势上下文中立即打开sidepanel
        await chrome.sidePanel.open({ tabId: tab.id, windowId: tab.windowId });
        // 然后处理数据加载（这不需要用户手势上下文）
        handleSidePanel(tab).catch(error => {
          console.error('处理sidepanel数据失败:', error);
        });
      } catch (error) {
        console.error('打开sidepanel失败:', error);
        sendMsgByServiceWorker("preview_error", "error", "打开侧边栏失败");
      }
    } else {
      sendMsgByServiceWorker("preview_error", "error", "当前页面不是YouTube页面，无法预览讲义")
    }
  }
});

​/utils/sidePanel.ts：

export const handleSidePanel = async (tab: chrome.tabs.Tab) => {
    try {
        // 确保为该标签页配置了sidepanel（用于popup调用场景）
        await chrome.sidePanel.setOptions({
            tabId: tab.id,
            path: 'src/sidepanel/sidepanel.html',
            enabled: true
        });

        // 如果是从popup调用，需要打开sidepanel
        try {
            await chrome.sidePanel.open({ tabId: tab.id, windowId: tab.windowId });
        } catch (openError) {
            // 如果是从service worker调用，sidepanel可能已经打开，忽略错误
            console.log('Sidepanel可能已经打开:', openError);
        }

		...

    } catch (error) {
        console.error('处理sidepanel操作失败:', error);
    }
}