请教大佬们一个 chrome 侧边栏插件的开发问题，已经卡好几天了，问了 ai 也没解决

[nixum]

如题，比如

1. 我先打开 A 页面，此时没有侧边栏，在 A 页面打开了侧边栏，展示了内容 A ，
2. 新打开一个 B 页面，此时 B 页面的侧边栏也是关闭的，需要再次点击图标才能打开侧边栏，展示内容 B ，
3. 切回 A 页面，侧边栏展示 A 内容，
4. 切回 B 页面，侧边栏展示 B 内容，

以此类推，各个侧边栏跟页面绑定，相互独立，不会相互干扰

其实就是类似 kimi 插件那种效果

默认情况下，一旦打开侧边栏，这个侧边栏在所有页面共享，即在 A 页面打开，B 页面也是打开的状态，A 页面和 B 页面看到的侧边栏内容一样

目前的方案是，通过监听当前页的 tab 是否有变化，来解决 AB 页面看到一样内容的问题，但是每次切换页面又都会重新刷新一下

然后每次打开侧边栏，记录页面 tab 的侧边栏是否是打开的，再在 background 里，监听页面 tab 是否有切换，来判断要不要先关闭侧边栏，再允许打开，就很挫，下面是伪代码

这种方案有时会在切换页面时闪一下，甚至会导致侧边栏无法打开，得先切换一下页面才可以

chrome.tabs.onActivated.addListener(activeInfo => {
    const tabId = activeInfo.tabId
    chrome.tabs.get(activeInfo.tabId, tab => {
        // 省略 isOpen 获取，根据 tabId 在 storage 里查出当前 tab 是否手动打开了侧边栏
        if (isOpen === "true") {
            // 已打开就保持打开
            chrome.sidePanel.setOptions({
                tabId,
                path: 'sidepanel.html',
                enabled: true
            });
        } else {
            // 未手动打开的，先关闭，再设置允许打开
            chrome.sidePanel.setOptions({
                enabled: false
            });
            chrome.sidePanel.setOptions({
                tabId,
                path: 'sidepanel.html',
                enabled: true
            });
        }
    })
})

是用 plasmo + react 开发的（前端半吊子是半吊子水平，之前一直写后端），翻遍了 chrome extension 的 API 文档 + 问 chatgpt 也没得到有效的解决方案

实在没什么方向了，想看看有没有大佬能指点一下，或者有没有类似效果的开源仓库可以参考一下

[nixum]

emmm ，刚问完就在 githun 搜到这个，https://github.com/KajKandler/ext_sidepanel_per_tab ，我研究一下，希望有用

[yuhaofe]

一个比较不优雅的办法是直接插到页面里去，有不少插件的 UI 都是这么做的

[Cheez]

> 每次切换页面又都会重新刷新一下

本来就是这样的。你缓存好实例就可以了。你之前的想法可能是 return Page[i] 现在你改成 return Pages ，只是根据当前 Tab 去 hide 或者 show ，这样用户就看不出刷新没刷新了。

[nixum]

感谢楼上两位老哥，整了几个晚上终于调通这个逻辑了，上面搜到的那个仓库给了很大的作用，真是不容易

这里简单说明一下原理，如果想每个页面可以独立打开侧边栏：
1. 需要先禁用掉所有侧边栏的开启配置`chrome.sidePanel.setOptions({ enabled: false });`
2. 定义全局的 tab 变量，记录是否激活的状态，用来表示当前激活的 tab 页，
3. 使用`chrome.tabs.onActivated`监听 tab 的变更，更新 2 中 tab 的状态
4. 开启点击事件`chrome.action.onClicked`，使用 `chrome.sidePanel.setOptions` 和 `chrome.sidePanel.open` 外加判断 2 中 tab 的状态，来决定是否要打开侧边栏

对于每个页面能独立展示内容，则需要绑定 tabId 和对应要展示的内容，比如当前激活的 tabId 改变了，替换侧边栏要展示的数据