開(kāi)頭做技術(shù)的人電腦里沒(méi)有三五個(gè) AI 標(biāo)簽頁(yè)都不好意思說(shuō)自己在搞效率工具。但尬點(diǎn)也在這OpenAI 一個(gè)標(biāo)簽頁(yè)、Claude 一個(gè)標(biāo)簽頁(yè)、Gemini 又開(kāi)一個(gè)切來(lái)切去先把窗口管理器切亂了還沒(méi)開(kāi)始寫(xiě)代碼光找對(duì)地方就花了半分鐘。我見(jiàn)過(guò)不少“聚合 AI”工具要么是套殼站讓你注冊(cè)它的賬號(hào)要么是瀏覽器多標(biāo)簽方案的精裝修版。真正能在本地跟瀏覽器深度融合、免費(fèi)開(kāi)源、還能同時(shí)看的方案并不多。今天聊的這個(gè)開(kāi)源項(xiàng)目解決的就是這個(gè)痛點(diǎn)在 Chrome 側(cè)邊欄里一鍵切換 6 個(gè)主流 AI 對(duì)話工具還支持多個(gè) AI 并排對(duì)比同一道題不同模型的表現(xiàn)差別一眼就能看出來(lái)。對(duì)經(jīng)常要橫向評(píng)測(cè)模型輸出、選型、或者單純想偷懶減少來(lái)回切換的人來(lái)說(shuō)這個(gè)思路非常值得參考。不管你是在 Windows、macOS 還是 Linux 上用 Chrome也不管你手里的模型已經(jīng)落后到 GPT-3.5 還是已經(jīng)在用 GPT-4o只要你是把瀏覽器當(dāng)生產(chǎn)力的人這個(gè)項(xiàng)目都值得現(xiàn)裝現(xiàn)用順便也給那些想自己寫(xiě)瀏覽器擴(kuò)展的人提供了一個(gè)完整范本。1. 項(xiàng)目整體思路與需求拆解先拋開(kāi)代碼細(xì)節(jié)說(shuō)說(shuō)這個(gè)項(xiàng)目到底在解決什么問(wèn)題。表面上看是“把幾個(gè) AI 塞進(jìn)側(cè)邊欄”但深一層的邏輯是現(xiàn)在的 AI 工具太多了多到切來(lái)切去本身就是一種時(shí)間損耗。1.1 為什么是“側(cè)邊欄”而不是“新標(biāo)簽頁(yè)”Chrome 標(biāo)簽頁(yè)是有空間的但標(biāo)簽頁(yè)一多標(biāo)題全部縮成一串省略號(hào)你還得靠 favicon 認(rèn)人這是第一層損耗。而側(cè)邊欄的優(yōu)勢(shì)在于它永遠(yuǎn)在視野邊緣按下快捷鍵就能呼出干完活一按又縮回去不會(huì)干擾你正在看的頁(yè)面。從產(chǎn)品角度來(lái)說(shuō)側(cè)邊欄還是“非模態(tài)”的代表。它不像彈窗那樣把焦點(diǎn)搶走也不像新標(biāo)簽頁(yè)那樣徹底切換上下文。我打開(kāi)編輯器寫(xiě)代碼側(cè)邊欄貼著 ChatGPT寫(xiě)完一段直接粘過(guò)來(lái)讓它審這個(gè)“邊寫(xiě)邊審”的體驗(yàn)比來(lái)回切標(biāo)簽頁(yè)舒服太多了。這個(gè)項(xiàng)目選的側(cè)邊欄交互本質(zhì)上就是在為高頻、短時(shí)、非阻塞的 AI 請(qǐng)求做優(yōu)化——這正是日常開(kāi)發(fā)輔助的主要節(jié)奏。1.2 需求拆解一鍵切換、并排對(duì)比、開(kāi)源可定制拆開(kāi)標(biāo)題里的三個(gè)關(guān)鍵詞其實(shí)對(duì)應(yīng)三組明確需求一鍵切換不只是六個(gè)書(shū)簽快捷方式而是把 6 個(gè) AI 服務(wù)以一致的 UI 放在同一個(gè)容器里靠快捷鍵或者工具欄按鈕快速激活選中項(xiàng)不打斷當(dāng)前工作流。并排對(duì)比這是殺手锏功能。同一個(gè) Prompt 同時(shí)發(fā)給多個(gè)模型并排渲染輸出結(jié)果省去我人工對(duì)比時(shí)反復(fù)復(fù)制粘貼切換窗口的功夫。做 Prompt 調(diào)試的時(shí)候這一條直接把效率拉滿(mǎn)。開(kāi)源可定制擴(kuò)展本身是開(kāi)源的意味著 AI 的清單不是寫(xiě)死的想加國(guó)內(nèi)大模型、想換自定義接口、想調(diào)整某家模型的 API 域名改配置就能辦不用等作者發(fā)版。需求拆到這個(gè)粒度“這項(xiàng)目也不復(fù)雜啊”跟“這里面的功夫不少”兩種感覺(jué)同時(shí)冒出來(lái)才是正常的。博主這個(gè)項(xiàng)目厲害的地方就是它把“復(fù)雜”藏在了簡(jiǎn)單背后。2. 核心實(shí)現(xiàn)原理與方案選型2.1 Chrome 側(cè)邊欄擴(kuò)展的開(kāi)發(fā)基礎(chǔ)Chrome 官方從 114 版本開(kāi)始提供Side Panel API從 Manifest V3 開(kāi)始支持side_panel權(quán)限聲明開(kāi)發(fā)者可以給瀏覽器加一個(gè)常駐側(cè)邊欄。這是整個(gè)項(xiàng)目的地基。MV3 里需要用 Service Worker 作為后臺(tái)腳本跟過(guò)去的 Background Page 不是一個(gè)概念。所有事件的注冊(cè)和監(jiān)聽(tīng)邏輯都?jí)涸谝粋€(gè)隨時(shí)可能被休眠的 worker 里注意得“醒得快存得精”。比如要保存當(dāng)前激活的是哪個(gè) AI不能只存變量必須寫(xiě)進(jìn)chrome.storage.session或者放 localStorage否則 worker 一重啟狀態(tài)就丟了。這個(gè)項(xiàng)目的核心清單長(zhǎng)這樣類(lèi)似實(shí)現(xiàn){ 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 下側(cè)邊欄默認(rèn)不會(huì)自動(dòng)打開(kāi)需要在 Service Worker 里調(diào)用chrome.sidePanel.setPanelBehavior把行為設(shè)置成跟隨當(dāng)前窗口openPanelOnActionClick或者干脆監(jiān)聽(tīng)快捷鍵命令用戶(hù)按 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 六個(gè) AI 的接入方式iframe 掛載與標(biāo)簽頁(yè)切換剛開(kāi)始做多 AI 側(cè)邊欄常見(jiàn)方案有兩個(gè)一是用各家 AI 的官方 API自己接接口、自己寫(xiě)對(duì)話 UI二是直接把完整網(wǎng)頁(yè)塞進(jìn) iframe把“界面”和“用戶(hù)會(huì)話”交給對(duì)方站點(diǎn)。博主選擇的是 iframe 方案。原因不復(fù)雜用 API 接 6 家服務(wù)相當(dāng)于開(kāi)發(fā)了 6 個(gè)簡(jiǎn)易客戶(hù)端要處理鑒權(quán)、歷史會(huì)話、格式解析、流式輸出、異常重試一套下來(lái)保守估計(jì)幾千行代碼而且每個(gè)模型的行為差異都要單獨(dú)適配而 iframe 方案把界面和登錄態(tài)全部交給原站處理擴(kuò)展做到是“導(dǎo)航與容器”這一個(gè)職責(zé)。以 Gemini 為例直接加載https://gemini.google.com/app到一個(gè)隱藏面板里其他模型同理。這樣用戶(hù)在該站登錄過(guò)就直接能用沒(méi)登錄就會(huì)看到原站的登錄界面非常自然。不過(guò) iframe 也有天然限制。很多站點(diǎn)通過(guò) HTTP 響應(yīng)頭里的X-Frame-Options: DENY或 CSPframe-ancestors禁止被嵌如果是這種情況就要降級(jí)用“新窗口嵌入”方案不硬塞進(jìn)側(cè)邊欄而是靠 tab 的概念在同一個(gè)側(cè)邊欄區(qū)域里加載標(biāo)簽或者后臺(tái)輪詢(xún)新窗口的 DOM 來(lái)通信。具體該走哪條路取決于站點(diǎn)是否有強(qiáng)制防護(hù)這個(gè)到第三章再細(xì)化。2.3 多 AI 并排對(duì)比的實(shí)現(xiàn)邏輯并排對(duì)比的實(shí)現(xiàn)不是把 6 個(gè) iframe 同時(shí) Display 設(shè)為 inline-flex。因?yàn)闉g覽器標(biāo)簽頁(yè)的渲染機(jī)制是任何非當(dāng)前播放標(biāo)簽頁(yè)都會(huì)被系統(tǒng)降優(yōu)先級(jí)多個(gè) iframe 同時(shí)跑 6 個(gè)大模型的頁(yè)面內(nèi)存占用和滾動(dòng)性能會(huì)同時(shí)崩潰。正確的做法是“多 iframe 激活切換”同一時(shí)刻最多激活兩個(gè)一個(gè)左側(cè)、一個(gè)右側(cè)剩下的在內(nèi)存里 hiberate但保持 iframe 存活不能銷(xiāo)毀否則會(huì)話狀態(tài)全丟只是對(duì)離屏或隱藏的 iframe 做content-visibility: hidden級(jí)別的隱藏減少其渲染開(kāi)銷(xiāo)。async function renderComparison(leftId, rightId) { // 左側(cè) iframe leftFrame.src PROVIDERS[leftId].url; leftFrame.classList.remove(hidden); // 右側(cè) iframe rightFrame.src PROVIDERS[rightId].url; rightFrame.classList.remove(hidden); }這種方式比“把兩個(gè) AI 塞進(jìn)一個(gè)頁(yè)面再找內(nèi)容可復(fù)制性”靠譜。真實(shí)開(kāi)發(fā)中并排的兩個(gè) iframe 是天然隔離的各自維護(hù)各自的會(huì)話沒(méi)有一手遮天的鉤子去直接扒對(duì)方 DOM。3. 實(shí)操過(guò)程與核心功能實(shí)現(xiàn)這幾個(gè)技術(shù)點(diǎn)選型定了剩下的是把功能落地的逐步伺候。3.1 一鍵切換的交互落地快捷鍵、工具欄按鈕、命令面板“一鍵”體現(xiàn)在三處一是全局面板快捷鍵。配置項(xiàng)里我設(shè)置的是AltShiftA實(shí)際上看你自己習(xí)慣。代碼上監(jiān)聽(tīng)chrome.commands.onCommand在收到 toggle 指令時(shí)執(zhí)行chrome.sidePanel.toggle()如果你的 Chrome 版本高于 116也可以用open加windowId來(lái)控制。這個(gè)快捷鍵是全局生效的只要瀏覽器在前臺(tái)任何頁(yè)面下都能一鍵呼出。二是工具欄按鈕。點(diǎn)擊擴(kuò)展圖標(biāo)直接展開(kāi)側(cè)邊欄這就是前面說(shuō)到的setPanelBehavior({ openPanelOnActionClick: true })。三是面板內(nèi)的 Tab 導(dǎo)航。側(cè)邊欄被打開(kāi)后頂部一排 Tab 對(duì)應(yīng) 6 家 AI 的 logo/名稱(chēng)點(diǎn)擊任意 Tab當(dāng)前區(qū)域就切換到對(duì)應(yīng)家的 iframe。這里要注意切換時(shí)不要清掉原有 iframe 的瀏覽歷史否則你之前聊到一半的上下文就斷了。我加了緩存機(jī)制每個(gè) AI 的頁(yè)面一旦首次加載就不再銷(xiāo)毀切回來(lái)時(shí)直接復(fù)用同一個(gè) iframe 實(shí)例會(huì)話全靠原站服務(wù)端保存本地只是保住 DOM 不重建。實(shí)測(cè)下來(lái)會(huì)話留存和加載速度都好很多。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/ }再在導(dǎo)航里加一個(gè)按鈕就行。這就是“開(kāi)源可定制”最直白的表達(dá)。4. 常見(jiàn)問(wèn)題與排查技巧4.1 某些 AI 網(wǎng)站拒絕在 iframe 中加載怎么解決這是最容易踩的坑。我實(shí)際測(cè)試時(shí)OpenAI 的頁(yè)面2023 年底之后明確禁止了 iframe 嵌入X-Frame-Options是 DENY直連 iframe 會(huì)得到一個(gè)空白頁(yè)加一條控制臺(tái)報(bào)錯(cuò)。Gemini 起初可以嵌后來(lái)也逐漸收緊。Copilot 的頁(yè)面政策不固定微軟經(jīng)常改。我的解決方案是“站點(diǎn)適配層”方案一最佳如果原站不允許 iframe但提供了 OAuth / 彈窗登錄就改用“側(cè)邊欄只承載登錄窗口成功后再拉取主界面”。實(shí)現(xiàn)方式是主面板嵌一個(gè)代理頁(yè)代理頁(yè)通過(guò)window.open打開(kāi)原站讓用戶(hù)登錄登錄成功后重定向回?cái)U(kuò)展的頁(yè)面并帶上 session再由代理頁(yè)內(nèi)嵌 iframe 加載原站。方案二近似白屏檢測(cè)。側(cè)邊欄里 iframe 的 onload 觸發(fā)后輪詢(xún)檢查iframe.contentWindow.document.body.innerText.length如果始終為 0被 X-Frame-Options 攔截的典型表現(xiàn)就自動(dòng)彈出一個(gè)“在新標(biāo)簽頁(yè)中打開(kāi)”的提示按鈕讓用戶(hù)把該 AI 的頁(yè)面單獨(dú)打開(kāi)側(cè)邊欄只保鏈接。第二種方案實(shí)際上退化成“書(shū)簽快捷方式”但它保住了“一鍵切換”的體驗(yàn)不至于因?yàn)槟硞€(gè)站的策略導(dǎo)致功能整塊癱瘓。4.2 側(cè)邊欄切換 AI 時(shí)白屏或卡死白屏大概率不是擴(kuò)展的問(wèn)題是 iframe 內(nèi)部頁(yè)面在后臺(tái)被瀏覽器凍結(jié)了。Chrome 會(huì)對(duì)隱藏 iframe 做“內(nèi)容節(jié)流”尤其是不在活動(dòng)標(biāo)簽頁(yè)的網(wǎng)頁(yè)會(huì)暫停其 JS 執(zhí)行。如果切回來(lái)發(fā)現(xiàn)頁(yè)面白屏或沒(méi)反應(yīng)說(shuō)明 iframe 被凍結(jié)時(shí)丟失了部分渲染狀態(tài)。我的處理方式是用visibilitychange事件檢測(cè)側(cè)邊欄是否可見(jiàn)可見(jiàn)時(shí)強(qiáng)制對(duì)當(dāng)前激活的 iframe 調(diào)用contentWindow.focus()并執(zhí)行一次iframe.contentWindow.location.reload()。這里有個(gè)取舍直接 reload 會(huì)丟失未發(fā)送的輸入框內(nèi)容所以在 reload 前先用sessionStorage把該面板最后的內(nèi)容暫存載入后恢復(fù)。如果是雙欄模式給隱藏側(cè)更低的 CPU 優(yōu)先級(jí)切到另一側(cè)時(shí)再取消。如果瀏覽器是米 114 之前的老版本Side Panel API 壓根不可用只能退回到 Popup 或者新標(biāo)簽頁(yè)方案。這個(gè)項(xiàng)目要求 Chrome 114也是硬條件。4.3 Cookie 與登錄態(tài)隔離AI 網(wǎng)站經(jīng)常要求重新登錄Chrome 在側(cè)邊欄擴(kuò)展里的 iframe 繼承的是第三方 Cookie 策略。對(duì)于有的站點(diǎn)用戶(hù)已經(jīng)登錄過(guò)但擴(kuò)展側(cè)邊欄里卻被判定為未登錄因?yàn)樗恰翱缯?iframe”被瀏覽器當(dāng)作第三方上下文處理。實(shí)際測(cè)試中Gemini 和 ChatGPT 都有不同程度的會(huì)話同步問(wèn)題表現(xiàn)為主頁(yè)已登錄側(cè)邊欄里要求重新登錄登錄后主頁(yè)的會(huì)話又相對(duì)過(guò)期。處理方式有兩種一是把原站的 Cookie 在擴(kuò)展自己的cookies權(quán)限里讀出來(lái)主動(dòng)攜帶到 iframe 請(qǐng)求需要cookies權(quán)限并聲明對(duì)應(yīng)域名。這種方案能做但指紋識(shí)別和安全校驗(yàn)很麻煩不建議新手深挖。二是干脆改用非 iframe 方案把整個(gè)側(cè)邊欄做成一個(gè)帶 tab 的迷你瀏覽器每個(gè) tab 是一個(gè)webview標(biāo)簽Electron 應(yīng)用常見(jiàn)或者用browser標(biāo)簽替代 iframe。但 Chrome 擴(kuò)展的webview有諸多權(quán)限限制打包成第三方擴(kuò)展容易觸發(fā)警告很多開(kāi)發(fā)者最終轉(zhuǎn)向“Tauri 側(cè)邊欄桌面應(yīng)用 瀏覽器快捷鍵”的混合方案。4.4 實(shí)測(cè)最穩(wěn)的組合以下是我實(shí)機(jī)驗(yàn)證過(guò)比較穩(wěn)的瀏覽器與版本組合基于 2024 年中的狀態(tài)各家隨時(shí)改策略請(qǐng)以實(shí)測(cè)為準(zhǔn)瀏覽器版本要求實(shí)測(cè)可用 AI側(cè)邊欄 iframeChrome114Gemini早期可用、Poe、Claude部分時(shí)段、PerplexityEdge114Copilot微軟自家產(chǎn)品有豁免、PoeFirefox需裝 Side View 等替代適配稍差不穩(wěn)定如果一定要在主力機(jī)上穩(wěn)定用我個(gè)人的體會(huì)是Edge Copilot 做默認(rèn)對(duì)比Chrome 里跑 Gemini 與 Poe 的雙欄對(duì)比。這樣 Web 端登錄狀態(tài)沖突最少也最不容易觸發(fā)安全限制。5. 擴(kuò)展使用與手工配置指南5.1 安裝、導(dǎo)入與授權(quán)開(kāi)源項(xiàng)目一般發(fā)布在 GitHub 或 Gitee提供兩種安裝方式通過(guò) Chrome 應(yīng)用商店直接安裝如果作者上傳了。開(kāi)發(fā)者模式加載下載源碼 → 解壓 → Chrome 打開(kāi)chrome://extensions/→ 打開(kāi)右上角“開(kāi)發(fā)者模式” → 點(diǎn)擊“加載已解壓的擴(kuò)展程序”→ 選擇源碼文件夾。導(dǎo)入后檢查擴(kuò)展權(quán)限列表它至少需要sidePanel、storage、tabs三項(xiàng)。如果你還開(kāi)了隱私模式要在擴(kuò)展詳情里手動(dòng)允許“在無(wú)痕模式下啟用”。5.2 修改配置添加你常用的大模型打開(kāi)config.js之類(lèi)的配置文件在PROVIDERS里追加或修改ernie: { name: 文心一言, url: https://yiyan.baidu.com/, color: #2932E1 }導(dǎo)航 Tab 會(huì)自動(dòng)多出一個(gè)“文心一言”不需要改 HTML。如果站點(diǎn)在 iframe 里被禁則會(huì)自動(dòng)走降級(jí)邏輯打開(kāi)新標(biāo)簽頁(yè)這在配置里用fallback: newtab指定。5.3 快捷鍵調(diào)整與沖突排查Chrome 里所有擴(kuò)展的快捷鍵沖突都是同一個(gè)入口地址欄輸入chrome://extensions/shortcuts找到本項(xiàng)目可以自定義切換快捷鍵還可以綁定“直接切到某個(gè) AI”的獨(dú)立快捷鍵比如AltShift1直達(dá) ChatGPT。有人反饋裝了 AdBlock 或 Notion 相關(guān)的擴(kuò)展后AltShift 組合被占此時(shí)最直接的辦法是換一個(gè)不沖突的組合比如CtrlShiftYY 是多余鍵幾乎沒(méi)人用。6. 信息安全與邊界意識(shí)既然是開(kāi)源項(xiàng)目一定有人關(guān)心“這些代碼安全嗎”。我的建議是別迷信“開(kāi)源”等于絕對(duì)安全。你能看到源碼不代表沒(méi)人在發(fā)布包里藏著東西。實(shí)操檢查三件事看擴(kuò)展的權(quán)限列表如果一個(gè)側(cè)邊欄工具申請(qǐng)了history、cookies、webRequest你就要問(wèn)它為什么需要?？此降装l(fā)請(qǐng)求到哪里開(kāi)著 DevTools 的 Network 面板逐一點(diǎn)擊六個(gè) AI觀察有沒(méi)有發(fā)到第三方域名?？创a更新時(shí)間長(zhǎng)期不更新的擴(kuò)展碰到 Chrome 更新策略變化就容易炸而作者不出現(xiàn)時(shí)你最好還是自己 fork 維護(hù)。我對(duì)這個(gè)項(xiàng)目的定位一向是“工作流增強(qiáng)工具”不往里面塞任何用戶(hù)數(shù)據(jù)也不碰你的其他網(wǎng)站內(nèi)容。它的好與壞只取決于你在側(cè)邊欄里跟 AI 聊了什么這本來(lái)就該是對(duì)話雙方的事情。7. 從“安一個(gè)擴(kuò)展”到“自己寫(xiě)一個(gè)”如果你看完整篇文章手癢的不只是想裝還想照葫蘆畫(huà)瓢寫(xiě)一個(gè)屬于你自己的版本那我給你指條明路核心 API 就三個(gè)chrome.sidePanel側(cè)邊欄、chrome.tabs如果需要監(jiān)聽(tīng)標(biāo)簽變化、chrome.storage保存配置和狀態(tài)。UI 用純 HTML CSS 原生 JS 就能寫(xiě)完不用上框架除非你打算做特別復(fù)雜的設(shè)置頁(yè)。多 AI 對(duì)比的核心就是多 iframe 拉活真正的工作量其實(shí)是“適配各家站點(diǎn)的反爬 / 反 iframe 策略”以及“處理隱藏 iframe 的凍結(jié)與白屏”。很多擴(kuò)展把 80% 的代碼花在兜底策略上而不是功能本身。所以我建議你起步時(shí)先做“單一 AI 側(cè)邊欄”跑通殼子再迭代到多 iframe 與并排對(duì)比。腳手架都成熟了剩下的就是填滿(mǎn)坑的經(jīng)驗(yàn)這也是開(kāi)源項(xiàng)目最有價(jià)值的地方。