JinDaGe - Chrome Browser Control MCP Details

article

README

🚀 Chrome MCP 服务器

Chrome MCP 服务器是一个基于模型上下文协议（MCP）的工具，借助 Chrome 调试工具协议（CDP），可对 Chrome 浏览器实例进行精细控制。

🚀 快速开始

要使用 Chrome MCP 服务器，您需要满足以下先决条件并完成安装步骤：

先决条件

Bun（推荐）或 Node.js（v14 或更高版本）
启用远程调试功能的 Chrome 浏览器

安装步骤

安装 Bun

安装 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

启动 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

安装依赖项：

bun install

启动服务器：

bun start

使用热重载进行开发：

bun dev

服务器将默认在 3000 端口启动。您可以通过设置PORT环境变量来更改端口。

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

要在 Roo Code 中使用此 Chrome MCP 服务器，请按照以下步骤操作：

打开 Roo Code 设置。
导航到 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
在mcpServers对象中添加以下配置：

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

保存文件并重新启动 Roo Code 以应用更改。
您现在可以在 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

此命令将启用热重载功能，方便您在开发过程中实时更新代码。

Chrome Browser Control