English ← MyDocs

文档索引

在此获取完整文档索引：https://code.claude.com/docs/llms.txt 使用此文件发现所有可用页面，然后再进一步探索。

在 Chrome 中使用 Claude Code（测试版）

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

Claude Code 与 Claude in Chrome 浏览器扩展集成，为你提供从 CLI 或 VS Code 扩展进行浏览器自动化的能力。构建代码后，无需切换上下文即可在浏览器中测试和调试。

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

Note

Chrome 集成目前处于测试版，适用于 Google Chrome 和 Microsoft Edge。暂不支持 Brave、Arc 或其他基于 Chromium 的浏览器。WSL（Windows Subsystem for Linux）也不受支持。

功能

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

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

前提条件

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

Note

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

在 CLI 中开始使用

  1. 启动带 Chrome 的 Claude Code

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

    claude --chrome

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

  2. 让 Claude 使用浏览器

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

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

随时运行 /chrome 来检查连接状态、管理权限或重新连接扩展。

关于 VS Code，请参阅 VS Code 中的浏览器自动化。

默认启用 Chrome

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

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

Note

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

管理站点权限

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

示例工作流

这些示例展示了将浏览器操作与编码任务结合的常见方式。运行 /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 extension not detected"：

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

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

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

对于 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 的浏览器命令停止工作：

  1. 检查是否有模态对话框（alert、confirm、prompt）阻止了页面。JavaScript 对话框会阻止浏览器事件并阻止 Claude 接收命令。手动关闭对话框，然后告诉 Claude 继续。
  2. 让 Claude 创建新标签页并重试
  3. 通过在 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"

另请参阅