Claude Code 控制Chrome浏览器完全指南：自然语言操控网页
Claude Code的Chrome集成功能，让你直接从命令行或VS Code控制浏览器。核心优势：共享浏览器登录状态，无需额外API密钥或重新认证。
核心能力
| 能力 | 说明 |
|---|
| 导航 | 打开网页、点击按钮、填写表单 |
| 读取 | 浏览器控制台日志、网络请求、DOM状态 |
| 交互 | 与已登录网站协作（Gmail、Notion、Google Docs等） |
| 录制 | 浏览器操作录为GIF |
| 多标签 | 在多个标签页之间协同工作 |
安装与准备
前置条件
| 条件 | 说明 |
|---|
| Claude Code版本 | v2.0.73或更高 |
| Chrome扩展版本 | Claude in Chrome v1.0.36或更高 |
| Anthropic账户 | 需要Pro/Max/Teams/Enterprise |
| 不支持 | Amazon Bedrock/Google Vertex AI/Microsoft Foundry用户 |
安装步骤
| 步骤 | 操作 |
|---|
| 1 | Chrome Web Store搜索Claude → 添加至Chrome → 重启浏览器 |
| 2 | 安装/更新Claude Code（CLI或VS Code扩展） |
| 3 | 首次运行扩展自动安装Native Messaging Host |
启动与连接
CLI中启动
bash# 推荐方式
claude --chrome
# 已有会话中启用
/chrome
# 设为默认（会增加上下文消耗）
/chrome → 选择 "Enabled by default"
VS Code中使用
@browser 打开 localhost:3000，检查控制台是否有错误
检查连接状态
提示技巧
| 技巧 | 说明 |
|---|
| 描述清晰逐步 | "先打开网址，然后点击搜索框，输入XXX并告诉我结果" |
| 结合本地文件 | 读取CSV批量操作 |
| 长任务分步 | Claude会分步执行并报告进度 |
7个实用示例
示例1：简单导航与交互
去到 https://www.baidu.com，点击搜索框，输入 "python"，告诉我出现的搜索结果。
示例2：本地网页测试与调试
我刚更新了登录表单验证。请打开 localhost:3000，用无效数据提交表单，检查错误消息是否正确显示，并查看控制台日志。
示例3：表单自动化（结合本地文件）
我有一个contacts.csv文件，里面有客户联系方式。对于每一行，打开crm.example.com，点击"添加联系人"，填写姓名、邮箱和电话，然后提交。
示例4：Google Docs等已登录网站操作
根据最近的Git提交，起草一份项目更新，并添加到我的Google Doc（网址：docs.google.com/document/d/abc123）。
示例5：数据提取与保存
打开产品列表页面，提取每个商品的名称、价格和库存状态，保存为CSV文件。
示例6：录制演示GIF
录制一个GIF，展示从购物车添加商品到结账确认的完整流程。
示例7：多站点工作流
查看我明天的日历，对于每个有外部参会者的会议，查找他们公司的网站并添加备注。
速查表
| 命令/操作 | 说明 |
|---|
claude --chrome | 带Chrome启动 |
/chrome | 查看/管理连接状态 |
@browser | VS Code中引用浏览器 |
| 导航 | 打开网址 |
| 交互 | 点击、输入、滚动 |
| 读取 | DOM、控制台、网络请求 |
| 自动化 | 表单填写、数据提取 |
| 录制 | GIF演示 |
总结
一句话总结：Claude Code + Chrome = 自然语言控制浏览器——共享登录状态、7类实用场景、CLI和VS Code双入口，Beta阶段需Pro以上账户。
