Yetibrowser MCP

🚀 YetiBrowser MCP

YetiBrowser MCP是瀏覽器MCP工作流程的完全開源實現。它將基於Node的MCP服務器與Chrome/Firefox擴展相連接，使得模型上下文協議（Model Context Protocol）客戶端（如Codex/Claude Code、Cursor、Windsurf、MCP Inspector或你自己的工具）能夠自動化操作真實的瀏覽器標籤頁，同時確保每一個字節的數據都保留在你的設備上，並且可審計。

🚀 快速開始

MCP瀏覽器擴展安裝

Chrome瀏覽器

• 在此處安裝最新的Chrome瀏覽器擴展：https://chromewebstore.google.com/detail/hpedknkjljpopinabjjmljgckhlancni?utm_source=item-share-cb
• 除非你運行了多個YetiBrowser MCP服務器實例，否則請將其保持在自動連接模式。

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文件中（請參閱中的示例）。
• 重啟claude，以便它能識別新的MCP服務器；擴展連接後，你應該會在/mcp工具菜單中看到yetibrowser-mcp。

其他支持MCP的客戶端

• 任何MCP客戶端都可以通過啟動CLI（npx -y @yetidevworks/server）來連接，或者可選地指定一個特定的端口，例如npx -y @yetidevworks/server --ws-port 9010。
• 服務器通過標準輸入輸出暴露標準的MCP傳輸協議，因此當標籤頁連接時，使用你的客戶端支持的任何配置機制來運行上述命令。

MCP Inspector

• 用於在編碼代理之外進行測試和調試。
• 使用npx @modelcontextprotocol/inspector npx -y @yetidevworks/server -- --ws-port 9010來運行並結合YetiBrowser MCP瀏覽器擴展檢查MCP服務器。

故障排除

• CLI會在9010 - 9020端口範圍內尋找可用端口，找到時會記錄switched to。如果你想固定一個特定的端口，可以傳遞--ws-port <port>參數。
• 瀏覽器擴展的彈出窗口會反映這種行為：將其保持在“自動”模式以跟蹤CLI的端口，或者選擇“手動”並輸入browser_connection_info或CLI日誌中報告的端口來覆蓋它。
• 你可以直接詢問你的AI工具連接端口。例如：what is the yetibrowser mcp connction info?，然後將報告的端口設置為手動端口。

✨ 主要特性

• 透明且可定製 – 無需下載二進制文件。你可以檢查、分叉和擴展每個組件。
• 本地優先 – 擴展僅與本地主機的MCP服務器通信；瀏覽數據永遠不會離開你的設備。
• 跨瀏覽器支持 – 共享邏輯支持Chrome和Firefox擴展包（由於Firefox對Manifest V3的支持尚不完善，Firefox版本的構建暫未完成，因此在Mozilla推出完整的MV3 API之前，連接的用戶體驗可能會受到限制）。
• 面向開發者的工具 – 提供更豐富的控制檯捕獲、DOM差異比較、頁面狀態轉儲和全頁截圖功能，用於調試和質量保證。
• 適合生產環境 – 提供用於打包、發佈和集成到IDE工作流程的腳本和文檔。

📦 安裝指南

MCP瀏覽器擴展安裝

Chrome瀏覽器

• 在此處安裝最新的Chrome瀏覽器擴展：https://chromewebstore.google.com/detail/hpedknkjljpopinabjjmljgckhlancni?utm_source=item-share-cb
• 除非你運行了多個YetiBrowser MCP服務器實例，否則請將其保持在自動連接模式。

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文件中（請參閱中的示例）。
• 重啟claude，以便它能識別新的MCP服務器；擴展連接後，你應該會在/mcp工具菜單中看到yetibrowser-mcp。

其他支持MCP的客戶端

• 任何MCP客戶端都可以通過啟動CLI（npx -y @yetidevworks/server）來連接，或者可選地指定一個特定的端口，例如npx -y @yetidevworks/server --ws-port 9010。
• 服務器通過標準輸入輸出暴露標準的MCP傳輸協議，因此當標籤頁連接時，使用你的客戶端支持的任何配置機制來運行上述命令。

MCP Inspector

• 用於在編碼代理之外進行測試和調試。
• 使用npx @modelcontextprotocol/inspector npx -y @yetidevworks/server -- --ws-port 9010來運行並結合YetiBrowser MCP瀏覽器擴展檢查MCP服務器。

💻 使用示例

基礎用法

你可以使用以下命令啟動MCP服務器：

npx -y @yetidevworks/server

📚 詳細文檔

倉庫佈局

• 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 – 將元素拖動到拖放目標上，適用於可排序或拖放式用戶界面
• 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對話框，可選擇提供提示文本

文檔與構建腳本

• 工作區命令文檔位於。
• 發佈步驟（npm + 擴展商店）文檔位於。
• 截圖功能的文檔位於。
• 使用./scripts/package-extensions.sh腳本生成可分發的Chrome/Firefox壓縮包（輸出到artifacts/目錄）。
• 倉庫級別的隱私政策文檔位於。