你是否想过让 Claude Code 不仅能写代码，还能直接帮你测试、调试、甚至操作浏览器？现在通过 Claude Code 的 Chrome 集成（Beta），你可以在终端中让 Claude 打开网页、填写表单、读取控制台日志、录制 GIF——所有这些都不需要离开你的编码环境。
能做什么？
Chrome 集成将浏览器操作与编码任务无缝串联：
- 实时调试：直接读取控制台错误和 DOM 状态，然后修复代码
- 设计验证：根据 Figma 稿构建 UI，然后在浏览器中验证是否匹配
- Web 应用测试：测试表单验证、检查视觉回归、验证用户流程
- 操作已登录应用：操作 Google Docs、Gmail、Notion 等已登录的应用
- 数据提取：从网页拉取结构化数据并本地保存
- 任务自动化：自动化重复的浏览器任务
- 录制演示 GIF：记录浏览器交互并保存
前置条件
- Google Chrome 或 Microsoft Edge
- Claude in Chrome 扩展 v1.0.36+
- Claude Code v2.0.73+
- Anthropic 直接计划（Pro、Max、Team 或 Enterprise）
⚠️ 不支持通过 Amazon Bedrock、Google Cloud Vertex AI 或 Microsoft Foundry 的第三方访问。
快速开始
方式一：启动时启用
bash
claude --chrome方式二：会话中启用
在已有会话中运行 /chrome 命令。
设为默认
运行 /chrome → 选择 "Enabled by default"。
💡 提示：默认启用会增加上下文消耗，如果注意到上下文消耗增大，建议只在需要时用
--chrome。
实战示例
1. 测试本地 Web 应用
text
我刚更新了登录表单验证。帮我打开 localhost:3000，
尝试提交无效数据，检查错误消息是否正确显示。Claude 会导航到本地服务器，交互表单，报告观察结果。
2. 控制台日志调试
text
打开 Dashboard 页面，检查页面加载时控制台是否有错误。Claude 读取控制台消息，过滤特定模式或错误类型。
3. 自动化表单填写
text
我有一个客户联系表 contacts.csv。对每一行，
打开 CRM crm.example.com，点击"添加联系人"，
填入姓名、邮箱和电话。4. 操作 Google Docs
text
根据最近的 commits 撰写项目更新，
添加到我的 Google Doc docs.google.com/document/d/abc123Claude 打开文档，点击编辑器，输入内容。适用于任何已登录的应用。
5. 数据提取
text
访问产品列表页，提取每个商品的名称、价格和库存状态，
保存为 CSV 文件。6. 多站点工作流
text
查看明天日历上的会议，
对每个有外部参会者的会议，查找他们的公司网站，
添加备注说明公司业务。7. 录制演示 GIF
text
录制一个 GIF，展示从添加购物车到确认页的完整结账流程。常见问题排查
| 问题 | 解决方案 |
|---|---|
| 扩展未检测到 | 检查扩展是否启用 → 重启 Chrome → 运行 /chrome 重新连接 |
| 浏览器无响应 | 检查是否有模态对话框阻塞 → 手动关闭后继续 |
| 长会话连接断开 | 扩展 Service Worker 可能空闲 → /chrome 选择 "Reconnect" |
| Windows Named Pipe 冲突 | 关闭其他 Claude Code 会话 → 重启 |
站点权限管理
站点级别权限继承自 Chrome 扩展设置，你可以精确控制 Claude 能浏览、点击和输入的站点。
与 VS Code 配合
在 VS Code 扩展中，安装 Chrome 扩展后即可直接使用，无需额外参数。详见 VS Code 文档的浏览器自动化部分。
原文来源：Claude Code Chrome 文档 | 来源：Claude Code 官方文档