首页 / Claude Code 入门教程 / Chrome 浏览器集成

← 上一篇 下一篇 →
Claude Code 入门教程

Chrome 浏览器集成

本教程共 34 篇 · 第 32 篇 · 更新于 2026-07-26 · 约 7 分钟阅读

Claude CodeClaude Code 入门教程Chrome 集成浏览器调试前端调试浏览器自动化

32. Chrome 浏览器集成

本节目标：学会把 Claude Code 连接到 Chrome 浏览器，用自然语言指挥 Claude 打开网页、点击按钮、填表单、读控制台日志，实现编码和浏览器测试一条龙。

你刚改完一个登录表单的验证逻辑，想测测效果。传统流程是：切到浏览器，手动输入各种数据，打开 DevTools 看控制台报错，再切回编辑器改代码。来回切换很烦。Chrome 集成让 Claude Code 直接操控浏览器，你在终端里说一句话，它就帮你打开页面、测试交互、读控制台日志，全流程不用切窗口。

什么是 Chrome 集成

Claude Code 通过”Claude in Chrome”浏览器扩展，获得操控 Chrome 浏览器的能力。Claude 会打开新标签页执行你的指令，操作过程在实时可见的 Chrome 窗口中运行。

核心优势是：Claude 共享你浏览器的登录状态。它能访问你已经登录的任何网站—Gmail、Google Docs、Notion、公司内网—不需要额外的 API 密钥或重新认证。

当 Claude 遇到登录页面或验证码（CAPTCHA）时，会暂停并提示你手动处理。

Note

Chrome 集成适用于 Google Chrome 和 Microsoft Edge。不支持 Brave、Arc 或其他 Chromium 浏览器，也不支持 WSL（Windows 的 Linux 子系统）。通过 Amazon Bedrock、Google Cloud 等第三方提供商访问的用户无法使用此功能，需要直接的 Anthropic 计划（Pro、Max、Team 或 Enterprise）。

能做什么

连接 Chrome 后，你可以把浏览器操作和编码任务串在一起：

  • 实时调试：读取控制台错误和 DOM 状态，然后直接修改导致问题的代码
  • 设计验证：从 Figma 设计稿构建 UI 后，在浏览器里打开验证效果是否匹配
  • Web 应用测试：测试表单验证、检查视觉回归、验证用户流程
  • 操作已登录的应用：与 Google Docs、Gmail、Notion 等已登录的应用交互
  • 数据提取：从网页提取结构化信息，保存为本地文件
  • 任务自动化：自动填表单、数据录入、多站点工作流
  • 录制 GIF：把浏览器交互录制成 GIF，方便分享和记录

前置条件

条件说明
浏览器Google Chrome 或 Microsoft Edge
浏览器扩展Claude in Chrome 扩展 v1.0.36 或更高
Claude Code已安装
账户直接 Anthropic 计划（Pro、Max、Team 或 Enterprise）

安装与连接

第一步：安装浏览器扩展

打开 Chrome 或 Edge，访问 Chrome Web Store - Claude，点击”添加至 Chrome”安装。

安装后建议重启浏览器，确保 Native Messaging Host（本机消息传递主机）正确加载。

第二步：启动 Claude Code

# 带 Chrome 标志启动
claude --chrome

# 或者在已有会话中启用
/chrome

第一次启用时，Claude Code 会安装本机消息传递主机配置文件。从 v2.1.199 开始，首次安装时会自动打开一个浏览器标签页提示你连接扩展。

第三步：默认启用（可选）

如果不想每次都加 --chrome，运行 /chrome 并选择”默认启用”。

Warning

默认启用 Chrome 会增加上下文消耗，因为浏览器工具始终被加载。如果你注意到上下文使用量增加，可以关掉默认启用，只在需要时用 --chrome。

在 VS Code 中使用

VS Code 扩展里，只要安装了 Chrome 扩展，Chrome 就自动可用，不需要额外标志。

在提示框中输入 @browser 加上你的指令：

@browser 打开 localhost:3000，检查控制台是否有错误

基本使用方法

连接好之后，直接用自然语言告诉 Claude 该做什么。Claude 会自动解析指令、执行操作、返回结果。

第一个浏览器操作会请求使用 claude-in-chrome skill 的权限，批准后 Claude 打开新标签页开始工作。

示例：测试本地 Web 应用

我刚更新了登录表单验证。请打开 localhost:3000，
用无效数据提交表单，检查错误消息是否正确显示。

Claude 导航到本地服务器、与表单交互、报告观察到的情况。

示例：用控制台日志调试

打开 dashboard 页面，检查页面加载时控制台有没有报错。
Tip

日志可能很冗长，告诉 Claude 要找的具体模式（如”检查有没有 CORS 错误”），比让它读全部输出更高效。

示例：自动填充表单

我有一个 contacts.csv 文件，里面有客户联系方式。
对每一行数据，打开 crm.example.com，点击"添加联系人"，
填写姓名、邮箱和电话，然后提交。

Claude 读取本地文件、导航网页界面、逐条录入数据。

示例：操作 Google Docs

根据最近的 Git 提交，起草一份项目更新，
添加到我的 Google Doc（网址：docs.google.com/document/d/abc123）

Claude 打开文档、点击编辑器、输入内容。这对任何已登录的 Web 应用都有效。

示例：提取数据

打开产品列表页面，提取每个商品的名称、价格和库存状态，
保存为 CSV 文件。

示例：录制 GIF

录制一个 GIF，展示从购物车添加商品到结账确认的完整流程。

Claude 录制交互序列并保存为 GIF 文件。

示例：多站点工作流

查看我明天的日历，对每个有外部参会者的会议，
查找他们公司的网站并添加备注。

Claude 在多个标签页之间协调工作，收集信息并完成任务。

Plan Mode 中的浏览器工具

在 Plan Mode（计划模式）下，浏览器工具有不同的权限规则：

仅读取操作不需要权限提示，可以直接运行：

  • read_page：读取页面内容
  • get_page_text：获取页面文本
  • find：查找元素
  • 读取控制台消息或网络请求
  • 截图

改变状态的操作会提示批准：

  • 点击
  • 输入
  • 导航
  • 标签页和窗口管理
  • 录制 GIF

从 v2.1.199 开始，如果读取操作带有改变状态的参数（如 createIfEmpty、clear、save_to_disk），也会提示批准。

管理网站权限

网站级权限从 Chrome 扩展继承。在 Chrome 扩展设置中管理权限，可以控制 Claude 能浏览、点击和输入哪些网站。

运行 /chrome 可以随时：

  • 检查连接状态
  • 管理权限
  • 重新连接扩展
  • 选择要使用的已连接浏览器

如果连接了多个浏览器，Claude 会在浏览器操作开始时提示你选一个。

故障排除

未检测到扩展

  1. 验证扩展已安装并在 chrome://extensions 中启用
  2. 运行 claude --version 确认 Claude Code 是最新版
  3. 确认 Chrome 正在运行
  4. 运行 /chrome 选择”重新连接扩展程序”
  5. 如果仍然不行，重启 Claude Code 和 Chrome
Note

首次启用时，Claude Code 安装的本机消息传递主机配置文件需要 Chrome 启动时读取。如果第一次没检测到扩展，重启 Chrome 试试。

主机配置文件的位置：

  • macOS (Chrome)：~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
  • Linux (Chrome)：~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
  • Windows (Chrome)：注册表 HKCU\Software\Google\Chrome\NativeMessagingHosts\

Edge 的路径类似，把 Google/Chrome 换成 Microsoft/Edge。

浏览器无响应

  1. 检查是否有模态对话框（alert、confirm、prompt）阻止页面。JavaScript 对话框会阻止浏览器事件，手动关闭后告诉 Claude 继续
  2. 让 Claude 创建新标签页重试
  3. 在 chrome://extensions 中禁用并重新启用扩展

长会话连接断开

Chrome 扩展的 service worker 在不活动时可能进入空闲状态，导致连接断开。运行 /chrome 选择”重新连接扩展程序”即可。

常见错误消息

错误原因修复
”浏览器扩展程序未连接”本机消息传递主机无法到达扩展重启 Chrome 和 Claude Code，运行 /chrome 重新连接
”未检测到扩展程序”扩展未安装或已禁用在 chrome://extensions 安装或启用
”没有可用的标签页”Claude 在标签页准备好前尝试操作让 Claude 创建新标签页重试
”接收端不存在”扩展 service worker 进入空闲运行 /chrome 重新连接

Windows 特定问题

  • 命名管道冲突 (EADDRINUSE)：另一个进程占用了相同管道，重启 Claude Code，关闭可能使用 Chrome 的其他 Claude Code 会话
  • 本机消息传递主机错误：主机启动时崩溃，重新安装 Claude Code 以重新生成配置

小结

Chrome 集成把 Claude Code 从纯编码工具升级成了全栈调试利器。改完代码不用切窗口，一句话让 Claude 打开页面、测交互、读日志、截图分析，编码和测试在同一个工作流里完成。关键是它共享你的浏览器登录状态，操作已登录的网站不用折腾认证。日常前端开发、数据录入、网页测试，都能省下大量手动操作的时间。

上一篇
大型代码库与成本管理
下一篇
故障排查与常见问题