是什么

Claude Code 通过 Claude in Chrome 浏览器扩展获得浏览器自动化能力,可以在编码任务和浏览器操作之间无缝切换。Claude 使用用户已登录的浏览器会话,可以访问任何已登录的网站,无需额外 API 配置。

核心机制

核心能力:

  • 实时调试:读取控制台错误和 DOM 状态,直接修复代码
  • 设计验证:从 Figma 构建 UI 后在浏览器验证是否匹配
  • Web 应用测试:测试表单验证、检查视觉回归、验证用户流程
  • 已登录应用操作:Google Docs、Gmail、Notion 等无需 API 配置
  • 数据提取:从网页提取结构化数据保存到本地
  • 任务自动化:数据录入、表单填写、多站点工作流
  • 录制 GIF:记录浏览器操作为 GIF 文件

启用方式:

claude --chrome          # 启动时启用
# 或在已有会话中:
/chrome                  # 检查连接状态、管理权限、重连

VS Code 中使用:在提示框中输入 @browser 后跟操作描述。

遇到登录页或 CAPTCHA:Claude 会暂停并等待用户手动处理。

关键细节

  • 需要 Claude in Chrome 扩展 v1.0.36+,Claude Code v2.0.73+
  • 需要 Pro/Max/Team/Enterprise 订阅(不支持第三方提供商)
  • 支持 Chrome 和 Edge,不支持 Brave、Arc 和 WSL
  • 默认启用 Chrome 会增加上下文消耗(浏览器工具始终加载)
  • 扩展 service worker 空闲后连接可能断开,运行 /chrome 重连
  • 首次启用后需重启 Chrome 让原生消息主机配置生效

关联

  • computer-use — 控制原生桌面应用(Chrome 无法处理时的替代方案)
  • vs-code — VS Code 中的浏览器自动化
  • platforms-overview — Chrome 集成在整体平台中的位置

实践要点

  • 测试本地 Web 应用时,让 Claude 打开 localhost 并验证功能,比手动测试更高效
  • 调试时告诉 Claude 要查找的具体错误模式,而不是「显示所有控制台输出」
  • 多站点工作流(如从日历读取会议,再查找与会者公司信息)是 Chrome 集成的典型场景
  • 不需要浏览器时不要默认启用 Chrome,避免不必要的上下文消耗
  • 遇到「Receiving end does not exist」错误时,运行 /chrome 选择「Reconnect extension」