Cursor Browser Tools MCP

🚀 BrowserTools MCP

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

🚀 快速開始

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

🗺️ 路線圖

查看我們的項目路線圖：Github 路線圖 / 項目看板

🆕 更新內容

v1.2.0 版本發佈啦！以下是本次更新的簡要介紹：

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

請確保在你的 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 問題
• 檢查是否遵循網頁開發最佳實踐
• 審查 NextJS 特定的 SEO 問題

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

🔑 主要新增功能

🛠️ 使用審計工具

✅ 開始之前

確保你具備以下條件：

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

▶️ 運行審計

無頭瀏覽器自動化

Puppeteer 自動化一個無頭 Chrome 實例來加載頁面並收集審計數據，即使對於單頁應用程序或通過 JavaScript 加載的內容，也能確保獲得準確的結果。

無頭瀏覽器實例在最後一次審計調用後保持活動狀態 60 秒，以便有效地處理連續的審計請求。

結構化結果

每次審計都以結構化的 JSON 格式返回結果，包括總體得分和詳細的問題列表。這使得與 MCP 兼容的客戶端能夠輕鬆解釋結果並提供可行的見解。

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

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

🏗️ 架構

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

1. Chrome 擴展程序：監控 XHR 請求/響應、控制檯日誌、網絡活動和 DOM 元素。
2. 節點服務器：作為 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 服務器以捕獲/發送截圖
• 允許用戶配置令牌/截斷限制和截圖文件夾路徑

節點服務器

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

MCP 服務器

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

📦 安裝指南

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

• BrowserTools MCP 文檔

💻 使用示例

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

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

🛠️ 兼容性

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