使用Claude Code进行浏览器自动化
Connect Claude Code to your browser to test web apps, debug with console logs, and automate browser tasks.
将 Claude Code 连接到您的浏览器，以测试网络应用程序、使用控制台日志进行调试以及自动化浏览器任务。
Chrome integration is in beta and currently works with Google Chrome only. It is not yet supported on Brave, Arc, or other Chromium-based browsers. WSL (Windows Subsystem for Linux) is also not supported.
Chrome 集成处于 beta 版本，目前仅支持 Google Chrome。它尚未在 Brave、Arc 或其他基于 Chromium 的浏览器上得到支持。Windows 子系统 for Linux (WSL) 也未受支持。
Claude Code integrates with the Claude in Chrome browser extension to give you browser automation capabilities directly from your terminal. Build in your terminal, then test and debug in your browser without switching contexts.
Claude Code 通过 Chrome 浏览器扩展集成，让你能直接从终端获得浏览器自动化功能。在终端中构建，然后在浏览器中测试和调试，无需切换上下文。
一，What the integration enables
集成带来的功能
With Chrome connected, you can chain browser actions with terminal commands in a single workflow. For example: scrape documentation from a website, analyze it, generate code based on what you learned, and commit the result.
连接 Chrome 后，你可以在单个工作流程中用终端命令串联浏览器操作。例如：从网站抓取文档、分析它、根据你的学习生成代码，并提交结果。
Key capabilities include:
主要功能包括：
Live debugging: Claude reads console errors and DOM state directly, then fixes the code that caused them
实时调试：Claude 直接读取控制台错误和 DOM 状态，然后修复导致这些问题的代码
Design verification: Build a UI from a Figma mock, then have Claude open it in the browser and verify it matches
设计验证：从 Figma 模型构建 UI，然后让 Claude 在浏览器中打开并验证其是否匹配，666
Web app testing: Test form validation, check for visual regressions, or verify user flows work correctly
网页应用测试：测试表单验证、检查视觉回归或验证用户流程是否正常工作
Authenticated web apps: Interact with Google Docs, Gmail, Notion, or any app you’re logged into without needing API connectors
认证网页应用：无需 API 连接器即可与 Google Docs、Gmail、Notion 或任何你已登录的应用进行交互
Data extraction: Pull structured information from web pages and save it locally
数据提取：从网页中提取结构化信息并保存到本地，666
Task automation: Automate repetitive browser tasks like data entry, form filling, or multi-site workflows
任务自动化：自动化重复的浏览器任务，如数据输入、表单填写或多站点工作流程
Session recording: Record browser interactions as GIFs to document or share what happened
会话录制：将浏览器交互记录为 GIF 动画，用于文档记录或分享发生的情况，666
二，Prerequisites 前提条件
Before using Claude Code with Chrome, you need:
在 Chrome 使用 Claude Code 之前，你需要：
Google Chrome browser Google Chrome 浏览器
Claude in Chrome extension version 1.0.36 or higher
Claude for Chrome 扩展版本 1.0.36 或更高版本
Claude Code CLI version 2.0.73 or higher
Claude Code CLI 版本 2.0.73 或更高版本
A paid Claude plan (Pro, Team, or Enterprise)
一个付费的 Claude 计划（Pro、Team 或 Enterprise）
三，How the integration works
集成工作原理
Claude Code communicates with Chrome through the Claude in Chrome browser extension. The extension uses Chrome’s Native Messaging API to receive commands from Claude Code and execute them in your browser.
This architecture lets Claude Code control browser tabs, read page content, and perform actions while you continue working in your terminal.
Claude Code 通过 Chrome 浏览器扩展与 Chrome 通信。该扩展使用 Chrome 的原生消息传递 API 接收来自 Claude Code 的命令，并在您的浏览器中执行它们。
这种架构允许 Claude Code 控制浏览器标签、读取页面内容，并在您继续在终端工作的同时执行操作。
When Claude encounters a login page, CAPTCHA, or other blocker, it pauses and asks you to handle it. You can provide credentials for Claude to enter, or log in manually in the browser. Once you’re past the blocker, tell Claude to continue and it picks up where it left off.
当 Claude 遇到登录页面、验证码或其他阻止器时，它会暂停并要求您处理。您可以提供凭证让 Claude 输入，或在浏览器中手动登录。一旦您通过阻止器，告诉 Claude 继续，它就会从之前的地方继续进行。
Claude opens new tabs for browser tasks rather than taking over existing ones. However, it shares your browser’s login state, so if you’re already signed into a site in Chrome, Claude can access it without re-authenticating.
Claude 为浏览器任务打开新标签页，而不是接管现有标签页。不过，它会共享你的浏览器登录状态，所以如果你已经在 Chrome 中登录了某个网站，Claude 可以直接访问它，无需重新认证。
The Chrome integration requires a visible browser window. When Claude performs browser actions, you’ll see Chrome open and navigate in real time. There’s no headless mode since the integration relies on your actual browser session with its login state.
Chrome 集成需要浏览器窗口可见。当 Claude 执行浏览器操作时，你会看到 Chrome 实时打开并导航。由于集成依赖于你实际的浏览器会话及其登录状态，因此没有无头模式。
注：有头 = 给人看的浏览器，无头 = 给代码/机器人用的浏览器，无头模式 就是把这个浏览器脑袋（图形界面）砍掉，只留下身体（渲染引擎 + JavaScript 执行引擎 + 网络请求能力），让它在后台偷偷干活，
你完全看不见任何窗口。但它干的事情和正常浏览器几乎一模一样
四，Set up the integration 设置集成
4.1 Update Claude Code 更新 Claude Code
Chrome integration requires a recent version of Claude Code. If you installed using the native installer, updates happen automatically. Otherwise, run:
Chrome 集成需要 Claude Code 的较新版本。如果你使用原生安装程序安装，更新会自动进行。否则，运行：
claude update
4.2 Start Claude Code with Chrome enabled
启动带有 Chrome 功能的 Claude Code
Launch Claude Code with the --chrome flag:
使用 --chrome 标志启动 Claude Code：
claude --chrome
4.3 Verify the connection 验证连接
Run /chrome to check the connection status and manage settings. If the extension isn’t detected, you’ll see a warning with a link to install it.
运行 /chrome 来检查连接状态和管理设置。如果未检测到扩展，您将看到一个带有安装链接的警告。
You can also enable Chrome integration from within an existing session using the /chrome slash command.
你也可以在现有会话中通过 /chrome 命令启用 Chrome 集成。
五，Try it out 试试看
Once connected, type this into Claude to see the integration in action:
连接后，在 Claude 中输入以下内容以查看集成效果：
Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear
去code.claude.com/docs，点击搜索框，输入“hooks”，然后告诉我出现的结果
Claude opens the page, clicks into the search field, types the query, and reports the autocomplete results. This shows navigation, clicking, and typing in a single workflow.
Claude 打开页面，点击搜索框，输入查询并显示自动完成结果。这展示了在单一工作流程中进行导航、Example workflows 示例工作流程。
六，Example workflows 示例工作流程
Claude can navigate pages, click and type, fill forms, scroll, read console logs and network requests, manage tabs, resize windows, and record GIFs. Run /mcp and click into claude-in-chrome to see the full list of available tools.
Claude 可以导航页面、点击和输入、填写表单、滚动、读取控制台日志和网络请求、管理标签页、调整窗口大小以及录制 GIF。运行 /mcp 并点击 claude-in-chrome 查看可用工具的完整列表。
The following examples show common patterns for browser automation.
以下示例展示了浏览器自动化的常见模式。
6.1，Test a local web application
测试本地网页应用
When developing a web app, ask Claude to verify your changes work correctly:
在开发网页应用时，请让 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?
我刚刚更新了登录表单验证。您可以打开localhost:3000，尝试提交带有无效数据的表单，并检查错误消息是否正确显示吗？
Claude navigates to your local server, interacts with the form, and reports what it observes.
Claude 将导航到您的本地服务器，与表单交互，并报告其观察结果。
6.2, Debug with console logs 使用控制台日志进行调试
If your app has issues, Claude can read console output to help diagnose problems:
如果您的应用存在问题，Claude 可以读取控制台输出以帮助诊断问题：
Open the dashboard page and check the console for any errors when the page loads.
打开dashboard页面，并在页面加载时检查控制台是否有任何错误。
Claude reads the console messages and can filter for specific patterns or error types.
Claude 读取控制台消息，并可以过滤特定模式或错误类型。
6.3, Automate form filling 自动填写表单
Speed up repetitive data entry tasks:
加快重复性数据录入任务：
I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to our CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.
我在contacts.csv中有一个客户联系人的电子表格。对于每一行，转到我们的CRM: crm.example.com，点击“添加联系人”，并填写姓名、电子邮件和电话字段。
Claude reads your local file, navigates the web interface, and enters the data for each record.
Claude 读取您的本地文件，导航网页界面，并为每条记录录入数据。
6.4,Draft content in Google Docs
在Google Docs 中撰写草稿内容
Use Claude to write directly in your documents without API setup:
使用 Claude 直接在您的文档中编写，无需 API 设置：
Draft a project update based on our recent commits and add it to my
Google Doc at docs.google.com/document/d/…
根据我们最近的提交起草一个项目更新，并将其添加到我的谷歌doc网址：docs.google.com/document/d/…
Claude opens the document, clicks into the editor, and types the content. This works with any web app you’re logged into: Gmail, Notion, Sheets, and more.
Claude 打开文档，点击进入编辑器并输入内容。这适用于你登录过的任何网页应用：Gmail、Notion、Sheets 等。
6.5,Extract data from web pages
从网页中提取数据
Pull structured information from websites:
从网站中提取结构化信息：
Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.
转到产品列表页面，提取每个项目的名称、价格和可用性。将结果保存为CSV文件。
Claude navigates to the page, reads the content, and compiles the data into a structured format.
Claude 浏览页面，读取内容，并将数据编译为结构化格式。
6.6,Run multi-site workflows 运行多站点工作流
Coordinate tasks across multiple websites:
协调跨多个网站的任务：
Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company on LinkedIn and add a
note about what they do.
检查我明天的会议日历，然后每次有外部与会者的会议，在领英上查找他们的公司，并添加他们所做的记录
Claude works across tabs to gather information and complete the workflow.
Claude 能在多个标签页间工作以收集信息并完成工作流程。
6.7，Record a demo GIF 录制演示 GIF
Create shareable recordings of browser interactions:
创建可分享的浏览器交互录制：
Record a GIF showing how to complete the checkout flow, from adding
an item to the cart through to the confirmation page.
记录一个GIF，显示如何完成结账流程，从向购物车添加商品到确认页面。
Claude records the interaction sequence and saves it as a GIF file.
Claude 将交互序列记录下来并保存为 GIF 文件。
七，Best practices 最佳实践
When using browser automation, keep these guidelines in mind:
在使用浏览器自动化时，请记住3条指南：
Modal dialogs can interrupt the flow: JavaScript alerts, confirms, and prompts block browser events and prevent Claude from receiving commands. If a dialog appears, dismiss it manually and tell Claude to continue.
模态对话框可能会中断流程：JavaScript 的警告、确认和提示会阻塞浏览器事件，并阻止 Claude 接收命令。如果出现对话框，请手动关闭并告诉 Claude 继续。
Use fresh tabs: Claude creates new tabs for each session. If a tab becomes unresponsive, ask Claude to create a new one.
使用新标签页：Claude 为每个会话创建新标签页。如果某个标签页无响应，请让 Claude 创建一个新的。
Filter console output: Console logs can be verbose. When debugging, tell Claude what patterns to look for rather than asking for all console output.
过滤控制台输出：控制台日志可能非常冗长。在调试时，告诉 Claude 要查找的特定模式，而不是请求所有控制台输出。
八，Troubleshooting 故障排除
8.1，Extension not detected 未检测到扩展
If Claude Code shows “Chrome extension not detected”:
如果 Claude Code 显示“未检测到 Chrome 扩展”：
8.1.1，Verify the Chrome extension (version 1.0.36 or higher) is installed
验证已安装 Chrome 扩展（版本 1.0.36 或更高版本）
8.1.2，Verify Claude Code is version 2.0.73 or higher by running claude --version
验证 Claude Code 版本是否为 2.0.73 或更高版本，请运行 claude --version
8.1.3，Check that Chrome is running
检查 Chrome 是否正在运行
8.1.4，Run /chrome and select “Reconnect extension” to re-establish the connection
运行 /chrome 并选择“重新连接扩展”以重新建立连接
8.1.5，If the issue persists, restart both Claude Code and Chrome
如果问题仍然存在，请重启 Claude Code 和 Chrome
8.2， Browser not responding 浏览器无响应
If Claude’s browser commands stop working:
如果 Claude 的浏览器命令停止工作：
Check if a modal dialog (alert, confirm, prompt) is blocking the page
检查是否有模态对话框（警告、确认、提示）阻止了页面
Ask Claude to create a new tab and try again
让 Claude 创建一个新标签页并重试
Restart the Chrome extension by disabling and re-enabling it
通过禁用和重新启用来重启 Chrome 扩展
8.3 First-time setup 首次设置
The first time you use the integration, Claude Code installs a native messaging host that allows communication between the CLI and Chrome. If you encounter permission errors, you may need to restart Chrome for the installation to take effect.
首次使用集成时，Claude Code 会安装一个本地消息主机，允许 CLI 和 Chrome 之间进行通信。如果你遇到权限错误，你可能需要重新启动 Chrome 以使安装生效。
九，Enable by default 默认启用
Chrome integration requires the --chrome flag each time you start Claude Code. To enable it by default, run /chrome and select “Enabled by default”.
Chrome 集成每次启动 Claude Code 时都需要 --chrome 标志。要默认启用它，请运行 /chrome 并选择“默认启用”。
Enabling Chrome by default increases context usage since browser tools are always loaded. If you notice increased context consumption, disable this setting and use --chrome only when needed.
默认启用 Chrome 会增加上下文使用量，因为浏览器工具始终处于加载状态。如果你发现上下文消耗量增加，请禁用此设置，并在需要时仅使用 --chrome 。
Site-level permissions are inherited from the Chrome extension. Manage permissions in the Chrome extension settings to control which sites Claude can browse, click, and type on. Run /chrome to see current permission settings.
站点级别的权限继承自 Chrome 扩展。在 Chrome 扩展设置中管理权限，以控制 Claude 可以浏览、点击和输入的网站。运行 /chrome 查看当前的权限设置。
小结：claude --chrome 或/chrome
