通过浏览器插件唤起侧边栏，超简单

因为gpt的火热之前下载过一款浏览器插件来体验，偶然发现他唤起的侧边栏不同于传统的popup页和content.js注入生成的页面,下图为react的浏览器插件点击action弹出的popup页

而一般content注入的形式会呈现为一个按钮或者图标等，而该插件的呈现形式是和原网页分离并行，不会因为左侧网页刷新而导致侧边栏关闭，这一点比较实用，通常的popup页和注入的页面都会因为点击或刷新而受到影响

通过翻阅文档，发现使用的是chrome.sidePanelAPI，此 API 可将浏览器侧边栏中的内容与网页的主要内容一同托管，使用起来也很方便只需要在权限清单中申请sidePanel权限，然后指定其默认展示的页面即可

// manifest.json
{
    ...
    "action": {
        "default_title": "这是xx" // 侧边栏title和action鼠标hover的时候都会用到
    },
    "permissions": [
        "sidePanel" // 指定要使用的权限
     ],
     "side_panel": {
         "default_path": "index.html" // 侧边栏默认页面
     }
}

通常点击action的图标时，弹出的是popup页面，如果希望点击时是弹出侧边栏只需要在service_worker（即v2版本的background.js）中调用setPanelBehavior指定action点击，效果如下

// 点击 action 时弹出边栏
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

如果popup页特别有必要，action图标右键菜单也有打开边栏的选项，无需额外配置，或者在注入的页面里通过点击按钮唤起侧边栏，这需要自行调用chrome.sidePanel.setOptions或者chrome.sidePanel.openAPI，Chrome和Edge浏览器呈现效果一致