Chrome MCP Server

🚀 Chrome 瀏覽器 MCP 協議開發指南

本開發指南聚焦 Chrome 瀏覽器 MCP 協議開發，提供安裝、使用、問題解決等多方面指導，助力開發者高效運用該協議進行開發。

🚀 快速開始

安裝步驟

1. 確保安裝最新版本的 Node.js（版本 14+）。
2. 克隆此代碼倉庫到本地。
3. 執行命令 npm install 安裝依賴項。
4. 啟動服務器：使用 npm start 或直接運行 node src/index.js。

✨ 主要特性

核心功能

• 日誌收集：從瀏覽器控制檯獲取即時日誌輸出。
• 網絡數據監控：捕獲頁面的網絡請求和響應信息。
• 元素操作：獲取當前選中元素的信息及其上下文。
• 截圖功能：支持全屏截圖或指定區域截圖。

可用工具

• getConsoleLogs：獲取控制檯日誌。
• getConsoleErrors：獲取控制檯錯誤信息。
• getNetworkErrorLogs：獲取網絡請求失敗的日誌。
• getNetworkSuccessLogs：獲取網絡請求成功的日誌。
• takeScreenshot：截取頁面 screenshot。
• getSelectedElement：獲取當前選中元素的信息。
• wipeLogs：清除所有存儲的日誌數據。

📦 安裝指南

1. 確保安裝最新版本的 Node.js（版本 14+）。
2. 克隆此代碼倉庫到本地。
3. 執行命令 npm install 安裝依賴項。
4. 啟動服務器：使用 npm start 或直接運行 node src/index.js。

💻 使用示例

基礎用法

在 Chrome 瀏覽器中使用該開發工具，按照以下步驟操作：

1. 在 Chrome 瀏覽器中安裝支持 MCP 協議的開發工具擴展。
2. 啟動本地服務器，默認監聽 3000 端口。
3. 開發工具通過 HTTP 請求與服務器交互。
4. Claude AI 插件通過 MCP 接口獲取所需數據。

📚 詳細文檔

使用流程

1. 在 Chrome 瀏覽器中安裝支持 MCP 協議的開發工具擴展。
2. 啟動本地服務器，默認監聽 3000 端口。
3. 開發工具通過 HTTP 請求與服務器交互。
4. Claude AI 插件通過 MCP 接口獲取所需數據。

常見問題解答

問題：啟動服務器時提示 "端口已被佔用"

• 解決方案：
  • 檢查是否有其他進程佔用 3000 端口。
  • 可以通過設置環境變量 PORT=自定義端口 來指定新端口。

  # Windows
  set PORT=3001 && node src/index.js
  
  # Mac/Linux
  PORT=3001 node src/index.js
  

問題：服務器啟動後無響應

• 排查步驟：
  1. 檢查網絡配置，確保防火牆未阻擋該端口。
  2. 查看控制檯輸出，獲取詳細的錯誤信息。
  3. 確保 Node.js 版本符合要求（14+）。

安全注意事項

• 僅在受信任的本地網絡中使用此服務器。
• 不要將此服務暴露到互聯網上。
• 定期更新安全配置和依賴項。

附加說明

• 支持 CORS 配置，允許指定域訪問 API。
• 提供詳細的日誌記錄功能，便於調試和分析。
• 可擴展的插件架構，支持更多自定義功能。