开头做技术的人电脑里没有三五个 AI 标签页都不好意思说自己在搞效率工具。但尬点也在这OpenAI 一个标签页、Claude 一个标签页、Gemini 又开一个切来切去先把窗口管理器切乱了还没开始写代码光找对地方就花了半分钟。我见过不少“聚合 AI”工具要么是套壳站让你注册它的账号要么是浏览器多标签方案的精装修版。真正能在本地跟浏览器深度融合、免费开源、还能同时看的方案并不多。今天聊的这个开源项目解决的就是这个痛点在 Chrome 侧边栏里一键切换 6 个主流 AI 对话工具还支持多个 AI 并排对比同一道题不同模型的表现差别一眼就能看出来。对经常要横向评测模型输出、选型、或者单纯想偷懒减少来回切换的人来说这个思路非常值得参考。不管你是在 Windows、macOS 还是 Linux 上用 Chrome也不管你手里的模型已经落后到 GPT-3.5 还是已经在用 GPT-4o只要你是把浏览器当生产力的人这个项目都值得现装现用顺便也给那些想自己写浏览器扩展的人提供了一个完整范本。1. 项目整体思路与需求拆解先抛开代码细节说说这个项目到底在解决什么问题。表面上看是“把几个 AI 塞进侧边栏”但深一层的逻辑是现在的 AI 工具太多了多到切来切去本身就是一种时间损耗。1.1 为什么是“侧边栏”而不是“新标签页”Chrome 标签页是有空间的但标签页一多标题全部缩成一串省略号你还得靠 favicon 认人这是第一层损耗。而侧边栏的优势在于它永远在视野边缘按下快捷键就能呼出干完活一按又缩回去不会干扰你正在看的页面。从产品角度来说侧边栏还是“非模态”的代表。它不像弹窗那样把焦点抢走也不像新标签页那样彻底切换上下文。我打开编辑器写代码侧边栏贴着 ChatGPT写完一段直接粘过来让它审这个“边写边审”的体验比来回切标签页舒服太多了。这个项目选的侧边栏交互本质上就是在为高频、短时、非阻塞的 AI 请求做优化——这正是日常开发辅助的主要节奏。1.2 需求拆解一键切换、并排对比、开源可定制拆开标题里的三个关键词其实对应三组明确需求一键切换不只是六个书签快捷方式而是把 6 个 AI 服务以一致的 UI 放在同一个容器里靠快捷键或者工具栏按钮快速激活选中项不打断当前工作流。并排对比这是杀手锏功能。同一个 Prompt 同时发给多个模型并排渲染输出结果省去我人工对比时反复复制粘贴切换窗口的功夫。做 Prompt 调试的时候这一条直接把效率拉满。开源可定制扩展本身是开源的意味着 AI 的清单不是写死的想加国内大模型、想换自定义接口、想调整某家模型的 API 域名改配置就能办不用等作者发版。需求拆到这个粒度“这项目也不复杂啊”跟“这里面的功夫不少”两种感觉同时冒出来才是正常的。博主这个项目厉害的地方就是它把“复杂”藏在了简单背后。2. 核心实现原理与方案选型2.1 Chrome 侧边栏扩展的开发基础Chrome 官方从 114 版本开始提供Side Panel API从 Manifest V3 开始支持side_panel权限声明开发者可以给浏览器加一个常驻侧边栏。这是整个项目的地基。MV3 里需要用 Service Worker 作为后台脚本跟过去的 Background Page 不是一个概念。所有事件的注册和监听逻辑都压在一个随时可能被休眠的 worker 里注意得“醒得快存得精”。比如要保存当前激活的是哪个 AI不能只存变量必须写进chrome.storage.session或者放 localStorage否则 worker 一重启状态就丢了。这个项目的核心清单长这样类似实现{ manifest_version: 3, name: AI Sidebar Switcher, version: 0.1.0, permissions: [sidePanel, storage, tabs], side_panel: { default_path: sidebar.html }, background: { service_worker: background.js }, commands: { toggle-sidebar: { suggested_key: { default: AltShiftA }, description: Toggle AI sidebar } }, action: { default_title: AI Sidebar } }在 MV3 下侧边栏默认不会自动打开需要在 Service Worker 里调用chrome.sidePanel.setPanelBehavior把行为设置成跟随当前窗口openPanelOnActionClick或者干脆监听快捷键命令用户按 AltShiftA 就能呼出。chrome.runtime.onInstalled.addListener(() { chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }); }); chrome.commands.onCommand.addListener((command) { if (command toggle-sidebar) { chrome.sidePanel.open({ windowId: chrome.windows.WINDOW_ID_CURRENT }); } });2.2 六个 AI 的接入方式iframe 挂载与标签页切换刚开始做多 AI 侧边栏常见方案有两个一是用各家 AI 的官方 API自己接接口、自己写对话 UI二是直接把完整网页塞进 iframe把“界面”和“用户会话”交给对方站点。博主选择的是 iframe 方案。原因不复杂用 API 接 6 家服务相当于开发了 6 个简易客户端要处理鉴权、历史会话、格式解析、流式输出、异常重试一套下来保守估计几千行代码而且每个模型的行为差异都要单独适配而 iframe 方案把界面和登录态全部交给原站处理扩展做到是“导航与容器”这一个职责。以 Gemini 为例直接加载https://gemini.google.com/app到一个隐藏面板里其他模型同理。这样用户在该站登录过就直接能用没登录就会看到原站的登录界面非常自然。不过 iframe 也有天然限制。很多站点通过 HTTP 响应头里的X-Frame-Options: DENY或 CSPframe-ancestors禁止被嵌如果是这种情况就要降级用“新窗口嵌入”方案不硬塞进侧边栏而是靠 tab 的概念在同一个侧边栏区域里加载标签或者后台轮询新窗口的 DOM 来通信。具体该走哪条路取决于站点是否有强制防护这个到第三章再细化。2.3 多 AI 并排对比的实现逻辑并排对比的实现不是把 6 个 iframe 同时 Display 设为 inline-flex。因为浏览器标签页的渲染机制是任何非当前播放标签页都会被系统降优先级多个 iframe 同时跑 6 个大模型的页面内存占用和滚动性能会同时崩溃。正确的做法是“多 iframe 激活切换”同一时刻最多激活两个一个左侧、一个右侧剩下的在内存里 hiberate但保持 iframe 存活不能销毁否则会话状态全丢只是对离屏或隐藏的 iframe 做content-visibility: hidden级别的隐藏减少其渲染开销。async function renderComparison(leftId, rightId) { // 左侧 iframe leftFrame.src PROVIDERS[leftId].url; leftFrame.classList.remove(hidden); // 右侧 iframe rightFrame.src PROVIDERS[rightId].url; rightFrame.classList.remove(hidden); }这种方式比“把两个 AI 塞进一个页面再找内容可复制性”靠谱。真实开发中并排的两个 iframe 是天然隔离的各自维护各自的会话没有一手遮天的钩子去直接扒对方 DOM。3. 实操过程与核心功能实现这几个技术点选型定了剩下的是把功能落地的逐步伺候。3.1 一键切换的交互落地快捷键、工具栏按钮、命令面板“一键”体现在三处一是全局面板快捷键。配置项里我设置的是AltShiftA实际上看你自己习惯。代码上监听chrome.commands.onCommand在收到 toggle 指令时执行chrome.sidePanel.toggle()如果你的 Chrome 版本高于 116也可以用open加windowId来控制。这个快捷键是全局生效的只要浏览器在前台任何页面下都能一键呼出。二是工具栏按钮。点击扩展图标直接展开侧边栏这就是前面说到的setPanelBehavior({ openPanelOnActionClick: true })。三是面板内的 Tab 导航。侧边栏被打开后顶部一排 Tab 对应 6 家 AI 的 logo/名称点击任意 Tab当前区域就切换到对应家的 iframe。这里要注意切换时不要清掉原有 iframe 的浏览历史否则你之前聊到一半的上下文就断了。我加了缓存机制每个 AI 的页面一旦首次加载就不再销毁切回来时直接复用同一个 iframe 实例会话全靠原站服务端保存本地只是保住 DOM 不重建。实测下来会话留存和加载速度都好很多。nav classai-tabs button>export const PROVIDERS { chatgpt: { name: ChatGPT, url: https://chat.openai.com/, color: #10a37f }, claude: { name: Claude, url: https://claude.ai/, color: #d97757 }, gemini: { name: Gemini, url: https://gemini.google.com/app, color: #4285f4 }, copilot: { name: Copilot, url: https://copilot.microsoft.com/, color: #0078d4 }, perplexity: { name: Perplexity, url: https://www.perplexity.ai/, color: #20808d }, poe: { name: Poe, url: https://poe.com/, color: #6A4CFF } };想换成文心一言加一条ernie: { name: 文心一言, url: https://yiyan.baidu.com/ }再在导航里加一个按钮就行。这就是“开源可定制”最直白的表达。4. 常见问题与排查技巧4.1 某些 AI 网站拒绝在 iframe 中加载怎么解决这是最容易踩的坑。我实际测试时OpenAI 的页面2023 年底之后明确禁止了 iframe 嵌入X-Frame-Options是 DENY直连 iframe 会得到一个空白页加一条控制台报错。Gemini 起初可以嵌后来也逐渐收紧。Copilot 的页面政策不固定微软经常改。我的解决方案是“站点适配层”方案一最佳如果原站不允许 iframe但提供了 OAuth / 弹窗登录就改用“侧边栏只承载登录窗口成功后再拉取主界面”。实现方式是主面板嵌一个代理页代理页通过window.open打开原站让用户登录登录成功后重定向回扩展的页面并带上 session再由代理页内嵌 iframe 加载原站。方案二近似白屏检测。侧边栏里 iframe 的 onload 触发后轮询检查iframe.contentWindow.document.body.innerText.length如果始终为 0被 X-Frame-Options 拦截的典型表现就自动弹出一个“在新标签页中打开”的提示按钮让用户把该 AI 的页面单独打开侧边栏只保链接。第二种方案实际上退化成“书签快捷方式”但它保住了“一键切换”的体验不至于因为某个站的策略导致功能整块瘫痪。4.2 侧边栏切换 AI 时白屏或卡死白屏大概率不是扩展的问题是 iframe 内部页面在后台被浏览器冻结了。Chrome 会对隐藏 iframe 做“内容节流”尤其是不在活动标签页的网页会暂停其 JS 执行。如果切回来发现页面白屏或没反应说明 iframe 被冻结时丢失了部分渲染状态。我的处理方式是用visibilitychange事件检测侧边栏是否可见可见时强制对当前激活的 iframe 调用contentWindow.focus()并执行一次iframe.contentWindow.location.reload()。这里有个取舍直接 reload 会丢失未发送的输入框内容所以在 reload 前先用sessionStorage把该面板最后的内容暂存载入后恢复。如果是双栏模式给隐藏侧更低的 CPU 优先级切到另一侧时再取消。如果浏览器是米 114 之前的老版本Side Panel API 压根不可用只能退回到 Popup 或者新标签页方案。这个项目要求 Chrome 114也是硬条件。4.3 Cookie 与登录态隔离AI 网站经常要求重新登录Chrome 在侧边栏扩展里的 iframe 继承的是第三方 Cookie 策略。对于有的站点用户已经登录过但扩展侧边栏里却被判定为未登录因为它是“跨站 iframe”被浏览器当作第三方上下文处理。实际测试中Gemini 和 ChatGPT 都有不同程度的会话同步问题表现为主页已登录侧边栏里要求重新登录登录后主页的会话又相对过期。处理方式有两种一是把原站的 Cookie 在扩展自己的cookies权限里读出来主动携带到 iframe 请求需要cookies权限并声明对应域名。这种方案能做但指纹识别和安全校验很麻烦不建议新手深挖。二是干脆改用非 iframe 方案把整个侧边栏做成一个带 tab 的迷你浏览器每个 tab 是一个webview标签Electron 应用常见或者用browser标签替代 iframe。但 Chrome 扩展的webview有诸多权限限制打包成第三方扩展容易触发警告很多开发者最终转向“Tauri 侧边栏桌面应用 浏览器快捷键”的混合方案。4.4 实测最稳的组合以下是我实机验证过比较稳的浏览器与版本组合基于 2024 年中的状态各家随时改策略请以实测为准浏览器版本要求实测可用 AI侧边栏 iframeChrome114Gemini早期可用、Poe、Claude部分时段、PerplexityEdge114Copilot微软自家产品有豁免、PoeFirefox需装 Side View 等替代适配稍差不稳定如果一定要在主力机上稳定用我个人的体会是Edge Copilot 做默认对比Chrome 里跑 Gemini 与 Poe 的双栏对比。这样 Web 端登录状态冲突最少也最不容易触发安全限制。5. 扩展使用与手工配置指南5.1 安装、导入与授权开源项目一般发布在 GitHub 或 Gitee提供两种安装方式通过 Chrome 应用商店直接安装如果作者上传了。开发者模式加载下载源码 → 解压 → Chrome 打开chrome://extensions/→ 打开右上角“开发者模式” → 点击“加载已解压的扩展程序”→ 选择源码文件夹。导入后检查扩展权限列表它至少需要sidePanel、storage、tabs三项。如果你还开了隐私模式要在扩展详情里手动允许“在无痕模式下启用”。5.2 修改配置添加你常用的大模型打开config.js之类的配置文件在PROVIDERS里追加或修改ernie: { name: 文心一言, url: https://yiyan.baidu.com/, color: #2932E1 }导航 Tab 会自动多出一个“文心一言”不需要改 HTML。如果站点在 iframe 里被禁则会自动走降级逻辑打开新标签页这在配置里用fallback: newtab指定。5.3 快捷键调整与冲突排查Chrome 里所有扩展的快捷键冲突都是同一个入口地址栏输入chrome://extensions/shortcuts找到本项目可以自定义切换快捷键还可以绑定“直接切到某个 AI”的独立快捷键比如AltShift1直达 ChatGPT。有人反馈装了 AdBlock 或 Notion 相关的扩展后AltShift 组合被占此时最直接的办法是换一个不冲突的组合比如CtrlShiftYY 是多余键几乎没人用。6. 信息安全与边界意识既然是开源项目一定有人关心“这些代码安全吗”。我的建议是别迷信“开源”等于绝对安全。你能看到源码不代表没人在发布包里藏着东西。实操检查三件事看扩展的权限列表如果一个侧边栏工具申请了history、cookies、webRequest你就要问它为什么需要。看它到底发请求到哪里开着 DevTools 的 Network 面板逐一点击六个 AI观察有没有发到第三方域名。看代码更新时间长期不更新的扩展碰到 Chrome 更新策略变化就容易炸而作者不出现时你最好还是自己 fork 维护。我对这个项目的定位一向是“工作流增强工具”不往里面塞任何用户数据也不碰你的其他网站内容。它的好与坏只取决于你在侧边栏里跟 AI 聊了什么这本来就该是对话双方的事情。7. 从“安一个扩展”到“自己写一个”如果你看完整篇文章手痒的不只是想装还想照葫芦画瓢写一个属于你自己的版本那我给你指条明路核心 API 就三个chrome.sidePanel侧边栏、chrome.tabs如果需要监听标签变化、chrome.storage保存配置和状态。UI 用纯 HTML CSS 原生 JS 就能写完不用上框架除非你打算做特别复杂的设置页。多 AI 对比的核心就是多 iframe 拉活真正的工作量其实是“适配各家站点的反爬 / 反 iframe 策略”以及“处理隐藏 iframe 的冻结与白屏”。很多扩展把 80% 的代码花在兜底策略上而不是功能本身。所以我建议你起步时先做“单一 AI 侧边栏”跑通壳子再迭代到多 iframe 与并排对比。脚手架都成熟了剩下的就是填满坑的经验这也是开源项目最有价值的地方。