请教大佬们一个 chrome 侧边栏插件的开发问题,已经卡好几天了,问了 ai 也没解决 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
nixum
V2EX    程序员

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

  •  
  •   nixum 2024 年 11 月 11 日 2034 次点击
    这是一个创建于 440 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,比如

    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 也没得到有效的解决方案

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

    4 条回复    2024-11-16 01:44:12 +08:00
    nixum
        1
    nixum  
    OP
       2024 年 11 月 11 日
    emmm ,刚问完就在 githun 搜到这个,https://github.com/KajKandler/ext_sidepanel_per_tab ,我研究一下,希望有用
    yuhaofe
        2
    yuhaofe  
       2024 年 11 月 11 日
    一个比较不优雅的办法是直接插到页面里去,有不少插件的 UI 都是这么做的
    Cheez
        3
    Cheez  
    PRO
       2024 年 11 月 11 日
    > 每次切换页面又都会重新刷新一下

    本来就是这样的。你缓存好实例就可以了。你之前的想法可能是 return Page[i] 现在你改成 return Pages ,只是根据当前 Tab 去 hide 或者 show ,这样用户就看不出刷新没刷新了。
    nixum
        4
    nixum  
    OP
       2024 年 11 月 16 日
    感谢楼上两位老哥,整了几个晚上终于调通这个逻辑了,上面搜到的那个仓库给了很大的作用,真是不容易

    这里简单说明一下原理,如果想每个页面可以独立打开侧边栏:
    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 改变了,替换侧边栏要展示的数据
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2725 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 19ms UTC 07:37 PVG 15:37 LAX 23:37 JFK 02:37
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86