SawyerHood/dev-browser

解決的問題

dev-browser 提供了一種方式，讓 AI 編碼代理能與網頁瀏覽器互動，而無需為每個單一操作重新啟動瀏覽器工作階段。它允許代理在多次腳本呼叫之間維持狀態（如登入工作階段或導覽歷史記錄），從而實現更高效的「觀察 $\rightarrow$ 行動 $\rightarrow$ 驗證」工作流程。

運作方式

該工具作為一個管理 Chrome 實例的常駐程式運作。編碼代理可以使用 CLI 或 MCP (Model Context Protocol) 伺服器將簡短的 JavaScript 腳本傳送給這個常駐程式。這些腳本使用修改過的 Puppeteer API 來控制瀏覽器。

關鍵技術機制包括：

• 持久頁面：在 不同腳本執行之間保持其狀態的具名分頁。
• 無障礙樹快照：它不提供原始 HTML，而是提供緊湊的無障礙樹，這對 LLM 來說更容易閱讀，並包含穩定的元素參考（例如 e12）。
• 靈活連線：它可以啟動自己隔離的 Chrome 設定檔，或是附加到使用者機器上已經開啟的瀏覽器。
• 執行環境：每個腳本都在全新的 node:vm 環境中執行，以保持全域變數分離。

適用對象

它專為建構 AI 代理（特別是編碼代理）的開發人員設計，這些代理需要自動化瀏覽器任務、檢查網頁，並即時驗證其操作的結果。

重點特色

• 有狀態的工作階段：透過具名分頁在多次呼叫之間維持瀏覽器狀態。
• AI 最佳化輸出：使用無障礙樹來提供緊湊、易讀的頁面快照。
• Puppeteer 整合：利用真實的 Puppeteer Page API 並為 AI 代理新增輔助功能。
• 瀏覽器附加：能夠透過 CDP (Chrome DevTools Protocol) 連結到現有的 Chrome 實例。
• MCP 支援：包含內建的 MCP 伺服器，可與 Claude 等工具無縫整合。