MCP 配置

# Claude Code
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

# Gemini CLI

# 编辑Gemini设置文件
   nano ~/.gemini/settings.json
   # 或者使用你喜欢的编辑器
   code ~/.gemini/settings.json

# 添加Chrome DevTools MCP配置：在 settings.json 文件中添加以下配置：

{
     "mcpServers": {
       "chrome-devtools": {
         "command": "npx",
         "args": ["chrome-devtools-mcp@latest"]
       }
     }
   }


 # 带参数的高级配置

 {
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

#验证配置，输入：Check the performance of <https://developers.chrome.com>

在wsl中使用codex时如何连接chrome

问题分析:

• 网络隔离：Windows 10 的 WSL2 采用 NAT 模式，127.0.0.1 在两个系统中不互通。
• 安全保护：Chrome 默认开启 Host Header Check，拒绝来自非本地（如 WSL 虚拟网段 172.x.x.x）的调试请求。
• 代理冲突：开发者常用的 7890 等代理端口会拦截调试流量，导致 Empty reply。

获取宿主机ip

#
HOST_IP=$(ip route | awk '/default/ {print $3}'); echo $HOST_IP; curl -v "http://$HOST_IP:90/"

方案一：跨系统 SSH 隧道法 (推荐：资源占用低)

此方法通过 SSH 建立一个“加密管道”，将 WSL2 内部的请求伪装成 Windows 本地发起，从而欺骗 Chrome 的安全检查。

1.1 Windows 环境准备 (管理员 PowerShell)

安装并启动 SSH 服务：

# 安装 OpenSSH Server
Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
# 启动服务并设为自启
Start-Service sshd
Set-Service -Name sshd -StartupType 'Automatic'

彻底清理残留进程：

taskkill /F /IM chrome.exe

启动调试版 Chrome：

& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
--remote-debugging-port=9333 `
--remote-debugging-address=127.0.0.1 `
--remote-allow-origins=* `
--user-data-dir="D:\chrome_mcp_profile"

1.2 WSL2 隧道建立 (WSL 终端)

获取宿主机 IP：

# 通常是 nameserver 后面的地址
grep nameserver /etc/resolv.conf | awk '{print $2}'

建立持久隧道：

# -L 端口映射, -N 仅建立隧道不打开shell
ssh -L 9333:127.0.0.1:9333 [Windows用户名]@[宿主机IP] -N

# ssh -L 9333:127.0.0.1:9333 [Windows用户名]@[宿主机IP] -N

1.3 连通性校验

curl -v http://127.0.0.1:9333/json/version

启动顺序: ==先启动 Chrome (9333)，再启动 SSH 隧道，最后启动 Codex/Cursor。==

方案二：WSL2 本地化部署法 (推荐：最稳健、支持脚本调试)

通过在 WSL2 内部安装 Linux 版 Chrome，彻底消除系统间障碍，且通过参数完美兼容 Manifest V2。

2.1 安装 Chrome (WSL 终端)

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt update && sudo apt install ./google-chrome-stable_current_amd64.deb -y

2.2 配置启动命令（推荐：函数 + alias，更稳健）

说明：bash 函数名不能包含 -，因此用 mcp_chrome（下划线），再用 alias 暴露 mcp-chrome（连字符）这个命令名。

同时建议使用独立 Profile（ChromeDataMCP），避免复用旧 Profile 中的代理/PAC/扩展配置导致 ERR_TIMED_OUT。

将以下代码加入 ~/.bashrc（或 ~/.zshrc）末尾，然后 source ~/.bashrc 使其生效：

mcp_chrome () {
  # 关键：清理代理环境变量，避免 Chrome 因环境变量间接走代理（WSL 里很常见）
  env -u http_proxy -u https_proxy -u all_proxy -u HTTP_PROXY -u HTTPS_PROXY -u ALL_PROXY \
  google-chrome \
    --remote-debugging-port=9222 \
    --acceptInsecureCerts=true \
    --user-data-dir="$HOME/ChromeDataMCP" \
    --no-first-run \
    --no-default-browser-check \
    --proxy-bypass-list="172.21.224.1,localhost,127.0.0.1,<local>,<-loopback>" \
    --enable-features=AllowLegacyMV2Extensions \
    --disable-features=ExtensionManifestV2Unsupported,ExtensionManifestV2Disabled,ExtensionsManifestV3Only \
    "$@"
}

# 对外保持命令名习惯：mcp-chrome
alias mcp-chrome='mcp_chrome'

• 参数详解（补充版）
  • --remote-debugging-port=9222：开启 CDP 调试端口，供 chrome-devtools-mcp 连接。
  • --acceptInsecureCerts=true：忽略证书错误，便于本地 https/自签名场景调试（生产不建议）。
  • --user-data-dir="$HOME/ChromeDataMCP"：独立 Profile，避免污染日常浏览器数据，也避免旧 Profile 的代理/PAC/扩展影响调试。
  • --proxy-bypass-list="172.21.224.1,localhost,127.0.0.1,<local>,<-loopback>"：对宿主机与本地地址强制直连（建议用英文逗号分隔）。
  • env -u http_proxy ...：显式移除代理环境变量，防止 “WSL 里 curl 直连能通，但 Chrome 因代理配置超时”。
  • --enable-features=AllowLegacyMV2Extensions + --disable-features=...V2...：MV2 兼容参数（按需保留）。

2.3 启动前检查（避免参数不生效）

Chrome 在 Linux 上有“单实例”行为：如果旧的 Chrome 主进程还在跑，再次执行 google-chrome ... 往往只是把请求转交给旧进程，新参数（例如 --user-data-dir、--proxy-bypass-list）不会生效。

建议启动前先彻底退出旧进程：

pkill -f "/opt/google/chrome/chrome" 2>/dev/null || true

启动后建议验证一次参数是否真正生效：

• 打开 chrome://version
• 确认 Command Line 里包含 --proxy-bypass-list=...（或你手动加的 --no-proxy-server）
• 确认 Profile Path 位于 .../ChromeDataMCP/...（而不是旧的 ChromeData）

2.4 启动与 MCP 接入

1. 启动：输入 mcp-chrome（窗口不要关闭）
2. MCP 配置（TOML）：

[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest", "--browserUrl=http://127.0.0.1:9222"]

3. 去另外一个 WSL 终端启动 Codex，并通过 MCP 控制该 Chrome。

2.5 访问宿主机服务（例如 90 端口）

如果 WSL 里 curl --noproxy '*' http://172.21.224.1:90/ 能通，但 Chrome 访问 http://172.21.224.1:90/ 超时，优先按以下顺序排查：

1. chrome://version 是否真的带上了 --proxy-bypass-list 且 Profile 是 ChromeDataMCP
2. 用 mcp-chrome --no-proxy-server 强制直连验证是否为代理问题
3. Windows 侧确认服务是否允许从 WSL 网段访问（监听地址/防火墙规则）