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（手势）的作用域

解决方案：

调整执行顺序，确保gesture环境下的调用

​/utils/sidePanel.ts：

export const handleSidePanel = async (tab: chrome.tabs.Tab) => {
    try {
        // 打开sidepanel, 且在service worker中不允许放在异步操作之后，否则sidepanel会因为丢失gesture作用域而无法打开
        await chrome.sidePanel.open({ tabId: tab.id, windowId: tab.windowId });

        // 确保为该标签页配置了sidepanel
        await chrome.sidePanel.setOptions({
            tabId: tab.id,
            path: 'src/sidepanel/sidepanel.html',
            enabled: true
        });
		...

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