Chrome Tools

🚀 Chrome 工具 MCP 服務器

Chrome 工具 MCP 服務器是一個可通過 Chrome 的 DevTools 協議進行交互的工具。藉助該服務器，你能夠遠程控制 Chrome 標籤頁，實現執行 JavaScript、截取屏幕截圖、監控網絡流量等操作。

🚀 快速開始

Chrome 工具 MCP 服務器允許你藉助 Chrome 的 DevTools 協議與 Chrome 進行交互。它可以實現遠程控制 Chrome 標籤頁，執行 JavaScript 代碼、截取屏幕截圖、監控網絡流量等功能。

✨ 主要特性

• 列出 Chrome 標籤頁
• 在標籤頁中執行 JavaScript
• 截取屏幕截圖
• 監控網絡流量
• 將標籤頁導航到 URL
• 查詢 DOM 元素
• 單擊元素並捕獲控制檯輸出

📦 安裝指南

安裝依賴

npm install @nicholmikey/chrome-tools

配置環境變量

通過 MCP 設置中的環境變量進行配置：

{
  "chrome-tools": {
    "command": "node",
    "args": ["path/to/chrome-tools/dist/index.js"],
    "env": {
      "CHROME_DEBUG_URL": "http://localhost:9222",
      "CHROME_CONNECTION_TYPE": "direct",
      "CHROME_ERROR_HELP": "custom error message"
    }
  }
}

環境變量說明

不同環境安裝說明

本地環境

1. 打開終端並運行以下命令：

   npm install @nicholmikey/chrome-tools
   

2. 在項目目錄中創建一個配置文件 config.json，並在其中添加以下內容：

   {
     "chrome-tools": {
       "command": "node",
       "args": ["path/to/chrome-tools/dist/index.js"],
       "env": {
         "CHROME_DEBUG_URL": "http://localhost:9222"
       }
     }
   }
   

3. 啟動服務器：

   node index.js
   

WSL 環境

1. 在 WSL 中安裝 Node.js 和 npm。
2. 安裝 chrome - tools 包：

   npm install @nicholmikey/chrome-tools
   

3. 創建配置文件並啟動服務器，與本地環境相同。

Docker 環境

1. 創建一個 Dockerfile，內容如下：

   FROM node:latest
   WORKDIR /app
   COPY package.json .
   RUN npm install
   COPY . .
   CMD ["node", "index.js"]
   

2. 構建 Docker 鏡像：

   docker build -t chrome-tools .
   

3. 運行容器：

   docker run --name chrome-tools-container -p 9222:9222 chrome-tools
   

💻 使用示例

基礎用法

以下是一些常用操作的代碼示例：

列出標籤頁

listTabs()

執行腳本

executeScript(tabId, script)

截取屏幕截圖

captureScreenshot(tabId)

監控網絡流量

monitorNetworkTraffic(tabId, duration, filters)

導航到 URL

navigateToUrl(tabId, url)

查詢 DOM 元素

querySelectorElements(tabId, selector)

單擊元素

clickElement(tabId, selector)

📄 許可證

本項目採用 MIT 許可證。