Claude Code 平台集成

Chrome 扩展

3 分钟阅读

将 Claude Code 与 Chrome 配合使用

将 Claude Code 连接到你的 Chrome 浏览器，以测试 Web 应用、使用控制台日志调试、自动化填写表单，以及从网页提取数据。

Claude Code 与 Claude in Chrome 浏览器扩展集成，让你可以从 CLI 或 VS Code 扩展获得浏览器自动化能力。编写代码，然后在浏览器中测试和调试，无需切换上下文。

Claude 为浏览器任务打开新标签页，并共享你的浏览器登录状态，因此它可以访问你已登录的任何网站。浏览器操作在可见的 Chrome 窗口中实时运行。当 Claude 遇到登录页面或 CAPTCHA 时，它会暂停并要求你手动处理。

Chrome 集成适用于 Google Chrome 和 Microsoft Edge。目前尚不支持 Brave、Arc 或其他基于 Chromium 的浏览器。Windows Subsystem for Linux (WSL) 也不支持。

功能

连接 Chrome 后，你可以将浏览器操作与编码任务串联在一个工作流中：

实时调试：直接读取控制台错误和 DOM 状态，然后修复导致它们的代码
设计验证：从 Figma 模型构建 UI，然后在浏览器中打开以验证其是否匹配
Web 应用测试：测试表单验证、检查视觉回归，或验证用户流程
已认证的 Web 应用：与 Google Docs、Gmail、Notion 或任何你已登录的应用交互，无需 API 连接器
数据提取：从网页中提取结构化信息并保存到本地
任务自动化：自动化重复的浏览器任务，如数据录入、表单填写或多站点工作流
会话录制：将浏览器交互录制为 GIF，以记录或分享发生了什么

前提条件

在使用 Claude Code 与 Chrome 之前，你需要：

Google Chrome 或 Microsoft Edge 浏览器
Claude in Chrome 扩展 1.0.36 或更高版本，可在两个浏览器的 Chrome Web Store 中获取
Claude Code 2.0.73 或更高版本
直接的 Anthropic 套餐（Pro、Max、Team 或 Enterprise）

Chrome 集成不适用于第三方提供商，如 Amazon Bedrock、Google Cloud 的 Agent Platform 或 Microsoft Foundry。如果你仅通过第三方提供商访问 Claude，你需要一个单独的 claude.ai 账户才能使用此功能。

在 CLI 中开始使用

使用 Chrome 启动 Claude Code

使用 --chrome 标志启动 Claude Code：

claude --chrome

你也可以在现有会话中通过运行 /chrome 来启用 Chrome。

让 Claude 使用浏览器

此示例导航到页面、与其交互并报告发现的内容，全部从你的终端或编辑器完成：

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

随时运行 /chrome 以检查连接状态、管理权限、重新连接扩展，或选择要使用的已连接浏览器。如果浏览器操作开始时连接了多个浏览器，Claude 会提示你选择一个。

对于 VS Code，请参见 VS Code 中的浏览器自动化。

默认启用 Chrome

为了避免每次会话都传递 --chrome，请运行 /chrome 并选择 "Enabled by default"。

在 VS Code 扩展中，只要安装了 Chrome 扩展，Chrome 就可用。无需额外的标志。

在 CLI 中默认启用 Chrome 会增加上下文使用量，因为浏览器工具始终处于加载状态。如果你注意到上下文消耗增加，请禁用此设置，仅在需要时使用 --chrome。

管理站点权限

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

规划模式中的浏览器工具

在 plan mode 中，仅读取页面或浏览器状态的浏览器工具调用无需权限提示即可运行，而更改状态的调用会提示请求批准。

只读调用：read_page、get_page_text、find、读取控制台消息或网络请求，以及截屏
状态更改调用：点击、输入、导航、标签页和窗口管理，以及录制 GIF

从 v2.1.199 开始，一个原本只读的调用如果设置了状态更改输入标志（如 tabs_context_mcp 上的 createIfEmpty、控制台和网络读取器上的 clear，或截屏上的 save_to_disk），也会提示请求批准。browser_batch 调用仅当其中的每个操作都是只读时才会无提示运行。

示例工作流

这些示例展示了将浏览器操作与编码任务相结合的常见方式。运行 /mcp 并选择 claude-in-chrome 以查看可用的浏览器工具完整列表。

测试本地 Web 应用

开发 Web 应用时，请 Claude 验证你的更改是否正确工作：

I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?

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

使用控制台日志调试

Claude 可以读取控制台输出以帮助诊断问题。告诉 Claude 要查找的模式，而不是要求所有控制台输出，因为日志可能很冗长：

Open the dashboard page and check the console for any errors when
the page loads.

Claude 读取控制台消息，并可以筛选特定模式或错误类型。

自动化表单填写

加速重复的数据录入任务：

I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to the CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.

Claude 读取你的本地文件，导航 Web 界面，并为每条记录输入数据。

在 Google Docs 中起草内容

使用 Claude 直接在文档中撰写内容，无需 API 设置：

Draft a project update based on the recent commits and add it to my
Google Doc at docs.google.com/document/d/abc123

Claude 打开文档，点击进入编辑器，并输入内容。这适用于任何你已登录的 Web 应用：Gmail、Notion、Sheets 等。

从网页提取数据

从网站提取结构化信息：

Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.

Claude 导航到页面，读取内容，并将数据编译为结构化格式。

运行多站点工作流

跨多个网站协调任务：

Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company website and add a note
about what they do.

Claude 跨标签页收集信息并完成工作流。

录制演示 GIF

创建可分享的浏览器交互录制：

Record a GIF showing how to complete the checkout flow, from adding
an item to the cart through to the confirmation page.

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

故障排除

扩展未检测到

如果 Claude Code 无法检测到 Chrome 扩展：

验证 Chrome 扩展已安装并在 chrome://extensions 中启用
通过运行 claude --version 验证 Claude Code 是否已更新
检查 Chrome 是否正在运行
运行 /chrome 并选择 "Reconnect extension" 以重新建立连接
如果问题仍然存在，请重启 Claude Code 和 Chrome

首次启用 Chrome 集成时，Claude Code 会安装一个原生消息主机配置文件。Chrome 在启动时读取此文件，因此如果首次尝试时未检测到扩展，请重启 Chrome 以加载新配置。

从 v2.1.199 开始，Claude Code 仅在首次安装时打开浏览器标签页提示你连接扩展。之后重写配置文件的会话（例如在切换 Claude Code 构建版本或配置目录后）不会重新打开它。

如果连接仍然失败，请验证主机配置文件是否存在于：

对于 Chrome：

macOS：~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
Linux：~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
Windows：在 Windows 注册表中检查 HKCU\Software\Google\Chrome\NativeMessagingHosts\

对于 Edge：

macOS：~/Library/Application Support/Microsoft Edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
Linux：~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
Windows：在 Windows 注册表中检查 HKCU\Software\Microsoft\Edge\NativeMessagingHosts\

浏览器无响应

如果 Claude 的浏览器命令停止工作：

检查是否有模态对话框（alert、confirm、prompt）阻止了页面。JavaScript 对话框会阻塞浏览器事件并阻止 Claude 接收命令。手动关闭对话框，然后告诉 Claude 继续。
让 Claude 创建一个新标签页并重试
通过在 chrome://extensions 中禁用并重新启用 Chrome 扩展来重启它

长时间会话期间连接断开

Chrome 扩展的服务工作者在长时间会话期间可能会进入空闲状态，从而断开连接。如果浏览器工具在一段时间不活动后停止工作，请运行 /chrome 并选择 "Reconnect extension"。

Windows 特定问题

在 Windows 上，你可能会遇到：

命名管道冲突 (EADDRINUSE)：如果另一个进程正在使用相同的命名管道，请重启 Claude Code。关闭任何可能正在使用 Chrome 的其他 Claude Code 会话。
原生消息主机错误：如果原生消息主机在启动时崩溃，请尝试重新安装 Claude Code 以重新生成主机配置。

常见错误消息

这些是最常见的错误及其解决方法：

错误	原因	解决方法
"Browser extension is not connected"	原生消息主机无法访问扩展	重启 Chrome 和 Claude Code，然后运行 `/chrome` 重新连接
"Extension not detected"	Chrome 扩展未安装或已禁用	在 `chrome://extensions` 中安装或启用扩展
"No tab available"	Claude 尝试在标签页就绪之前执行操作	让 Claude 创建一个新标签页并重试
"Receiving end does not exist"	扩展服务工作者进入空闲状态	运行 `/chrome` 并选择 "Reconnect extension"

另请参阅

Computer use：当任务无法在浏览器中完成时，控制原生 macOS 应用
在 VS Code 中使用 Claude Code：VS Code 扩展中的浏览器自动化
CLI 参考：包含 --chrome 的命令行标志
常见工作流：更多使用 Claude Code 的方式
数据与隐私：Claude Code 如何处理你的数据
Claude in Chrome 入门：Chrome 扩展的完整文档，包括快捷方式、调度和权限