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