Chrome Browser Control

🚀 Chrome MCP 服務器

Chrome MCP 服務器是一個基於模型上下文協議（MCP）的工具，藉助 Chrome 調試工具協議（CDP），可對 Chrome 瀏覽器實例進行精細控制。

🚀 快速開始

要使用 Chrome MCP 服務器，您需要滿足以下先決條件並完成安裝步驟：

先決條件

• Bun（推薦）或 Node.js（v14 或更高版本）
• 啟用遠程調試功能的 Chrome 瀏覽器

安裝步驟

安裝 Bun

1. 安裝 Bun（如果尚未安裝）：

# macOS、Linux 或 WSL
curl -fsSL https://bun.sh/install | bash

# Windows（使用 PowerShell）
powershell -c "irm bun.sh/install.ps1 | iex"

# 或者使用 npm
npm install -g bun

2. 啟動 Chrome 瀏覽器並啟用遠程調試功能：

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Windows
start chrome --remote-debugging-port=9222

# Linux
google-chrome --remote-debugging-port=9222

3. 安裝依賴項：

bun install

4. 啟動服務器：

bun start

使用熱重載進行開發：

bun dev

服務器將默認在 3000 端口啟動。您可以通過設置PORT環境變量來更改端口。

📦 配置 Roo Code 以使用此 MCP 服務器

要在 Roo Code 中使用此 Chrome MCP 服務器，請按照以下步驟操作：

1. 打開 Roo Code 設置。

2. 導航到 MCP 設置配置文件的位置：

   • macOS：~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json
   • Windows：%APPDATA%\Code\User\globalStorage\rooveterinaryinc.roo-cline\settings\cline_mcp_settings.json
   • Linux：~/.config/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json

3. 在mcpServers對象中添加以下配置：

{
  "mcpServers": {
    "chrome-control": {
      "url": "http://localhost:3000/sse",
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

4. 保存文件並重新啟動 Roo Code 以應用更改。
5. 您現在可以在 Roo Code 中使用 Chrome MCP 工具來控制瀏覽器。

✨ 可用工具

服務器提供了以下用於瀏覽器控制的工具：

navigate

導航到特定 URL。

• 參數：
  • url（字符串）：要導航到的 URL

click

在指定座標處點擊。

• 參數：
  • x（數字）：X 軸座標
  • y（數字）：Y 軸座標

type

在當前焦點輸入文本。

• 參數：
  • text（字符串）：要輸入的文本

clickElement

通過元素索引在頁面信息中點擊元素。

• 參數：
  • selector（字符串）：元素索引（例如，“0”表示第一個元素）

getText

使用 CSS 選擇器獲取元素的文本內容。

• 參數：
  • selector（字符串）：用於查找元素的 CSS 選擇器

getPageInfo

獲取頁面的語義信息，包括交互式元素和文本節點。

getPageState

獲取當前頁面狀態，包括 URL、標題和是否加載完成。

🔧 開發說明

使用 Bun 啟動開發模式：

bun dev

此命令將啟用熱重載功能，方便您在開發過程中即時更新代碼。