YetiBrowser MCP

官方

YetiBrowser MCP 是一個完全開源的解決方案，讓 AI 助手能輕鬆與您現有的瀏覽器互動。

GitHub
11

你可以用 Yeti Browser MCP 做什麼？

  • 導航並擷取頁面快照 — 要求助理使用 browser_navigate 載入網址，並回傳結果頁面的無障礙快照。
  • 填寫並提交網頁表單 — 使用 browser_fill_form 或 browser_type 填入多個欄位，並可選擇提交表單。
  • 檢查主控台輸出與頁面狀態 — 透過 browser_get_console_logs 和 browser_page_state 擷取錯誤、日誌、表單資料、Cookie 及儲存金鑰。
  • 在頁面中執行自訂 JavaScript — 使用 browser_evaluate 執行任意腳本，並取得可序列化為 JSON 的結果，用於除錯或資料擷取。
  • 擷取螢幕截圖 — 使用 browser_screenshot 拍攝可視區域或全頁截圖，用於視覺驗證或品質保證流程。

文件

[!IMPORTANT] 此專案已封存。它最初是為了解決 Claude 和 Codex 等 AI 代理缺乏瀏覽器控制能力的問題而建置，但這些代理現在已內建相關功能，不再需要專門的 MCP 解決方案。

YetiBrowser MCP

YetiBrowser MCP 是 Browser MCP 工作流程的完全開源實作。它將基於 Node 的 MCP 伺服器與 Chrome/Firefox 擴充功能連結，讓模型上下文協定（Model Context Protocol）客戶端——例如 Codex/Claude Code、Cursor、Windsurf、MCP Inspector 或您自己的工具——能夠自動化真實的瀏覽器分頁，同時確保所有資料都保留在您的機器上且可供稽核。

為何選擇 YetiBrowser MCP？

  • 透明且可修改 – 無需下載二進位檔案。可檢查、分支及擴充每個元件。
  • 本地優先 – 擴充功能僅與 localhost 的 MCP 伺服器通訊；瀏覽資料絕不會離開您的裝置。
  • 跨瀏覽器 – 共享邏輯同時支援 Chrome 和 Firefox 套件（Firefox 版本因等待更完善的 Manifest V3 支援而暫緩，因此在 Mozilla 釋出完整的 MV3 API 之前，連線體驗可能受限）。
  • 開發者導向工具 – 更豐富的主控台擷取、DOM 差異比對、頁面狀態傾印以及專為除錯和 QA 設計的全頁螢幕截圖。
  • 適合生產環境 – 提供用於封裝、發布以及與 IDE 工作流程整合的腳本和文件。

儲存庫佈局

  • packages/shared – 訊息和工具綱要的共享 TypeScript 定義。
  • packages/server – 將 MCP 客戶端橋接到執行中瀏覽器分頁的 MCP 伺服器。
  • extensions/shared – 共享的擴充功能原始碼（背景腳本/彈出視窗）和資源。
  • extensions/chrome / extensions/firefox – 各瀏覽器的封裝層。
  • docs/ – 工作區指令、發布檢查清單和功能說明。
  • scripts/ – 輔助工具，例如用於發布壓縮檔的 package-extensions.sh。

可用的 MCP 工具

  • browser_snapshot – 擷取目前頁面以無障礙為導向的快照
  • browser_snapshot_diff – 比較最近兩次快照，以突顯 DOM/ARIA 的變更
  • browser_navigate – 在已連線的分頁中載入新的 URL，並回傳更新後的快照
  • browser_go_back / browser_go_forward – 在歷史記錄中移動，同時保持 MCP 同步
  • browser_wait – 將自動化暫停指定的秒數
  • browser_wait_for – 在繼續之前，封鎖直到指定的選擇器出現（可選的可見性條件）
  • browser_press_key – 在聚焦的元素上模擬鍵盤按鍵按下
  • browser_click – 點擊由 CSS 選擇器識別的元素
  • browser_hover – 將指標懸停在目標元素上
  • browser_drag – 將元素拖曳到放置目標上，用於可排序/拖放的 UI
  • browser_type – 在可編輯元素中輸入文字（可選用 Enter 鍵提交）
  • browser_fill_form – 在單次呼叫中填寫多個輸入框/下拉選單/核取方塊/單選按鈕
  • browser_select_option – 在 <select> 元素中選擇一個或多個選項
  • browser_screenshot – 透過 DevTools 協定擷取視窗或全頁螢幕截圖
  • browser_get_console_logs – 回傳最近的主控台輸出，包括帶有堆疊追蹤的錯誤
  • browser_page_state – 傾印已連線頁面的表單、儲存鍵值和 Cookie
  • browser_connection_info – 回報橋接 WebSocket 連接埠、連線狀態和擴充功能版本
  • browser_evaluate – 在頁面內執行自訂 JavaScript，並回傳可 JSON 序列化的結果
  • browser_handle_dialog – 接受或關閉 alert/confirm/prompt 對話框，可附帶提示文字

MCP 瀏覽器擴充功能安裝

Chrome 瀏覽器

Firefox 瀏覽器（目前尚不可用）

  • 由於 Firefox 穩定版本中 Manifest v3 的功能有限，Firefox 擴充功能將暫緩，直到完整支援普遍可用（Nightly 版本除外）。

MCP 伺服器安裝

Codex CLI

  • 編輯您的 ~/.codex/config.toml 並新增 MCP 條目： 
    [mcp_servers.yetibrowser-mcp]
command = "npx"
args = ["-y", "@yetidevworks/server"]
  • 重新啟動 codex CLI 指令；您應該會在 /mcp 工具下看到 yetibrowser-mcp 列表。
  • 如果您想指定特定的連接埠，請對 args 條目使用此格式：args = ["-y", "@yetidevworks/server", "--ws-port", "9010"]

Claude Code

  • 確保擴充功能已安裝並連線到某個分頁，然後使用 npx -y @yetidevworks/server 啟動 MCP 伺服器（或執行本地建置的 CLI）。
  • 將伺服器條目新增至 ~/Library/Application Support/Claude/claude_desktop_config.json（請參閱 docs/publishing.md 中的範例）。
  • 重新啟動 claude，使其載入新的 MCP 伺服器；一旦擴充功能連線，您應該會在 /mcp 工具選單下看到 yetibrowser-mcp 列表。

其他支援 MCP 的客戶端

  • 任何 MCP 客戶端都可以透過執行 CLI（npx -y @yetidevworks/server）來連線，或可選擇性地指定特定連接埠，例如 npx -y @yetidevworks/server --ws-port 9010。
  • 伺服器透過 stdio 公開標準的 MCP 傳輸，因此請使用您的客戶端支援的任何設定機制，在分頁連線時執行上述指令。

MCP Inspector

  • 用於在編碼代理之外進行測試和除錯。
  • npx @modelcontextprotocol/inspector npx -y @yetidevworks/server -- --ws-port 9010 以執行並檢查 MCP 伺服器，並搭配 YetiBrowser MCP 瀏覽器擴充功能使用。

疑難排解

  • CLI 會從連接埠 9010-9020 開始尋找，直到找到可用的為止，並在推進時記錄 switched to。如果您想固定使用特定連接埠，請傳遞 --ws-port <port>。
  • 瀏覽器擴充功能的彈出視窗會反映該行為：將其保留在「自動」以跟隨 CLI 的連接埠，或選擇「手動」並輸入 browser_connection_info / CLI 記錄所回報的連接埠來覆蓋它。
  • 只需向您的 AI 工具詢問連線連接埠即可。例如：what is the yetibrowser mcp connction info?，然後將手動連接埠設定為回報的連接埠。

文件與建置腳本