让任意 AI Harness 都有连接现有浏览器会话的能力

本文仅针对想让 AI 复用现有浏览器会话的情况，如果是一些批量自动化测试的场景，那完全可以用全新的浏览器环境，没必要走本文的过程。

本文在解决什么问题

让 AI 通过 mcp 用测试浏览器不难，但是痛点在于：

AI 自己开的 Chrome-for-Testing 这种测试浏览器是全新的环境，没法复用你当前正在使用的浏览器的 Cookie, Token 之类的。这常常会阻塞 AI 调试页面，就算给它账号，也会让 AI 多绕一个弯进行耗时的登陆过程。
很多时候你已经把页面打开到能复现问题的页面或者状态，很想让 AI 直接用这个状态调试、定位问题。

这种时候，就需要给 AI 直接操作你现有浏览器会话的能力，例如看到你打开了什么页面，并且对这些页面进行调试和操作。

除此之外，光是看到和截图还是不够，一些我更在意的关键能力如下：

能让 AI 点击按钮、填表、打开弹窗、检查页面内容。
能让 AI 直接对当前页面执行 JS。
能让 AI 抓取网页后台的请求和响应。
能让 AI 直接定位页面源码，甚至对 JS 源码打断点调试。

跟着本文做，能实现上面说的一切。除此之外，还能让 AI 直接用你喜欢的浏览器（比如我的 Dia 浏览器），而无需非得额外下载 Chrome。

怎么做

Codex / ClaudeCode

ChatGPT 有专门的浏览器扩展，下载好以后需要在 ChatGPT Desktop APP 的设置 - Browser 底部开启 Enable full CDP access。
这个功能是跟着 Codex Harness 的，而 ChatGPT APP 里的 Codex 又可以通过 API KEY 使用，所以自然也可以用这个功能了。
这本质就是让 ChatGPT APP 连接你的浏览器扩展来达成上面说的目的。而且其实内部就是使用了 Playwright MCP。

Claude 也有自己的浏览器扩展，但是截止撰写本文的时候，官方集成要求 Anthropic 的付费套餐，并且 Claude Code 必须通过 /login 登录。API Key 或 claude setup-token 生成的长期令牌会话不支持，即使加上 --chrome 也不会启用。，可见：

https://code.claude.com/docs/en/chrome

所以，Claude Code 的 API KEY 用户想实现本文的目标，就得往下看了。

其他 AI Harness

已经验证过的包括：

Grok CLI
OpenCode
Cursor
Zed

主要有两种方式：

1. 使用 Playwright MCP

Codex 连接浏览器底层其实就是用的这个。
不过，我并不是很推荐用这个方式，主要是因为：

这个 MCP 初始化的时候总是会试图新开 1 个浏览器实例，而不是复用你已经打开的。但是问题在于像是 Dia 这种浏览器同时只允许存在一个浏览器实例，所以还得额外套一层 shell （下面会说）。
这个 MCP 需要你安装 Playwright 浏览器扩展。这点 Codex 和 Claude 也需要。

具体的步骤如下。

给你的浏览器安装 playwright 扩展

地址：
https://chromewebstore.google.com/detail/playwright-extension/mmlmfjhmonkocbjadbfplnigmagldckm

新建一个用于解决多实例问题的 patch 脚本

我放在了 ~/bin/dia-mcp-launcher.sh 里，起这个名字是因为我使用了 Dia 浏览器：

#!/bin/sh
# Playwright MCP 在 --extension 模式下会 spawn 浏览器二进制去打开 connect.html。
# 但很多浏览器例如 Dia 可能拒绝被启动第二个实例，所以这里改用 `open` 把 URL 交给已在运行的 Dia。
# Playwright 传参形如: [--user-data-dir=..] [--profile-directory=..] <connectUrl>
# 真正需要的只有最后一个参数。
for last; do :; done
exec open -a /Applications/Dia.app "$last"

根据你的情况替换成你自己的浏览器。

给你的 AI 配置 MCP 服务

以 OpenCode 为例：

~/.config/opencode/opencode.jsonc

{
  "mcp": {
    // 复用已登录的 Dia 浏览器。EXECUTABLE_PATH 指向转发壳，
    // 绕开 Dia 不允许启动第二个实例的限制。
    "playwright-dia": {
      "type": "local",
      "command": [
        "/Users/leifwebber/.nvm/versions/node/v24.12.0/bin/pnpm",
        "dlx",
        "@playwright/mcp@latest",
        "--extension",
      ],
      "enabled": true,
      "environment": {
        "PLAYWRIGHT_MCP_EXECUTABLE_PATH": "/Users/leifwebber/bin/dia-mcp-launcher.sh",
        "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "从你的 playwright 浏览器扩展获取",
      },
    },
  },
}

Command 里把 pnpm 替换成你自己的路径
PLAYWRIGHT_MCP_EXECUTABLE_PATH 填写第二步的 patch 脚本的位置
PLAYWRIGHT_MCP_EXTENSION_TOKEN 点击你的 playwright 浏览器扩展获取

Command 里用绝对路径是因为如果从 Dock/Finder 启动 AI 程序时拿不到 shell PATH，裸 corepack / pnpm 可能会找不到。

2. 使用 Chrome DevTools MCP

这个就只是配置一下 MCP 服务就行了。以 OpenCode 使用 Dia 浏览器为例：

// 复用已登录的 Dia 浏览器。autoConnect 接管已在运行的实例，
// userDataDir 指向 Dia 的 profile 以继承登录态。
"chrome-devtools": {
  "type": "local",
  "command": [
    "/Users/leifwebber/.nvm/versions/node/v24.12.0/bin/corepack",
    "pnpm",
    "dlx",
    "chrome-devtools-mcp@latest",
    "--autoConnect",
    "--userDataDir",
    "/Users/leifwebber/Library/Application Support/Dia/User Data",
  ],
  "enabled": true,
},

还是根据你自己的情况替换一下 corepack 和浏览器路径即可。

不同浏览器存储用户数据的路径可能不一样。

浏览器里需要开一下远程调试：

chrome://inspect/#remote-debugging

成功效果如下

Leaves' blog