Browser Tools MCP

🚀 BrowserTools MCP

BrowserTools MCP 是一款強大的瀏覽器監控與交互工具。藉助 Anthropic 的模型上下文協議（MCP），它能讓基於人工智能的應用程序通過 Chrome 擴展捕獲並分析瀏覽器數據，大幅提升 AI 工具與瀏覽器交互的能力。

🚀 快速開始

閱讀我們的 文檔，獲取完整的安裝、快速上手和貢獻指南。

✨ 主要特性

版本更新

v1.2.0 版本已發佈！以下是本次更新的要點：

• 現在可以在 DevTools 面板中啟用“允許自動粘貼到 Cursor”功能。截圖將自動粘貼到 Cursor 中（確保在 Cursor 中聚焦/點擊 Agent 輸入字段，否則該功能無法使用）。
• 通過 Lighthouse 集成了一套 SEO、性能、可訪問性和最佳實踐分析工具。
• 實現了一個用於改進 NextJS 應用程序 SEO 的特定提示。
• 添加了調試器模式，該工具按特定順序執行所有調試工具，並附帶一個用於改進推理的提示。
• 添加了審計模式，作為按特定順序執行所有審計工具的工具。
• 解決了 Windows 連接問題。
• 通過主機/端口自動發現、自動重新連接和優雅關閉機制，改進了 BrowserTools 服務器、擴展和 MCP 服務器之間的網絡連接。
• 增加了使用 Ctrl+C 更輕鬆退出 BrowserTools 服務器的功能。

請確保在你的 IDE / MCP 客戶端中更新版本： npx @agentdeskai/browser-tools-mcp@1.2.0

同時，請在此處下載最新版本的 Chrome 擴展： v1.2.0 BrowserToolsMCP Chrome 擴展

之後，你可以像這樣運行本地節點服務器： npx @agentdeskai/browser-tools-server@1.2.0

請務必指定版本 1.2.0，因為 NPX 緩存可能會阻止你獲取最新版本！每次更新時，你只需執行一次此操作。完成一次後，你將使用最新版本。

打開 Chrome 開發者工具後，日誌將發送到你的服務器 🦾

如果你有任何問題或疑問，請隨時創建問題工單！如果你有改進建議，也可以創建帶有增強標籤的問題工單，或者在 @tedx_ai on x 聯繫我。

完整更新說明

像 Cursor 這樣的編碼代理可以無縫地對當前頁面運行這些審計。藉助 Puppeteer 和 Lighthouse npm 庫，BrowserTools MCP 現在可以：

• 評估頁面是否符合 WCAG 標準
• 識別性能瓶頸
• 標記頁面上的 SEO 問題
• 檢查是否遵循 Web 開發最佳實踐
• 審查 NextJS 特定的 SEO 問題

所有這些操作都無需離開你的 IDE 🎉

關鍵新增功能

📦 安裝指南

安裝步驟請參考我們的文檔：

• BrowserTools MCP 文檔

💻 使用示例

使用審計工具

✅ 開始前準備

確保你具備以下條件：

• 瀏覽器中有一個活動標籤頁
• 啟用了 BrowserTools 擴展

▶️ 運行審計

• 無頭瀏覽器自動化：Puppeteer 自動化一個無頭 Chrome 實例來加載頁面並收集審計數據，即使對於單頁應用程序或通過 JavaScript 加載的內容，也能確保獲得準確的結果。無頭瀏覽器實例在最後一次審計調用後保持活動狀態 60 秒，以有效處理連續的審計請求。
• 結構化結果：每次審計都以結構化的 JSON 格式返回結果，包括總體得分和詳細的問題列表。這使得兼容 MCP 的客戶端能夠輕鬆解釋結果並提供可操作的見解。

MCP 服務器提供了在當前頁面運行審計的工具。以下是你可以使用的示例查詢：

• 可訪問性審計 (runAccessibilityAudit)：確保頁面符合 WCAG 等可訪問性標準。
  • 示例查詢：
    • “此頁面是否存在可訪問性問題？”
    • “運行可訪問性審計。”
    • “檢查此頁面是否符合 WCAG 標準。”
• 性能審計 (runPerformanceAudit)：識別性能瓶頸和加載問題。
  • 示例查詢：
    • “為什麼此頁面加載如此緩慢？”
    • “檢查此頁面的性能。”
    • “運行性能審計。”
• SEO 審計 (runSEOAudit)：評估頁面針對搜索引擎的優化程度。
  • 示例查詢：
    • “如何改進此頁面的 SEO？”
    • “運行 SEO 審計。”
    • “檢查此頁面的 SEO。”
• 最佳實踐審計 (runBestPracticesAudit)：檢查 Web 開發中的一般最佳實踐。
  • 示例查詢：
    • “運行最佳實踐審計。”
    • “檢查此頁面的最佳實踐。”
    • “此頁面是否存在最佳實踐問題？”
• 審計模式 (runAuditMode)：按特定順序運行所有審計。如果檢測到 NextJS 框架，將運行 NextJS 審計。
  • 示例查詢：
    • “運行審計模式。”
    • “進入審計模式。”
• NextJS 審計 (runNextJSAudit)：檢查 NextJS 應用程序的最佳實踐和 SEO 改進。
  • 示例查詢：
    • “運行 NextJS 審計。”
    • “運行 NextJS 審計，我使用的是應用路由器。”
    • “運行 NextJS 審計，我使用的是頁面路由器。”
• 調試器模式 (runDebuggerMode)：按特定順序運行所有調試工具。
  • 示例查詢：
    • “進入調試器模式。”

📚 詳細文檔

架構

該系統有三個核心組件，用於捕獲和分析瀏覽器數據：

1. Chrome 擴展：捕獲屏幕截圖、控制檯日誌、網絡活動和 DOM 元素。
2. Node 服務器：作為 Chrome 擴展和任何 MCP 服務器實例之間的中間服務器，促進通信。
3. MCP 服務器：一個模型上下文協議服務器，為 AI 客戶端提供與瀏覽器交互的標準化工具。

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    │
│  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  │
│   Cursor)   │     │   Handler)   │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

模型上下文協議（MCP）是 Anthropic AI 模型支持的一項功能，允許你為任何兼容的客戶端創建自定義工具。像 Claude Desktop、Cursor、Cline 或 Zed 這樣的 MCP 客戶端可以運行一個 MCP 服務器，該服務器“教會”這些客戶端使用新工具。

這些工具可以調用外部 API，但在我們的案例中，所有日誌都存儲在本地，絕不會發送到任何第三方服務或 API。BrowserTools MCP 運行一個本地的 NodeJS API 服務器，該服務器與 BrowserTools Chrome 擴展進行通信。

所有使用 BrowserTools MCP 服務器的用戶都通過相同的 NodeJS API 和 Chrome 擴展進行交互。

Chrome 擴展

• 監控 XHR 請求/響應和控制檯日誌
• 跟蹤選定的 DOM 元素
• 將所有日誌和當前元素髮送到 BrowserTools 連接器
• 連接到 WebSocket 服務器以捕獲/發送屏幕截圖
• 允許用戶配置令牌/截斷限制和屏幕截圖文件夾路徑

Node 服務器

• 作為 Chrome 擴展和 MCP 服務器之間的中間件
• 從 Chrome 擴展接收日誌和當前選定的元素
• 處理 MCP 服務器的請求，以捕獲日誌、屏幕截圖或當前元素
• 向 Chrome 擴展發送 WebSocket 命令以捕獲屏幕截圖
• 智能截斷日誌中的字符串和重複對象數量，以避免令牌限制
• 移除 cookie 和敏感標頭，以避免發送到 MCP 客戶端的大語言模型

MCP 服務器

• 實現模型上下文協議
• 為 AI 客戶端提供標準化工具
• 與各種 MCP 客戶端（如 Cursor、Cline、Zed、Claude Desktop 等）兼容

使用方法

安裝並配置完成後，該系統允許任何兼容的 MCP 客戶端：

• 監控瀏覽器控制檯輸出
• 捕獲網絡流量
• 截取屏幕截圖
• 分析選定元素
• 清除存儲在 MCP 服務器中的日誌
• 運行可訪問性、性能、SEO 和最佳實踐審計

兼容性

• 可與任何兼容 MCP 的客戶端配合使用
• 主要設計用於與 Cursor IDE 集成
• 支持其他 AI 編輯器和 MCP 客戶端