Chrome Tools

浏览器官方认证本地 TypeScript

🚀 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"
}
}
}

环境变量说明

属性	详情
`CHROME_DEBUG_URL`	Chrome 远程调试接口的 URL（默认：http://localhost:9222）
`CHROME_CONNECTION_TYPE`	日志中的连接类型标识符（例如，"direct"、"ssh - tunnel"、"docker"）
`CHROME_ERROR_HELP`	连接失败时显示的错误消息

不同环境安装说明

本地环境

打开终端并运行以下命令：
```
npm install @nicholmikey/chrome-tools
```

在项目目录中创建一个配置文件 config.json，并在其中添加以下内容：

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

启动服务器：
```
node index.js
```

WSL 环境

在 WSL 中安装 Node.js 和 npm。
安装 chrome - tools 包：
```
npm install @nicholmikey/chrome-tools
```
创建配置文件并启动服务器，与本地环境相同。

Docker 环境

创建一个 Dockerfile，内容如下：

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

构建 Docker 镜像：
```
docker build -t chrome-tools .
```

运行容器：

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 许可证。

0 条评论
分类：浏览器