一、为什么需要对比

四个工具都能「让 AI 操作浏览器」，但底层机制完全不同：

维度差异点
浏览器来源新开隔离实例 / 复用本机 Chrome / IDE 内置标签页
控制协议Playwright、CDP（Chrome DevTools Protocol）、扩展桥接、专有插件
登录态临时 profile、storage-state 注入、CDP 挂接已开 Chrome、扩展接管真实标签页
配置入口MCP JSON、IDE 开关、OpenCode 插件、Codex 内置 Plugin

选错方案的典型后果：

  • 需要 Confluence 已登录态，却用了 --isolated 新开浏览器 → 反复登录失败
  • 需要稳定 E2E，却用 IDE 内置 Browser Tab → 偶发找不到元素
  • 多 Agent 并行，却共用一个 profile → Cookie 互相污染

本文按 「新开浏览器」 和 「使用用户已登录浏览器」 两条主线，对比四套方案的安装、配置与操作流程。

二、两种核心工作流

流程 B：已登录浏览器

用户先手动登录 / 或 Chrome 已在跑

AI 挂接到现有会话

CDP 9222 / autoConnect / 浏览器扩展桥

适合：内网系统、SSO、需 Cookie 的后台

流程 A：新开浏览器

AI 客户端启动浏览器进程

独立 user-data-dir / 临时 profile

无登录态或注入 storage-state

适合：E2E、公开页面、可重复测试

2.1 流程 A：新开浏览器（干净环境）

特点

  • AI 侧启动新的 Chromium/Chrome 进程
  • 默认无 Cookie；可通过 --storage-state 预注入登录态
  • 可重复、可 CI、适合自动化测试

通用步骤

  1. 安装 Node.js 18+（Playwright MCP / chrome-devtools-mcp 需要）
  2. 在对应客户端配置 MCP 或启用内置浏览器
  3. 首次运行可能下载浏览器二进制（npx playwright install）
  4. 对话中让 Agent「打开 https://example.com 并截图」

2.2 流程 B：使用用户已登录浏览器（复用会话）

特点

  • 复用你日常 Chrome 的 Cookie、扩展、已开标签页
  • 需要用户授权（远程调试弹窗、扩展 token、Chrome 插件权限）
  • 适合内网、OAuth、企业 SSO 等难以脚本化登录的场景

通用步骤

  1. 用户先在本机 Chrome 完成登录（或专用 Profile 登录一次）
  2. 开启远程调试 / 安装桥接扩展 / 启用 Codex Chrome 插件
  3. AI 通过 CDP 或扩展连接到正在运行的浏览器
  4. 操作结束后释放控制（browser_release / 关闭调试端口）

三、四套方案总览

工具主要浏览器能力新开浏览器已登录浏览器配置复杂度
Cursor内置 Browser Automation + 可选 Playwright MCP / chrome-devtools-mcp✅ 内置 Tab / Playwright / CDP-MCP✅ 设置切到 Google Chrome 模式 / CDP --autoConnect低～中
Claude CodePlaywright MCP（官方插件）+ chrome-devtools-mcp（官方市场）✅ Playwright 默认新开✅ CDP --autoConnect 或 --browser-url中
OpenCode@vymalo/opencode-browser 插件 + 浏览器扩展✅ browser_open 新开标签组✅ 扩展接管真实 Chrome Profile（推荐已登录场景）中～高
Codex内置 chrome + browser 插件（非 MCP）✅ 应用内浏览器（IAB）✅ Chrome 扩展挂接用户 Chrome（首选已登录）低（开箱）

四、Cursor

4.1 能力架构

Cursor 有两层浏览器能力：

  1. 内置 Browser Automation（cursor-ide-browser）

    • 不在 mcp.json 里单独列出
    • 由 Settings → Tools & MCP → Browser Automation 开关控制
    • 模式可选：Browser Tab（IDE 内标签）或 Google Chrome（外挂 Chrome）

  2. 可选 MCP 服务器（需手动配置）

    • @playwright/mcp：微软官方，基于无障碍树
    • chrome-devtools-mcp：谷歌官方，基于 Puppeteer + DevTools

4.2 流程 A：新开浏览器

方式 1：内置 Browser Tab（最省事）
Settings → Tools & MCP → Browser Automation
  → 开启
  → 模式选「Browser Tab」

操作步骤：

  1. Cmd+Shift+P → Open Browser Tab
  2. 打开 Agent 对话，确认出现「Connected to Browser Tab」
  3. 输入：「在浏览器打开 http://localhost:9091 并截图」

Agent 会调用内置工具（如 browser_navigate、browser_click、browser_screenshot）。

注意：2026 年初部分版本存在 Browser 工具回归问题。若 Agent 报「找不到 browser 工具」，可尝试：升级到最新版、关闭再开启 Browser Automation、完全退出 Cursor 后重启，或改用下方 Playwright MCP。

方式 2：Playwright MCP（更稳定）

编辑 ~/.cursor/mcp.json 或项目 .cursor/mcp.json：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

新开干净浏览器（每次隔离）：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--isolated", "--headless"]
    }
  }
}

首次验证：

npx -y @playwright/mcp@latest --help
npx playwright install chromium

配置后 重启 Cursor，在 MCP 面板确认 playwright 为绿色已连接。

方式 3：chrome-devtools-mcp（偏调试/性能）
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

默认会启动独立 profile 的新 Chrome 实例（路径类似 ~/.cache/chrome-devtools-mcp/chrome-profile-stable）。

4.3 流程 B：使用已登录浏览器

方式 1：内置模式切到 Google Chrome
Settings → Tools & MCP → Browser Automation
  → 模式从「Browser Tab」改为「Google Chrome」
  → 关闭再开启 → 完全退出 Cursor → 重新打开

此模式尝试控制本机 Chrome，而非 IDE 内嵌页，更接近真实用户环境。

方式 2：chrome-devtools-mcp + autoConnect（Chrome 144+）

Step 1 在 Chrome 地址栏打开：

chrome://inspect/#remote-debugging

按提示允许远程调试连接。

Step 2 MCP 配置：

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

Step 3 保持 Chrome 运行（含你已登录的标签页），在 Agent 中发起任务。Chrome 会弹出授权对话框，点 Allow 后 Agent 即可操作当前 Profile 下所有窗口。

方式 3：chrome-devtools-mcp + 远程调试端口（沙箱/CI 常用）

Step 1 用非默认 user-data-dir 启动 Chrome（Chrome 安全要求）：

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir="$HOME/.chrome-mcp-profile"

在此 Profile 中手动登录一次，后续可复用。

Step 2 MCP 配置：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y", "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}
方式 4：Playwright MCP + storage-state（脚本化登录态）

适合「不能挂接 live Chrome，但有一次性登录脚本」的场景：

# 先用 Playwright 脚本登录并导出 state.json（cookies + localStorage）

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y", "@playwright/mcp@latest",
        "--isolated",
        "--storage-state", "/path/to/state.json"
      ]
    }
  }
}

每次新开浏览器，但启动即已登录。

五、Claude Code

5.1 能力架构

  • Playwright 官方插件：claude plugin install playwright 或 claude mcp add
  • chrome-devtools-mcp 官方市场插件：带 MCP + Skills，适合性能追踪、Network/Console 分析
  • 配置写入 ~/.claude/.mcp.json（用户级）或项目 .mcp.json

5.2 流程 A：新开浏览器

Playwright MCP（推荐默认）
claude mcp add playwright -- npx -y @playwright/mcp@latest
claude mcp list

等价 JSON（~/.claude/.mcp.json）：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

对话示例：

用 Playwright 打开 https://blog.csdn.net，获取页面标题并截图。

工具名形如 mcp__playwright__browser_navigate、browser_snapshot 等。

chrome-devtools-mcp 新开实例
claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest

或安装官方插件（同时获得 Skills）：

claude plugin marketplace add anthropics/claude-plugins-official
claude plugin install chrome-devtools-mcp@claude-plugins-official

5.3 流程 B：使用已登录浏览器

与 Cursor 相同，chrome-devtools-mcp 提供两条路径：

自动挂接（Chrome 144+，最贴近「我已登录的 Chrome」）

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

前置：Chrome 已运行 + chrome://inspect/#remote-debugging 已开启 + 用户授权弹窗。

手动调试端口

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir="$HOME/.chrome-mcp-profile"

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y", "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

Playwright 注入登录态（无法挂 live Chrome 时的折中）

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y", "@playwright/mcp@latest",
        "--isolated",
        "--storage-state", "/path/to/state.json"
      ]
    }
  }
}

5.4 Claude Code 选型建议

场景推荐
写/跑 E2E 测试Playwright MCP
性能 Trace、Network 栈chrome-devtools-mcp
内网已登录后台chrome-devtools-mcp --autoConnect
Token 敏感、要隔离Playwright --isolated

六、OpenCode

6.1 能力架构

OpenCode 的浏览器方案与另外三家差异最大：插件 + 浏览器扩展桥接，而非纯 MCP 起浏览器。

OpenCode Agent
    ↓ browser_* 工具（33 个）
@vymalo/opencode-browser 插件（本机 WebSocket Bridge :4517）
    ↓ token 握手
Chromium/Firefox 扩展
    ↓ CDP 或 content-script
真实浏览器标签页（命名 Tab Group）

6.2 安装配置

~/.config/opencode/opencode.json：

{
  "$schema": "https://opencode.ai/config.json",
  "plugin": [
    ["@vymalo/opencode-browser", { "port": 4517 }]
  ]
}

首次启动插件会生成 token，写入：

  • macOS：~/Library/Application Support/opencode-browser/bridge.json
  • Linux：~/.local/state/opencode-browser/bridge.json

浏览器扩展（二选一）：

  • 从 GitHub Releases 安装 opencode-browser-extension-*-chrome.zip
  • 或 Chrome Web Store / Firefox Add-ons

扩展 Dashboard 填入：

  • Bridge URL：ws://127.0.0.1:4517
  • Token：从 bridge.json 或启动日志复制

6.3 流程 A：新开浏览器（新标签组）

OpenCode 不会像 Playwright 那样启动独立 Chromium 进程；而是在你已打开的 Chrome 里新建命名标签组。

典型对话：

在 group "test" 打开 https://example.com，snapshot 后告诉我标题。

Agent 调用链：

browser_open({ group: "test", url: "https://example.com" })
browser_snapshot({ group: "test" })
browser_get_text({ group: "test" })

标签组在 Chromium 上会显示为带标题的 chrome.tabGroups，便于区分多任务。

「新开」语义：新 group = 新标签桶，共享扩展所连接的 Chrome Profile 的 Cookie（若该 Profile 已登录，新标签也带登录态）。

6.4 流程 B：使用已登录浏览器（OpenCode 强项）

这是 OpenCode 相对其他工具的优势场景：

  1. 用专用 Chrome Profile（不要用日常主力 Profile）安装扩展并完成登录
  2. 扩展通过 CDP（chrome.debugger）或 content-script 驱动该 Profile 下真实标签
  3. Agent 的 browser_* 工具直接操作已登录页面

推荐配置（安全隔离）：

{
  "plugin": [
    ["@vymalo/opencode-browser", {
      "port": 4517,
      "executor": "auto",
      "groups": ["page", "control"]
    }]
  ]
}

操作已登录内网示例：

在 group "confluence" 打开 https://c.csdn.net，确认当前用户名并截图首页。

释放控制（避免 Chrome 一直显示「正受到自动测试软件控制」）：

browser_release({ group: "confluence" })

或退出 OpenCode（插件 exit hook 会关闭 bridge）。

6.5 与 Playwright MCP 组合（可选）

OpenCode 也可额外配置 Playwright MCP（opencode.json 的 mcp 段），用于完全隔离的 E2E；与 opencode-browser 分工：

组件用途
opencode-browser已登录真实 Chrome、日常联调
@playwright/mcp干净环境自动化测试

6.6 安全提醒

官方文档明确建议：

使用专用或一次性 Chrome Profile，不要用日常主力 Profile。
debug 工具组（browser_eval、browser_cookies）默认关闭。

七、Codex（ChatGPT Codex CLI / Desktop）

7.1 能力架构

Codex 的浏览器能力主要是内置 Plugin，不是传统 MCP stdio：

Plugin作用
browser@openai-bundled应用内浏览器（IAB），适合 localhost / file://
chrome@openai-bundled挂接用户本机 Chrome（扩展），适合已登录态

~/.codex/config.toml 示例：

[plugins."chrome@openai-bundled"]
enabled = true

[plugins."browser@openai-bundled"]
enabled = true

[mcp_servers.node_repl]
command = "/Applications/ChatGPT.app/Contents/Resources/cua_node/bin/node_repl"
# ... browser-client 运行时通过 node_repl 的 js 工具驱动

环境变量（由 Codex 注入）：

BROWSER_USE_AVAILABLE_BACKENDS = "chrome,iab"

7.2 流程 A：新开浏览器（应用内浏览器 IAB）

当用户明确要「in-app browser」或测试 localhost 时，Codex 使用 IAB（In-App Browser）：

对话触发词示例：

在应用内浏览器打开 http://localhost:9091/phoenix/console 并截图。

Agent 执行逻辑（control-chrome Skill 摘要）：

if (globalThis.iab == null) {
  globalThis.iab = await agent.browsers.get("iab");
  // 读取完整 documentation() 后操作
}

特点：

  • 在 ChatGPT/Codex 应用内渲染，不占用系统 Chrome
  • 无你系统 Chrome 的 Cookie（干净环境）
  • 适合本地 dev server 验收

7.3 流程 B：使用已登录浏览器（Chrome 插件，Codex 首选）

当任务依赖已有标签页、登录会话、扩展时，Codex 优先 chrome 后端：

对话触发词：

用 Chrome 打开我已登录的 Confluence，检查首页标题。

Agent 逻辑：

if (globalThis.chrome == null) {
  globalThis.chrome = await agent.browsers.get("extension");
  // Chrome 扩展与 Codex 通信，读写真实标签页
}

首次配置 Chrome 扩展（一次性）：

  1. 在 Codex/ChatGPT 设置中启用 Chrome 插件
  2. 按提示安装浏览器扩展并授权
  3. 扩展连接后，Agent 可读取 chrome.user.openTabs() 等 API

Codex Skill 明确规则：

  • 用户明确要求 Chrome 时，不得用 Playwright 或 Computer Use 替代
  • 认证失败时，应提示用户在该浏览器内登录，而非擅自切换方案
  • 不得主动读取 Cookie / localStorage（只读页面与交互）

7.4 Codex 也可用 Playwright MCP（补充）

CLI 添加：

codex mcp add playwright npx "@playwright/mcp@latest"

或 config.toml：

[mcp_servers.playwright]
command = "npx"
args = ["-y", "@playwright/mcp@latest", "--isolated"]

用于与内置 Chrome 插件互补：内置 Chrome 管「已登录」，Playwright MCP 管「隔离测试」。

7.5 Codex 浏览器选择决策树

用户是否明确说「Chrome」？
  ├─ 是 → chrome 扩展后端（已登录场景）
  └─ 否 → 是否 localhost / 应用内页面？
        ├─ 是 → IAB 应用内浏览器
        └─ 否 → agent.browsers.getForUrl(url) 自动选择

八、横向对比表

8.1 新开浏览器

工具推荐方案浏览器进程默认登录态典型配置
CursorPlaywright MCP 或 Browser Tab新 Chromium / IDE 内嵌无npx @playwright/mcp@latest --isolated
Claude CodePlaywright MCP新 Chromium无claude mcp add playwright
OpenCodebrowser_open 新 group用户 Chrome 中新标签组继承 Profile Cookie@vymalo/opencode-browser 插件
CodexIAB 应用内浏览器Codex 内嵌 WebView无启用 browser@openai-bundled

8.2 已登录浏览器

工具推荐方案如何复用登录态用户授权
Cursorchrome-devtools --autoConnect 或 Browser→Google Chrome挂接运行中 Chrome Profile远程调试弹窗
Claude Codechrome-devtools --autoConnect同左同左
OpenCodeopencode-browser 扩展 + 专用 Profile扩展 CDP 控制真实标签扩展 token + debugger 横幅
Codexchrome@openai-bundled 扩展读取用户 Chrome 打开的标签插件授权

8.3 能力维度

维度CursorClaude CodeOpenCodeCodex
无需额外安装即可用浏览器✅ 内置❌ 需装 MCP/插件❌ 需插件+扩展✅ 内置 Plugin
MCP 生态（Playwright/CDP）✅✅可选可选
性能 Trace / Network 分析chrome-devtools-mcpchrome-devtools-mcpbrowser_network（debug 组）依 Chrome 插件能力
多 Agent 并行隔离Playwright --isolated同左按 group 分标签组按会话分 backend
适合 CI 无头Playwright --headless同左不推荐（依赖扩展）IAB 有限
操作真实已登录 ChromeCDP autoConnect同左最强（扩展桥）强（Chrome 插件）

九、场景选型指南

你的目标首选工具推荐配置
本地 dev 页面快速验收Cursor Browser Tab 或 Codex IAB内置开关即可
稳定 E2E、可重复Claude Code + Playwright MCP--isolated + 固定 viewport
内网 Confluence/Jira 已登录操作OpenCode opencode-browser 或 Codex Chrome专用 Chrome Profile + 扩展
性能分析、Console 栈映射Claude Code chrome-devtools-mcp--autoConnect 或 --browser-url
团队统一 MCP 配置进仓库Cursor / Claude Code项目级 .mcp.json 锁定版本
不想装 MCP，开箱即用Codex Chrome 插件config.toml 启用插件

十、安全与合规

  1. Profile 隔离：自动化专用 Profile，与网银、个人邮箱分离。
  2. 远程调试端口：--remote-debugging-port 打开期间，本机任意程序可控制浏览器；用完关闭。
  3. OpenCode token：bridge.json 中的 token 等同本机 root 级浏览器控制权，勿提交 Git。
  4. Codex Chrome 插件：页面可能含敏感信息；注意 OpenAI 账号的数据控制设置。
  5. chrome-devtools-mcp：默认上报使用统计，可用 --no-usage-statistics 关闭。
  6. 释放控制：会话结束调用 browser_release、关闭调试 Chrome、或退出 Agent 客户端。

十一、常见问题

Q1：Agent 说「没有 browser 工具」

工具排查
Cursor检查 Browser Automation 是否开启；升级 Cursor；改 Playwright MCP
Claude Codeclaude mcp list 确认 playwright 已连接
OpenCode扩展是否连上 bridge；核对 bridge.json token
Codexchrome/browser 插件是否 enabled = true

Q2：新开浏览器每次都要登录

  • Playwright：使用 --storage-state 注入 Cookie
  • chrome-devtools：改用 --autoConnect 挂已登录 Chrome，或固定 --user-data-dir
  • OpenCode：在专用 Profile 登录一次，后续同 Profile 标签自动带 Cookie

Q3：Chrome 显示「正受到自动测试软件的控制」

  • Playwright/CDP：正常，headed 模式可见
  • OpenCode：任务结束后 browser_release 或退出 OpenCode
  • chrome-devtools --autoConnect：在 Chrome 弹窗点 Allow/完成操作后断开

Q4：IDE 无显示器 / SSH 远程开发

Playwright MCP 独立 HTTP 模式：

npx @playwright/mcp@latest --port 8931 --headless

客户端 MCP 配置：

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

Q5：Playwright MCP 与 chrome-devtools-mcp 怎么选？

需求选
表单填写、快照、E2EPlaywright MCP
Performance Trace、CrUX、源映射 Consolechrome-devtools-mcp
挂接已开 Chromechrome-devtools-mcp --autoConnect

十二、配置速查

Cursor — Playwright 新开

~/.cursor/mcp.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--isolated"]
    }
  }
}

Claude Code — 已登录 Chrome

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --autoConnect

OpenCode — 扩展桥

~/.config/opencode/opencode.json

{
  "plugin": [["@vymalo/opencode-browser", { "port": 4517 }]]
}

Codex — 启用 Chrome

~/.codex/config.toml

[plugins."chrome@openai-bundled"]
enabled = true

十三、总结

  • 新开浏览器：Playwright MCP 是 Cursor / Claude Code / Codex 的通用答案；Cursor 还可直接用内置 Browser Tab；Codex 用 IAB 最省事。
  • 已登录浏览器：OpenCode（扩展桥）和 Codex（Chrome 插件）最贴近「真实用户 Chrome」；Cursor / Claude Code 用 chrome-devtools-mcp 的 --autoConnect 或 --browser-url 同样可行。
  • 不要混用语义：OpenCode 的 browser_open 是「在真实 Chrome 开新标签组」，不是「启动无头 Chromium」；Playwright 的 --isolated 才是「每次干净实例」。
  • 生产排障推荐组合：日常已登录操作用 OpenCode 或 Codex Chrome；自动化回归用 Playwright MCP --isolated + --storage-state。

参考链接

# chrome
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

22道AI Agent 工程师必会的面试题，别啥都不会就出去找工作

avatar AI Agent技术社区
cover

2026 年从 0 开发 AI Agent 需要的 10 个技能

avatar AI Agent技术社区
cover

AI agent驱动 UI 自动化测试最佳实践：从用例导入到可执行 Agent落地

avatar AI Agent技术社区