Claude Code Chrome 浏览器集成（agent-browser）
一句话概括
让 Claude Code 从终端走进浏览器——像真人一样打开网页、点击按钮、填表单、抓数据、读 console 日志，把「写代码」和「用浏览器验证」串成一条流水线。
它是什么
Claude Code 通过 Claude in Chrome 扩展 + CLI 的 --chrome 标志，建立与真实 Chrome 浏览器窗口的双向通信。Claude 可以在可见的浏览器窗口中实时执行操作，所有动作你都能看到，不是无头浏览器。
核心原理：
- Chrome 扩展通过 Native Messaging Host 与本地 Claude Code 进程通信
- 共享你浏览器已有的 cookie/session，无需单独登录任何网站
- 遇到 CAPTCHA 或登录页会自动暂停，等你手动处理后继续
目前处于 beta 阶段，支持 Chrome 和 Edge，不支持 Brave、Arc 等其他 Chromium 浏览器，也不支持 WSL。
重要限制：Chrome 集成（包括
/chrome命令和--chrome标志）只在 Anthropic 直接订阅（Pro / Max / Team / Enterprise）下可用。如果你通过第三方 provider（如 Amazon Bedrock、Google Vertex AI、Microsoft Foundry，或其他第三方 API 转发服务）使用 Claude Code，/chrome会报Unknown command，--chrome标志也不会生效。要使用此功能，必须用 claude.ai 账号直接登录。
能干什么
核心场景
| 场景 | 说明 | 示例 |
|---|---|---|
| 实时调试 | 读取 console 报错和 DOM 状态，然后回去改代码 | 打开 localhost:3000，看 console 有没有报错 |
| UI 验证 | 写完前端代码后直接在浏览器里验证效果 | 打开登录页，提交空表单，检查错误提示是否正确 |
| 表单自动填写 | 读取本地文件，逐条往网页表单里填数据 | 读 contacts.csv，去 CRM 后台逐条录入 |
| 数据抓取 | 从网页提取结构化信息，存为本地文件 | 打开产品列表页，提取名称和价格存为 CSV |
| 已登录网站操作 | 直接操作 Google Docs、Gmail、Notion 等 | 去我的 Google Doc 里写一份项目周报 |
| 多站点工作流 | 跨多个标签页协调完成任务 | 查日历明天的会议，然后查每个参会者的公司信息 |
| 录制 GIF | 录制浏览器操作过程为 GIF 文件 | 录一个 GIF 展示完整的下单流程 |
最大价值
代码 + 浏览器验证的闭环：以前的流程是「Claude 写代码 → 你自己去浏览器验证 → 回来告诉 Claude 哪里有问题」。现在变成「Claude 写代码 → Claude 自己去浏览器验证 → Claude 自己修」，整个循环不需要你介入。
实战案例：别人都在用它干什么
案例 1：前端开发自测闭环
场景：你在写一个 React 登录页面，改完代码后需要验证表单验证逻辑是否正确。
传统流程：改代码 → 手动切浏览器 → 手动填表单测试 → 发现问题 → 切回编辑器 → 改代码 → 再测… 循环 N 次。
现在的流程：
我刚改了登录表单的验证逻辑。帮我：
1. 打开 localhost:5173 的登录页
2. 试试提交空表单，检查错误提示
3. 试试输入格式错误的邮箱，检查提示
4. 试试密码少于6位，检查提示
5. 最后用正确的数据提交，确认能跳转到首页
如果有任何显示不对的地方，直接改代码修复。
效果：Claude 会逐一测试每个场景，截图对比，发现 bug 直接改代码，然后再次验证。一个完整的测试-修复循环可能只需要你看一眼最终结果。
这是官方最佳实践推荐的用法：Anthropic 官方 Best Practices 文档明确指出——“UI changes can be verified using the Claude in Chrome extension. It opens new tabs in your browser, tests the UI, and iterates until the code works.” 这是提高 Claude Code 输出质量最关键的技巧之一。
案例 2：Figma 设计稿还原验证
场景：产品给了一个设计稿截图，你需要用 CSS 还原出来。
Prompt：
[粘贴设计稿截图]
帮我实现这个设计。完成后打开 localhost:3000/profile 页面，
截图对比我给你的设计稿，列出所有不一致的地方并修复。
效果：Claude 写完 CSS 后，会自己打开浏览器截图，和设计稿逐像素对比，自动修复间距、颜色、字号等差异。传统流程需要前端反复切换 Figma 和浏览器肉眼对比，现在 Claude 自己闭环。
案例 3：Console 错误诊断
场景：用户反馈 Dashboard 页面加载很慢，怀疑有 JS 报错。
Prompt：
打开 localhost:3000/dashboard，
检查 console 里有没有 error 或 warning，
特别关注网络请求失败和 JavaScript 异常。
如果有问题，告诉我根本原因并修复代码。
效果：Claude 打开页面后读取所有 console 输出，过滤出错误信息，追溯到源代码定位 bug，然后直接修复。你不需要手动打开 DevTools 翻 console 了。
案例 4：批量数据录入
场景：你有一份 500 条客户信息的 CSV，需要逐条录入到公司的 CRM 系统（没有 API，只有网页表单）。
Prompt：
我有一个 contacts.csv 文件，每行有：姓名、邮箱、手机号、公司名。
请帮我：
1. 读取这个 CSV
2. 去 crm.example.com 后台
3. 对每条记录：点击"新增联系人"，填入各字段，点"保存"
4. 如果遇到重复提示就跳过，继续下一条
5. 最后告诉我成功录入了多少条、跳过了多少条
效果：Claude 读取本地文件，然后在浏览器中逐条操作 CRM 表单。因为共享你的登录态，不需要额外配置认证。这种机械重复性工作可能需要人工操作几个小时，Claude 可以自动完成。
案例 5：网页数据抓取结构化
场景：需要从竞品网站收集产品价格信息做分析。
Prompt：
打开 shop.example.com/products 的产品列表页，
提取每个商品的：名称、价格、评分、库存状态。
如果有分页就翻页继续提取。
所有数据存为 products.csv，按价格从高到低排序。
效果：Claude 导航到页面，解析 DOM 提取信息，处理分页，最后把结构化数据保存为本地 CSV 文件。不需要写爬虫脚本，不需要配置 Playwright/Puppeteer。
案例 6：Google Docs / Notion 自动写入
场景：你需要把最近一周的 git commit 汇总成项目周报，写到团队的 Google Doc 里。
Prompt：
1. 执行 git log --oneline --since="7 days ago" 获取最近一周的 commit
2. 按功能分类汇总成项目周报格式
3. 打开我的 Google Doc（docs.google.com/document/d/xxxx）
4. 在文档末尾添加本周的周报内容
效果：Claude 先在终端执行 git 命令收集数据，整理格式，然后切到浏览器打开 Google Docs（因为你已经登录了 Google 账号），直接在文档里打字写入。不需要配置 Google Docs API，不需要申请 OAuth 权限。
这个模式同样适用于：往 Notion 写文档、在 Gmail 发邮件、在 Confluence 更新 Wiki。任何你浏览器里已经登录的网站，Claude 都可以直接操作。
案例 7：多站点协调工作流
场景：明天有几个外部会议，需要提前了解每个参会者的公司背景。
Prompt：
1. 打开我的 Google Calendar，查看明天的所有会议
2. 找出有外部参会者的会议
3. 对每个外部参会者，打开他们公司的官网
4. 简要记录每家公司是做什么的、最近有什么新闻
5. 把这些信息整理成一个 meeting-prep.md 文件
效果：Claude 在多个标签页之间切换工作——日历、公司官网——最终汇总成本地文件。这是一个跨多个网站、需要人类判断力的综合性任务，以前需要手动操作 30 分钟，现在可以委托给 Claude。
案例 8：录制操作演示 GIF
场景：你需要为文档或 PR 录制一个操作流程的 GIF 演示。
Prompt：
录一个 GIF，演示我们网站的完整下单流程：
从浏览商品 → 加入购物车 → 填写地址 → 选择支付方式 → 确认订单。
保存为 checkout-flow.gif。
效果：Claude 一步步操作你的网站，同时录制整个过程，保存为 GIF 文件。比手动使用屏幕录制软件更方便，而且可以精确控制每一步的操作。
案例 9：端到端测试替代方案
场景：你想验证用户注册流程是否完整可用，但不想写 Playwright/Cypress 测试脚本。
Prompt：
帮我测试完整的用户注册流程：
1. 打开 localhost:3000/register
2. 填入一个随机邮箱和密码
3. 点击"注册"按钮
4. 检查是否跳转到了欢迎页
5. 检查 console 有没有报错
6. 截图每一步的页面状态
如果有任何步骤失败了，告诉我具体在哪一步、什么错误。
效果：相当于一个不需要写代码的端到端测试。特别适合快速验证、原型阶段、或者不值得写完整测试用例的场景。
案例 10：结合 Computer Use 控制原生应用
Chrome 集成处理网页场景。如果你需要控制原生桌面应用（如 Xcode、iOS Simulator、Figma 桌面版），Claude Code 还有另一个相关能力——Computer Use（目前仅 macOS）：
# 构建并验证一个 macOS 原生应用
编译 MenuBarStats target，启动应用，
打开偏好设置窗口，验证滑块能正常调节数值。
截图偏好设置窗口给我看。
Claude 的工具选择优先级：
- 有 MCP server → 用 MCP（最精确、最快）
- 能用命令行解决 → 用 Bash
- 需要操作网页 → 用 Chrome 集成
- 以上都不行 → 用 Computer Use（控制原生 GUI）
安装步骤
前提条件
| 条件 | 要求 |
|---|---|
| Claude Code 版本 | >= 2.0.73 |
| 浏览器 | Google Chrome 或 Microsoft Edge |
| Chrome 扩展 | Claude in Chrome >= 1.0.36 |
| 订阅 | Anthropic 直接订阅（Pro / Max / Team / Enterprise） |
不支持第三方 provider（Amazon Bedrock、Google Vertex AI、Microsoft Foundry）。如果你只有第三方 provider 账号，需要额外注册一个 claude.ai 账号。
第 1 步：确认 Claude Code 版本
claude --version
# 输出 >= 2.0.73 即可如果版本过低：
# 原生安装的自动更新，也可以手动触发
curl -fsSL https://claude.ai/install.sh | bash
# Homebrew 安装的需要手动更新
brew upgrade claude-code第 2 步：安装 Chrome 扩展
- 打开 Chrome 浏览器
- 进入 Chrome Web Store，搜索 “Claude in Chrome”（发布者是 Anthropic）
- 点击安装，确认权限
安装后可以在 chrome://extensions 页面确认扩展已启用，版本 >= 1.0.36。
第 3 步：首次连接
# 在终端启动 Claude Code 并启用 Chrome
claude --chrome首次启用时，Claude Code 会自动创建 Native Messaging Host 配置文件：
| 浏览器 | 配置文件路径 |
|---|---|
| Chrome (Linux) | ~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json |
| Chrome (macOS) | ~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json |
| Edge (Linux) | ~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json |
首次配置完成后必须重启 Chrome，让浏览器读取新的配置。
第 4 步：验证连接
在 Claude Code 会话中输入：
/chrome
如果显示连接成功，就可以开始使用了。如果显示未检测到扩展，重启 Chrome 再试一次。
使用方法
启动方式
# 方式 A：启动时带标志
claude --chrome
# 方式 B：已在会话中，输入斜杠命令
/chrome设为默认启用
如果经常使用，可以输入 /chrome 然后选择 “Enabled by default”，以后启动 Claude Code 就自动连接 Chrome，不用每次加 --chrome。
注意：默认启用会增加 context 消耗（浏览器工具始终加载），不常用的话建议按需启用。
查看所有可用工具
在会话中输入：
/mcp
然后选择 claude-in-chrome，可以看到所有可用的浏览器操作工具列表。
站点权限管理
Chrome 扩展的站点权限控制 Claude 能操作哪些网站。在 Chrome 扩展的设置页面管理权限，可以针对特定域名开启或关闭 Claude 的浏览/点击/输入权限。
最佳实践
1. 写代码时让 Claude 自己验证
这是官方推荐的最高效用法。不要自己去浏览器验证，让 Claude 闭环：
实现一个 validateEmail 函数。
测试用例：user@example.com 返回 true，invalid 返回 false，user@.com 返回 false。
实现后打开浏览器在页面上测试，确认效果。
2. 给具体的验证标准
不要只说”看看对不对”，要给 Claude 明确的成功标准：
# 差的 prompt
打开页面看看登录功能好不好用
# 好的 prompt
打开 localhost:3000/login，测试以下场景：
1. 空邮箱空密码提交 → 应该显示"邮箱不能为空"
2. 错误格式邮箱 → 应该显示"邮箱格式不正确"
3. 正确邮箱+错误密码 → 应该显示"密码错误"
4. 正确凭据 → 应该跳转到 /dashboard
每步截图记录。
3. 调试时指定关注点
Console 输出可能很多，告诉 Claude 关注什么：
# 差的 prompt
看看 console 有什么
# 好的 prompt
打开 dashboard 页面，关注 console 里的 Error 和 Warning，
特别是网络请求失败（fetch failed）和 React 渲染错误。
忽略 info 级别的日志。
4. 长时间任务注意重连
如果你让 Claude 做一个很长的浏览器任务（比如录入 500 条数据），中间可能因为 Service Worker 休眠断连。可以要求 Claude 定期检查连接状态。
常见问题
扩展未检测到
- 确认扩展已安装且启用：
chrome://extensions - 确认 Claude Code 版本：
claude --version - 确认 Chrome 正在运行
- 重启 Chrome（首次配置后必须重启）
- 输入
/chrome→ 选择 “Reconnect extension”
长时间空闲后断连
Chrome 扩展的 Service Worker 空闲后会休眠，导致连接断开。解决方法：
/chrome → 选择 "Reconnect extension"
浏览器无响应
最常见原因是页面弹出了 JavaScript 对话框（alert/confirm/prompt），阻塞了所有浏览器事件。手动关闭对话框后告诉 Claude 继续即可。
常见错误速查
| 错误信息 | 原因 | 解决 |
|---|---|---|
| Browser extension is not connected | Native Messaging Host 无法连接扩展 | 重启 Chrome 和 Claude Code，然后 /chrome 重连 |
| Extension not detected | 扩展未安装或被禁用 | 在 chrome://extensions 安装/启用 |
| No tab available | Claude 在标签页就绪前尝试操作 | 让 Claude 新建一个标签页再试 |
| Receiving end does not exist | 扩展 Service Worker 休眠 | /chrome → “Reconnect extension” |
局限性
- 仅支持 Chrome 和 Edge，不支持 Brave、Arc 等其他 Chromium 浏览器
- 不支持 WSL（Windows Subsystem for Linux）
- 不支持第三方 provider（Bedrock / Vertex / Foundry）
- 默认启用会增加 context 消耗
- 长时间空闲可能断连需要手动重连
- 遇到 CAPTCHA / 复杂登录流程需要人工介入
VS Code 中使用
如果你用 VS Code 的 Claude Code 扩展，Chrome 集成在安装了 Chrome 扩展后自动可用，不需要额外的 --chrome 标志。
详见官方文档：VS Code 浏览器自动化
相关功能对比
| 功能 | 适用场景 | 平台 |
|---|---|---|
| Chrome 集成 | 网页操作：测试、填表、抓数据、操作已登录网站 | Linux / macOS / Windows |
| Computer Use | 原生桌面应用：Xcode、iOS Simulator、Figma 桌面版 | 仅 macOS（beta） |
| MCP | 有结构化 API 的外部服务：Jira、数据库、Slack | 全平台 |
| Hooks | 在 Claude 动作前后自动执行 shell 命令 | 全平台 |
选择建议：如果目标服务有 MCP server，优先用 MCP（最精确最快）。如果只有网页界面，用 Chrome 集成。如果是原生桌面应用且你在 macOS 上，用 Computer Use。
信息来源：Claude Code Chrome Integration (beta)、Best Practices、Computer Use 最后更新：2026-04-22