chrome-mcp-server

🚀 Chrome 浏览器 MCP 协议开发指南

本开发指南聚焦 Chrome 浏览器 MCP 协议开发，提供安装、使用、问题解决等多方面指导，助力开发者高效运用该协议进行开发。

🚀 快速开始

安装步骤

1. 确保安装最新版本的 Node.js（版本 14+）。
2. 克隆此代码仓库到本地。
3. 执行命令 npm install 安装依赖项。
4. 启动服务器：使用 npm start 或直接运行 node src/index.js。

✨ 主要特性

核心功能

• 日志收集：从浏览器控制台获取实时日志输出。
• 网络数据监控：捕获页面的网络请求和响应信息。
• 元素操作：获取当前选中元素的信息及其上下文。
• 截图功能：支持全屏截图或指定区域截图。

可用工具

• getConsoleLogs：获取控制台日志。
• getConsoleErrors：获取控制台错误信息。
• getNetworkErrorLogs：获取网络请求失败的日志。
• getNetworkSuccessLogs：获取网络请求成功的日志。
• takeScreenshot：截取页面 screenshot。
• getSelectedElement：获取当前选中元素的信息。
• wipeLogs：清除所有存储的日志数据。

📦 安装指南

1. 确保安装最新版本的 Node.js（版本 14+）。
2. 克隆此代码仓库到本地。
3. 执行命令 npm install 安装依赖项。
4. 启动服务器：使用 npm start 或直接运行 node src/index.js。

💻 使用示例

基础用法

在 Chrome 浏览器中使用该开发工具，按照以下步骤操作：

1. 在 Chrome 浏览器中安装支持 MCP 协议的开发工具扩展。
2. 启动本地服务器，默认监听 3000 端口。
3. 开发工具通过 HTTP 请求与服务器交互。
4. Claude AI 插件通过 MCP 接口获取所需数据。

📚 详细文档

使用流程

1. 在 Chrome 浏览器中安装支持 MCP 协议的开发工具扩展。
2. 启动本地服务器，默认监听 3000 端口。
3. 开发工具通过 HTTP 请求与服务器交互。
4. Claude AI 插件通过 MCP 接口获取所需数据。

常见问题解答

问题：启动服务器时提示 "端口已被占用"

• 解决方案：
  • 检查是否有其他进程占用 3000 端口。
  • 可以通过设置环境变量 PORT=自定义端口 来指定新端口。

  # Windows
  set PORT=3001 && node src/index.js
  
  # Mac/Linux
  PORT=3001 node src/index.js
  

问题：服务器启动后无响应

• 排查步骤：
  1. 检查网络配置，确保防火墙未阻挡该端口。
  2. 查看控制台输出，获取详细的错误信息。
  3. 确保 Node.js 版本符合要求（14+）。

安全注意事项

• 仅在受信任的本地网络中使用此服务器。
• 不要将此服务暴露到互联网上。
• 定期更新安全配置和依赖项。

附加说明

• 支持 CORS 配置，允许指定域访问 API。
• 提供详细的日志记录功能，便于调试和分析。
• 可扩展的插件架构，支持更多自定义功能。