Chrome MCP Server

Chrome MCP Server

一个可与 Chrome DevTools 扩展集成的 Node.js 服务，为 Cursor AI 提供调试和监控功能。

功能

此服务充当 Chrome DevTools 扩展与 Cursor AI 之间的桥梁，支持：

• 捕获控制台日志
• 捕获控制台错误
• 监控网络请求（成功和错误）
• 捕获屏幕截图
• 检查选中的元素
• 清除日志

安装和使用

有多种方式可以运行此服务：

选项 1：直接从 GitHub 运行

# Windows
cmd /c npx github:adejaimejr/chrome-mcp-server

# Linux/Mac
npx github:adejaimejr/chrome-mcp-server

选项 2：全局安装

# Instalar globalmente
npm install -g github:adejaimejr/chrome-mcp-server

# Executar
chrome-mcp-server

选项 3：发布到 npm

如果你更喜欢使用 npx @scope/package 命令格式，可以将此软件包发布到 npm：

要发布无作用域的软件包：

npm login
npm publish

之后即可使用：npx chrome-mcp-server

要发布带作用域的软件包：

# Modifique o nome no package.json para "@adejaimejr/chrome-mcp-server"
npm publish --access public

之后即可使用：npx @adejaimejr/chrome-mcp-server

在 Cursor 中配置

在 Cursor 中配置 MCP 服务：

1. 打开 Cursor
2. 前往“设置”（齿轮图标）
3. 导航到“扩展” > “MCP”
4. 使用以下命令添加新的 MCP 服务：

# Windows
cmd /c npx github:adejaimejr/chrome-mcp-server

# Linux/Mac
npx github:adejaimejr/chrome-mcp-server

注意：从最新版本开始，不再需要 --mcp 参数，因为服务现在会自动检测是否由 Cursor 启动。

本地安装的具体解决方案

如果你的计算机上已有代码（例如位于路径 C:\Users\Adejaime\Desktop\2025-dev\chrome-mcp-server），请使用可执行文件的直接路径：

node C:\Users\Adejaime\Desktop\2025-dev\chrome-mcp-server\dist\mcp-server.js

重要提示：在 Windows 中，路径可以使用反斜杠（\）或正斜杠（/）。

本地安装分步指南

如果你更愿意克隆代码仓库并在本地使用：

# 1. Clone o repositório
git clone https://github.com/adejaimejr/chrome-mcp-server.git

# 2. Entre no diretório
cd chrome-mcp-server

# 3. Instale as dependências
npm install

# 4. Construa o executável
npm run build

# 5. Configure o Cursor com o caminho absoluto para o arquivo mcp-server.js
# Exemplo no Windows:
# node C:\caminho\completo\para\chrome-mcp-server\dist\mcp-server.js

# Exemplo no Linux/Mac:
# node /caminho/completo/para/chrome-mcp-server/dist/mcp-server.js

最新版本 (v1.2.0) 的新功能

1. JSON 格式输出的彻底解决方案

在 1.2.0 版本中，我们实施了一项彻底的解决方案，以绝对确保服务的所有输出都是有效的 JSON 格式，从根本上解决 Unexpected token 'A', "Aguardando"... is not valid JSON 错误。

此解决方案：

• 在尽可能底层拦截 stdout 和 stderr 输出流
• 确保所有输出（包括应用启动前生成的日志）都是 JSON 格式
• 自动将任何非 JSON 输出转换为有效的 JSON 格式
• 使服务不可能输出非 JSON 格式的内容

2. 自动端口处理

服务现在会自动检测默认端口（3000）是否被占用，并尝试其他端口（3001、3002 等），直到找到可用端口。这解决了其他服务已在使用 3000 端口时可能出现的 EADDRINUSE: address already in use 错误。

优点：

• 无需停止其他正在使用 3000 端口的服务
• 服务会自动告知 Cursor 当前使用的端口
• 放弃前最多尝试 10 个不同的端口

3. 兼容 Windows 的构建脚本

构建脚本现在兼容 Windows 和 Linux/Mac，使用 ES6 模块创建目录并复制文件，而不是使用特定于操作系统的命令。这解决了在 Windows 中运行 npm run build 时出现的 mkdir -p 错误。

故障排除

错误：“无法解析 JSON 响应”或“Unexpected token... is not valid JSON”

此错误应该已在 1.2.0 版本中彻底解决。如果仍然遇到此错误：

1. 确保使用的是 1.2.0 或更高版本
2. 使用 git pull 更新本地代码仓库，并使用 npm run build 重新构建
3. 检查 mcp-server.js 文件的路径是否正确

错误：“EADDRINUSE: address already in use”

当端口 3000 已被其他进程占用时，会出现此错误。新版服务器会自动尝试备用端口来解决此问题。

如果仍然遇到问题：

1. 检查是否正在使用最新版本的服务器
2. 尝试手动结束占用端口 3000 的进程
3. 使用环境变量 PORT 设置指定端口：

   # Windows
   set PORT=3001 && node C:\caminho\para\mcp-server.js
   
   # Linux/Mac
   PORT=3001 node /caminho/para/mcp-server.js
   

Windows 上的“mkdir -p”或“chmod +x”错误

如果在 Windows 上运行 npm run build 时遇到与 Unix 命令相关的错误：

1. 确保使用的是包含 Windows 兼容构建脚本的最新版本仓库
2. 运行 git pull 获取最新更新
3. 如果问题仍然存在，可以手动创建文件：
   • 将 src/index.js 的内容复制到新文件 dist/mcp-server.js
   • 在文件开头添加 #!/usr/bin/env node

错误：“require is not defined in ES module scope”

如果运行 npm run build 时遇到此错误：

1. 确保使用的是最新版本仓库，该版本的构建脚本使用 ES6 模块语法
2. 运行 git pull 获取最新更新
3. 如果问题仍然存在，可以手动创建文件：

   # 1. Crie a pasta dist se não existir
   mkdir -p dist
   
   # 2. Copie o arquivo src/index.js para dist/mcp-server.js
   # No Windows:
   copy src\index.js dist\mcp-server.js
   
   # No Linux/Mac:
   cp src/index.js dist/mcp-server.js
   
   # 3. Edite o arquivo dist/mcp-server.js e adicione #!/usr/bin/env node no início
   

工作原理

1. Chrome DevTools 扩展收集浏览器信息
2. 扩展将这些数据发送到本地 MCP 服务
3. 服务存储数据，并通过 RESTful API 提供数据
4. Cursor 中的 Claude AI 通过 MCP 工具访问这些数据

可用的 MCP 工具

• getConsoleLogs：获取控制台日志
• getConsoleErrors：获取控制台错误
• getNetworkErrorLogs：获取网络错误日志
• getNetworkSuccessLogs：获取网络成功日志
• takeScreenshot：捕获页面截图
• getSelectedElement：获取所选元素的信息
• wipeLogs：清除所有存储的日志

要求

• Node.js 14+
• Chrome 88+
• 支持 MCP 的 Cursor

安全说明

此服务仅供开发期间本地使用。请勿在没有额外安全措施的情况下将此服务暴露到公共互联网。