Claude Code 学习站

Claude Code Chrome 集成:浏览器自动化实战技巧

Claude Code 通过 Chrome 扩展实现浏览器自动化,支持调试、表单填写、数据提取等七大场景,提炼核心用法与排错要点供开发者参考。

本页目录10
要点速览
  • 启动时加 `--chrome` flag 或会话内执行 `/chrome` 即可接入浏览器,目前仅支持 Chrome 和 Edge,Brave、Arc 及 WSL 暂不支持。
  • 浏览器操作共享当前登录态,无需额外 API 配置即可驱动 Google Docs、Gmail、Notion 等已登录应用。
  • 可在单一工作流中串联调试、UI 验证、表单自动化、数据抓取、跨站流程、GIF 录制等七大典型场景。
  • 遇到登录页或 CAPTCHA 时 Claude 会自动暂停并提示手动处理,站点权限继承自 Chrome 扩展设置。
  • 仅限直连 Anthropic 账号(Pro/Max/Team/Enterprise),不支持 Bedrock、Vertex 等三方渠道。
  • 扩展断连时执行 `/chrome → Reconnect extension` 可快速恢复;Windows 用户需注意 named pipe 冲突问题。

本文是对官方文档「Use Claude Code with Chrome (beta)」的中文要点摘要,完整内容以原文为准:https://code.claude.com/docs/en/chrome

功能概述

Claude Code 可与 Claude in Chrome 浏览器扩展集成,在 CLI 或 VS Code 扩展中直接驱动浏览器完成自动化任务。操作在真实 Chrome 窗口中实时执行,并共享当前浏览器的登录状态,无需额外 API 配置即可访问任何已登录网站。

Beta 限制:目前仅支持 Google Chrome 和 Microsoft Edge;Brave、Arc 等其他 Chromium 浏览器及 WSL 暂不支持。

环境要求

组件要求
浏览器Google Chrome 或 Microsoft Edge
Claude in Chrome 扩展版本 1.0.36 及以上
Claude Code版本 2.0.73 及以上
Anthropic 账号Pro / Max / Team / Enterprise 直连计划

注意:通过 Amazon Bedrock、Google Cloud Vertex AI 或 Microsoft Foundry 等三方渠道接入 Claude 的用户,需额外准备 claude.ai 直连账号才能使用此功能。

快速上手

方式一:启动时开启

claude --chrome

方式二:会话内随时开启

在已有会话中执行 /chrome,可查看连接状态、管理权限、重连扩展,或在多个已连接浏览器之间切换。

设为默认:运行 /chrome 并选择「Enabled by default」,省去每次添加 flag 的步骤。需注意这会让浏览器工具始终加载,增加 context 消耗,按需使用时建议关闭此选项。

在 VS Code 中,只要安装了扩展即可直接使用,无需额外 flag。

七大典型场景

场景示例做法
本地应用测试让 Claude 打开 localhost:3000,尝试提交无效表单并检查错误信息是否正确显示
控制台调试打开 Dashboard 页面,读取加载时 console 中的报错——建议指定关注的错误类型而非全量输出
表单批量填写读取本地 CSV 文件,逐行登录 CRM 并录入联系人信息
文档起草根据最近 commit 在 Google Doc 中撰写项目进展,直接在编辑器中输入内容
数据提取抓取商品列表的名称、价格、可用性,保存为 CSV 文件
跨站工作流查看日历中明日的会议,批量查询外部与会者公司官网并添加备注
录制演示 GIF录制从加购到订单确认页的完整结账流程并保存为 GIF

权限与安全

  • 站点权限:继承自 Chrome 扩展设置,在扩展管理界面控制 Claude 可访问、点击、输入的站点范围。
  • 登录页/CAPTCHA:Claude 遇到时会自动暂停并提示用户手动处理,之后继续执行。
  • 多标签管理:Claude 会为浏览器任务新建标签页来执行操作。

常见排错

扩展未检测到

  1. 确认扩展已安装并启用(chrome://extensions
  2. 确认 Claude Code 版本满足要求(claude --version
  3. 确认 Chrome 正在运行
  4. 运行 /chrome 选择「Reconnect extension」
  5. 若仍失败,同时重启 Claude Code 和 Chrome(首次启用时需重启 Chrome 以读取 native messaging host 配置)

native messaging host 配置文件路径示例(Chrome,macOS):

~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json

Linux 对应路径为 ~/.config/google-chrome/NativeMessagingHosts/;Windows 则在注册表 HKCU\Software\Google\Chrome\NativeMessagingHosts\ 下。

常见错误速查

错误信息原因修复方法
Browser extension is not connectedNative messaging host 无法连接扩展重启 Chrome 和 Claude Code,执行 /chrome 重连
Extension not detected扩展未安装或已禁用chrome://extensions 中安装或启用
No tab availableClaude 在标签页就绪前已执行操作让 Claude 新建标签页后重试
Receiving end does not exist扩展 service worker 进入休眠执行 /chrome → Reconnect extension

其他场景

  • 长会话断连:Chrome 扩展 service worker 长时间不活动后会进入休眠,执行 /chrome → Reconnect extension 恢复。
  • JavaScript 弹窗阻塞:页面出现 alert/confirm/prompt 弹窗时,浏览器事件被阻塞,需手动关闭弹窗后告知 Claude 继续。
  • Windows Named Pipe 冲突(EADDRINUSE):重启 Claude Code,关闭其他占用 Chrome 的 Claude Code 会话。

延伸资源

  • 执行 /mcp 选择 claude-in-chrome 查看全部可用浏览器工具列表
  • Computer use:需要操控原生 macOS 应用时的替代方案
  • CLI 参考--chrome 等完整 flag 说明