AI导哈

Chrome代理服务器

一个代理MCP服务器，用于桥接WSL和Windows Chrome DevTools，使WSL中的Claude Code CLI能够控制运行在Windows上的Chrome。

  • by USCGVet
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 USCGVet/MCP-PROXY

使用说明

MCP Chrome代理服务器

一个代理MCP服务器，连接WSL和Windows Chrome DevTools，使WSL中的Claude Code CLI能够控制在Windows上运行的Chrome。

问题解决了

Chrome的DevTools协议只接受来自 localhost （127.0.0.1）出于安全原因。在WSL（Linux的Windows子系统）中运行Claude Code CLI时，您无法直接连接到在Windows上运行的Chrome localhost:9222 因为WSL的网络是隔离的。

此代理服务器通过以下方式解决了问题：

  1. 在Windows上运行（可以访问Chrome的 localhost:9222)
  2. 在上公开MCP服务器 0.0.0.0:3000 （可从WSL访问）
  3. 在WSL和Windows Chrome之间转发所有Chrome DevTools工具调用

建筑

WSL Ubuntu                 Windows 11
┌─────────────────┐       ┌──────────────────────────┐
│ Claude Code CLI │       │  MCP Proxy Server        │
│                 │──────▶│  (0.0.0.0:3000)          │
│ HTTP: 172.18... │       │         │                │
└─────────────────┘       │         ▼                │
                          │  chrome-devtools-mcp     │
                          │         │                │
                          │         ▼                │
                          │  Chrome (localhost:9222) │
                          └──────────────────────────┘

需求

  • Windows 11 WSL2
  • Node.js （v18或更高版本）安装在Windows上
  • 铬 在启用远程调试的Windows上运行
  • 克劳德代码CLI 在WSL中跑步

安装

1.安装依赖项

打开 PowerShell 或 命令提示符 在Windows上，导航到此目录：

cd C:\path\to\MCP-Proxy
npm install

2.通过远程调试启动Chrome

选项A：使用PowerShell启动器 （推荐）

右击 start-chrome.ps1 然后选择“使用PowerShell运行”，或从PowerShell运行：

.\start-chrome.ps1

选项B：手动启动

& "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="$env:TEMP\chrome-profile-mcp"

验证Chrome是否正在运行：

netstat -ano | findstr ":9222"

您应该看到Chrome正在侦听端口9222。

3.启动代理服务器

选项A：使用启动器脚本 （推荐）

start.bat

选项B：使用npm

npm start

选项C：手动启动

npm run build
node dist/server.js

您应该看到：

============================================================
MCP Chrome Proxy Server Started
============================================================
[Server] Listening on: http://0.0.0.0:3000
[Server] SSE Endpoint: http://0.0.0.0:3000/mcp
[Server] Health Check: http://0.0.0.0:3000/health
[Chrome] Connecting to: http://localhost:9222
============================================================

[Info] To configure Claude Code from WSL, run:
  claude mcp add --transport http chrome-proxy http://<WSL_HOST_IP>:3000/mcp

[Ready] Waiting for connections...

4.在WSL中配置Claude代码

在WSL终端中，将代理服务器添加为MCP服务器：

claude mcp add --transport http chrome-proxy http://<WSL_HOST_IP>:3000/mcp

注： 替换 <WSL_HOST_IP> 使用WSL2的Windows主机IP。要从WSL查找您的Windows IP，请使用：

cat /etc/resolv.conf | grep nameserver | awk '{print $2}'

5.验证连接

从WSL测试运行状况端点：

curl http://<WSL_HOST_IP>:3000/health

替换 <WSL_HOST_IP> 使用上面的命令找到IP（通常类似于 172.x.x.1).

您应该看到：

{"status":"ok","chrome_url":"http://localhost:9222"}

用法

配置后，您可以在WSL的Claude Code CLI中使用Chrome DevTools命令：

> Navigate to youtube

> Take a screenshot

> Click on the search box

> Fill the search box with "MCP servers"

> List all pages

可用的Chrome DevTools工具

该代理公开了以下所有26个工具 chrome-devtools-mcp:

导航

  • navigate_page -导航到URL、后退、前进或重新加载
  • new_page -打开新的浏览器选项卡
  • close_page -关闭浏览器选项卡
  • list_pages -列出所有打开的选项卡
  • select_page -切换到特定选项卡
  • wait_for -等待文本出现在页面上

输入自动化

  • click -点击一个元素
  • drag -拖放元素
  • fill -填写输入字段
  • fill_form -一次填写多个表单字段
  • handle_dialog -处理浏览器对话框（警报、确认）
  • hover -将鼠标悬停在元素上
  • press_key -按键盘键
  • upload_file -通过文件输入上传文件

检查与调试

  • take_snapshot -拍摄页面的文本快照
  • take_screenshot -截图
  • evaluate_script -在页面中运行JavaScript
  • list_console_messages -列出控制台消息
  • get_console_message -获取特定的控制台消息
  • list_network_requests -列出网络请求
  • get_network_request -获取网络请求的详细信息

仿真与性能

  • emulate -模拟移动设备、网络条件
  • resize_page -调整浏览器窗口大小
  • performance_start_trace -开始性能分析
  • performance_stop_trace -停止性能分析
  • performance_analyze_insight -分析绩效洞察

配置

环境变量

您可以使用环境变量自定义代理服务器：

  • PORT -服务器端口（默认值： 3000)
  • HOST -绑定地址（默认值： 0.0.0.0)
  • CHROME_URL -Chrome DevTools URL（默认值： http://localhost:9222)

例子：

set PORT=8080
set CHROME_URL=http://localhost:9222
npm start

自定义Chrome端口

如果Chrome在其他端口上运行：

set CHROME_URL=http://localhost:9223
npm start

故障排除

Chrome连接问题

问题： [Chrome] Failed to connect

解决：

  1. 验证Chrome是否正在运行 --remote-debugging-port=9222:

    netstat -ano | findstr ":9222"

  2. 关闭所有Chrome实例，然后使用标记重新启动：

    taskkill /F /IM chrome.exe
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

  3. 尝试手动访问Chrome DevTools：

    • 打开浏览器并转到 http://localhost:9222/json
    • 您应该看到一个JSON页面列表

WSL连接问题

问题： 无法从WSL连接到Windows

解决：

  1. 从WSL查找您的Windows IP：

    cat /etc/resolv.conf | grep nameserver | awk '{print $2}'

  2. 测试连接性：

    curl http://<WINDOWS_IP>:3000/health

  3. 检查Windows防火墙：

    • 打开Windows Defender防火墙
    • 允许Node.js通过防火墙
    • 或暂时禁用防火墙进行测试

  4. 确保服务器已绑定到 0.0.0.0，不 127.0.0.1

间歇性连接故障

问题： claude mcp list 第一次成功，然后在后续尝试中失败

原因： 这是早期版本中的一个错误，在客户端断开连接后，MCP服务器实例仍处于初始化状态。

解决方案：

  • 已修复 当前版本（v1.1+）
  • 服务器现在会在SSE断开连接后自动重新创建会话
  • 您应该在日志中看到这一点： Cleaning up session after SSE disconnect
  • 每个新连接都会创建一个新的服务器实例

验证：

# Run multiple times - should all succeed
for i in {1..5}; do
  echo "Test $i:"
  claude mcp list
  sleep 1
done

所有尝试都应该显示 ✓ Connected

服务器日志显示“服务器已初始化”

问题： 日志中有关服务器初始化的错误消息

解决方案：

  • 更新到最新版本（v1.1+）
  • 添加了会话娱乐逻辑来解决此问题
  • 旧的解决方法：在连接之间重新启动服务器（v1.1+中不需要）

端口已在使用中

问题： [Error] Port 3000 is already in use!

解决：

  1. 查找使用端口的内容：

    netstat -ano | findstr ":3000"

  2. 终止进程或使用其他端口：

    set PORT=8080
npm start

未安装依赖项

问题： npm install 失败

解决：

  1. 清除npm缓存：

    npm cache clean --force

  2. 删除 node_modules 然后重试：

    rmdir /s /q node_modules
npm install

  3. 更新npm：

    npm install -g npm@latest

发展

项目结构

MCP-Proxy/
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
├── start-chrome.ps1      # Chrome launcher (PowerShell)
├── start.bat             # Proxy server launcher
├── README.md             # This file
├── src/
│   └── server.ts         # Main proxy server implementation
└── dist/                 # Compiled JavaScript (generated)
    └── server.js

建筑

npm run build

在发展中奔跑

npm run dev

代码概述

代理服务器(src/server.ts)由以下部分组成：

  1. ChromeProxyServer类

    • 管理MCP服务器实例
    • 生成物 chrome-devtools-mcp 作为子流程
    • 通过MCP客户端转发工具调用

  2. HTTP/SSE传输

    • 收听 0.0.0.0:3000
    • 暴露 /mcp SSE连接的端点
    • 提供 /health 状态检查的端点

  3. 请求转发

    • listTools() -返回可用的Chrome工具
    • callTool() -将工具执行转发到Chrome

安全考虑

  • 服务器绑定到 0.0.0.0 允许WSL连接
  • 仅接受来自受信任WSL实例的连接
  • Chrome DevTools通过仅限本地主机的绑定具有自己的安全性
  • 如果暴露在不受信任的网络中，请考虑添加身份验证

许可证

麻省理工学院

版本和更改日志

当前版本： 1.1.0

v1.1.0-会话管理稳定性

  • 修复了关键错误：“服务器已初始化”错误
  • 实现了SSE断开连接后的自动服务器重新创建
  • 添加了增强的日志记录，包括请求ID和生命周期跟踪
  • 改进了CORS标头以实现跨源兼容性
  • 长期会话的连接保持活动支持

v1.0.0-初始版本

  • Chrome DevTools的基本MCP HTTP代理
  • WSL Windows网络桥接
  • 支持26个Chrome DevTools工具

鸣谢

相关 MCP