给 Claude Code 装一双"眼睛"——自主截图 / 操作浏览器方案
2026-07-22 调研（2 个 sonnet 子 agent 联网查证）。目的：让 Claude Code 在做前端时能自己看页面长啥样、点按钮、填表单、对照设计稿，而不是每次都要用户截图。
#一句话结论
- 本机其实已经有能力：
claude-in-chrome（官方 Chrome 扩展 MCP，截图+DOM 双通道）+playwright-skill（自动写 Playwright 脚本截图存 /tmp）都已装。这次没用上，是因为 Chrome 扩展没连（报 "extension is not connected"），我退回用 playwright 脚本自己截图。 - 最省事组合：日常本地开发
claude --chrome（复用你已登录的真实 Chrome）；需要无头/CI 或更省 token 就加playwright-mcp；要深度调试（console/network/性能）再加chrome-devtools-mcp。
#一、官方第一方方案
| 方案 | 定位 | 装法 | 能力/限制 |
|---|---|---|---|
| Claude in Chrome | 复用你已登录的真实 Chrome，在可见标签页里点/填/截图/读 console/读网络 | 装扩展（Chrome 应用店搜 Claude）→ claude --chrome 或 /chrome 设为默认 |
截图/点击/输入/导航/多标签/读 DOM/GIF 录制。需 /login 登录 Pro/Max（不能纯 API key，否则 403），扩展 ≥v1.0.36 |
| Playwright MCP（微软官方） | 无头/有头浏览器，用文字化 a11y 树驱动（省 token），也能截图 | claude mcp add playwright npx @playwright/mcp@latest |
点击/填表/多标签/网络 mock；首次要 npx playwright install 下 Chromium(~300MB)。适合 CI/纯功能测试 |
| Computer Use | 控制整个 macOS 桌面（含浏览器画面，但浏览器只读） | /mcp 里 Enable computer-use，授权 Accessibility+Screen Recording |
仅 macOS、Pro/Max、交互式会话。浏览器 view-only，浏览器任务应转 Claude in Chrome |
"扩展未连接"排查（这次踩的）：① chrome://extensions 确认启用；② claude --version 最新；③ 首次连接写 Native Messaging Host 配置后要重启一次 Chrome；④ /chrome → Reconnect；⑤ service worker 休眠会掉线（"Receiving end does not exist"），/chrome 重连；⑥ 页面有 alert/confirm 弹窗会卡住事件。
Host 配置路径（mac）：~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
官方文档：code.claude.com/docs/en/chrome ｜ code.claude.com/docs/en/computer-use
#二、社区/开源方案（GitHub star 量级）
| 工具 | 定位 | Star | 装法 | 能否回传截图给 agent 看 |
|---|---|---|---|---|
| microsoft/playwright-mcp | 官方 Playwright MCP，a11y 树为主+按需截图 | ~30k | claude mcp add playwright npx @playwright/mcp@latest |
能（browser_take_screenshot），默认走文本省 token |
| ChromeDevTools/chrome-devtools-mcp | Google 官方，暴露完整 DevTools（性能 trace/network/console/截图），连你本机已装 Chrome | ~45k | claude mcp add chrome-devtools npx chrome-devtools-mcp@latest |
能，且带性能/网络/控制台联动 |
| AgentDeskAI/browser-tools-mcp | 专精"console+network+截图实时喂 agent"，配套 Chrome 扩展 | ~7k | 装扩展 + npx @agentdeskai/browser-tools-server |
能，核心功能 |
| SawyerHood/dev-browser（skill） | Claude Code 风格 skill，封装 Playwright + computer-use，可连真实已登录 Chrome，会话持久 | 社区热门 | /plugin marketplace add sawyerhood/dev-browser → /plugin install |
能 |
| browser-use/browser-use | 自然语言驱动浏览器（Python 库），探索性任务强 | ~78k | pip install browser-use + MCP 封装 |
能（视觉+DOM 混合） |
#三、最大的坑：截图 token 成本
- Playwright MCP 一次
browser_take_screenshot实测烧过 23 万 token（GitHub issue #27869）。 - claude-in-chrome 的截图会永久内嵌进对话上下文并每轮重复发送，18 张图第二天恢复会话问一句就吃掉 Max 套餐 17% 用量，无提醒。
- 缓解：优先用 Playwright MCP 的文本 a11y 快照（一次 200-400 token），只在真要核对颜色/间距/像素时才截图；用完开新会话或清旧图。
#四、给"含前端的项目"定的规矩（写进逆向 SOP / skill）
- 复刻/仿做带界面的产品，动手前先截原站（桌面 + 移动两个断点），存进素材目录当像素级参考——别只靠读压缩 JS 猜布局（这次就猜偏了：原站是桌面左右分栏，我做成了移动单列）。
- 自己就能截图：Chrome 扩展连不上时，直接用 playwright 脚本（
npx playwright install chromium后写个 .mjs 截图存 /tmp，再用 Read 看图）——原站公开页、和自己部署的站，都能截来对照。 - 做完必须截自己的站 vs 原站并排对照，别等交付后才发现布局不对。
- 用户兜底：实在有歧义，让用户截图发来（本次流程）。
来源：配置信息/给ClaudeCode装浏览器眼睛.md（整理于 2026-08-18）