Claude Code in Chrome 与浏览器自动化
概述
Claude Code 提供官方内置的 Chrome 集成（--chrome / /chrome），适合日常开发调试和网页自动化任务。社区方案 chrome-devtools-mcp 则通过 CDP 协议提供更底层的浏览器控制能力。两者定位不同，选错会走弯路。
Claude Code in Chrome（官方，推荐）
架构
不是独立的 Chrome 扩展，而是两个产品的桥接：
- Claude in Chrome（Chrome/Edge 扩展）— 侧边栏 AI 助手
- Claude Code CLI/VS Code 插件 — 开发者工具
两者都安装后，通过 native messaging 桥接（不是 CDP）。
启动方式
claude --chrome # CLI 启动时连接
/chrome # 会话中连接
# VS Code 中输入 @browser <任务>核心能力
- 共享真实浏览器的登录状态/Cookie（免认证）
- 操作在可见的真实 Chrome 窗口中进行
- 遇到验证码/登录墙自动暂停，等待人工介入
- 多标签协调、DOM 读写、截图、表单操作
- 数据抓取并保存为 CSV/JSON
- 会话录制为 GIF
限制
- 仅支持 Chrome 和 Edge（不支持 Brave、Arc 等）
- 仅限 Anthropic 直连计划（Pro/Max/Teams/Enterprise），不支持 Bedrock/Vertex/Foundry
- 不支持 WSL
- 无底层 CDP 能力（网络拦截、性能 profiling 等）
chrome-devtools-mcp（社区，特定场景）
通过 Chrome DevTools Protocol (CDP) 接入浏览器，作为 MCP Server 给 Claude Code 使用。
CDP 是什么
Chrome 启动时暴露的底层调试 WebSocket 接口（--remote-debugging-port=9222），Chrome DevTools 本身也是基于它实现的。
CDP（底层协议）
├── Chrome DevTools（浏览器调试面板）
├── Playwright / Puppeteer（自动化库）
├── chrome-devtools-mcp（MCP 封装）
└── Lighthouse（性能审计）
CDP 能力域：Network（拦截/mock）、DOM、Runtime（执行 JS）、Page（截图/导航）、Debugger（断点）、Performance、Target（多标签）
适用场景
| 场景 | 原因 |
|---|---|
| 非 Anthropic 直连（Bedrock/Vertex） | 官方集成不可用 |
| CI/无头环境 | 无需真实可见窗口 |
| 网络层拦截/mock | 官方集成不支持 |
| 性能 profiling、JS Coverage | 需要完整 CDP 能力 |
| 非 Chrome/Edge 浏览器 | 官方只支持这两个 |
Playwright MCP vs chrome-devtools-mcp
需要 MCP 方案时，优先考虑 Playwright MCP（Microsoft 官方出品），而非 chrome-devtools-mcp。
CDP（底层协议）
├── chrome-devtools-mcp ← 直接封装 CDP
└── Playwright ← 封装 CDP（更高层）
└── Playwright MCP ← 封装 Playwright
| 维度 | chrome-devtools-mcp | Playwright MCP |
|---|---|---|
| 维护方 | 社区 | Microsoft 官方 |
| 跨浏览器 | 仅 Chromium | Chrome / Firefox / Safari |
| 操作粒度 | 低（原始 CDP） | 高（click/fill/navigate 语义化） |
| Token 消耗 | 高（CDP 响应体积大） | 低（封装后输出精简） |
| 稳定性 | 依赖 CDP 连接 | 内置重试/等待机制 |
| 无头支持 | 需手动配置 | 开箱即用 |
Playwright MCP 适合：网页自动化、表单填写、跨浏览器测试、token 敏感场景（绝大多数场景）。 chrome-devtools-mcp 适合：网络拦截/mock、JS Coverage、Performance profiling 等需要完整 CDP 底层能力的场景。
选择指南
| 场景 | 推荐方案 |
|---|---|
| 网页操作自动化（招聘筛选、表单填写等） | Claude Code in Chrome |
| 日常开发调试（读 Console、对比 UI） | Claude Code in Chrome |
| Max 订阅用户 | Claude Code in Chrome |
| CI/无头/Bedrock 接入 | Playwright MCP |
| 跨浏览器测试 | Playwright MCP |
| 网络拦截/mock/性能分析 | chrome-devtools-mcp |
技巧与注意事项
- 招聘网站筛选简历等「无开放 API 的网页任务」用 Claude Code in Chrome 最合适：共享真实登录态，验证码可手动介入
- Max 订阅无法调用 Claude API（不能用 Playwright + Claude API 方案），但 Claude Code CLI 本身包含在 Max 内
- chrome-devtools-mcp 每次工具调用链路长（stdio → CDP → 浏览器），且 CDP 响应体积大（DOM 快照、HAR）容易撑爆 context
- 官方集成通过内容脚本而非 CDP，token 效率更高