Chrome MCP

Chrome MCP服务器

一种模型上下文协议（MCP）服务器，通过Chrome DevTools协议（CDP）提供对Chrome浏览器实例的细粒度控制。

先决条件

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

设置

安装Bun

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

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

# Windows (using PowerShell)
powershell -c "irm bun.sh/install.ps1 | iex"

# Alternatively, using npm
npm install -g bun

1. 在启用远程调试的情况下启动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

1. 安装依赖项：

bun install

1. 启动服务器：

bun start

对于热重载开发：

bun dev

默认情况下，服务器将在端口3000上启动。您可以通过设置 PORT 环境变量。

配置Roo代码以使用此MCP服务器

要将此Chrome MCP服务器与Roo代码一起使用：

1. 打开Roo代码设置

1. 导航到MCP设置配置文件：

- macOS： ~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json - 窗户： %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

1. 将以下配置添加到 mcpServers 对象：

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

1. 保存文件并重新启动Roo Code以应用更改。

1. 现在，您可以使用Roo Code中的Chrome MCP工具来控制浏览器。

可用工具

服务器提供以下浏览器控制工具：

导航

导航到特定的URL。

参数：

• url （string）：要导航到的URL

点击

单击特定坐标。

参数：

• x （数字）：X坐标
• y （数字）：Y坐标

类型

在当前焦点处键入文本。

参数：

• text （string）：要键入的文本

双击

在页面信息中按索引单击元素。

参数：

• selector （string）：元素索引（例如，第一个元素为“0”）

getText

使用CSS选择器获取元素的文本内容。

参数：

• selector （string）：用于查找元素的CSS选择器

getPageInfo

获取页面的语义信息，包括交互元素和文本节点。

getPageState

获取当前页面状态，包括URL、标题、滚动位置和视口大小。

用法

服务器使用SSE传输实现模型上下文协议。连接到服务器：

• SSE 端点 ： http://localhost:3000/sse
• 消息端点： http://localhost:3000/message?sessionId=...

当与Roo Code一起使用时，MCP设置文件中的配置将自动处理连接。

发展

要在热重新加载的开发模式下运行服务器，请执行以下操作：

bun dev

这使用Bun的内置监视模式在文件更改时自动重新启动服务器。

许可证

麻省理工学院