Claude Code 控制 Chrome 浏览器

简介

Claude Code 内置原生 Chrome 集成能力，搭配官方 Chrome 扩展 Claude in Chrome，可以直接操控本机 Chrome 浏览器。无需额外 Puppeteer/Playwright，用来做网页调试、表单操作、页面截图、读取控制台日志、前端页面测试。

底层基于 MCP，属于内置 MCP 服务 claude-in-chrome。
前置：安装 Claude Code CLI，Chrome 浏览器。

区分两种方案

官方原生集成（推荐）：Claude in Chrome 扩展，官方原生，开箱即用，复用你Chrome已登录状态。

第三方 Chrome DevTools MCP：Google 提供的MCP服务，能力更强，性能采集、Lighthouse、网络抓包，属于额外MCP插件。

一、官方原生 Chrome 集成（Claude in Chrome）

功能清单

打开URL、新建标签、页面跳转
页面点击、输入文字、填写表单、下拉选择
页面截图、读取DOM文本
获取Console控制台报错、网络请求
执行页面JS脚本
会话自动创建标签分组，会话结束可自动清理标签页
遇到验证码、登录二次验证时自动暂停，等待人工处理

安装步骤

Chrome网上应用店安装扩展：Claude in Chrome
启动 Claude Code CLI 时增加 --chrome 参数，启用浏览器能力

claude --chrome

首次启动会弹出引导，完成权限确认。
进入会话后，执行斜杠命令管理Chrome连接：

/chrome

在 /chrome 面板可开启 Enabled by default，后续不用每次加 --chrome 参数。

开启默认启用后，CLI与VS Code插件共用该配置。

会话内调用方式

使用 @browser 标记，告知Claude调用浏览器能力。

示例：

@browser 打开 http://localhost:3000，点击登录按钮，账号框输入admin，截图首页

@browser 读取页面console报错，输出markdown清单

@browser 访问项目页面，检查页面元素，找出交互异常

Chrome相关斜杠命令

/chrome             # 查看Chrome连接状态、切换浏览器、管理权限、启用默认开关

查看浏览器可用工具清单：

/mcp list
# claude-in-chrome 即为内置浏览器MCP服务

二、第三方 Chrome DevTools MCP（增强浏览器能力）

适合性能分析、Lighthouse、网络请求深度调试。

配置示例，写入 `.claude/settings.json`

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

保存后执行：

/mcp restart

Chrome DevTools MCP 额外能力：

录制性能追踪、Core Web Vitals 性能指标
Lighthouse 页面审计
模拟移动端视口
导出HAR网络请求包
页面内存快照

调用示例：

调用MCP chrome-devtools，打开localhost:3000，执行Lighthouse性能审计，输出报告

三、典型完整工作流

启动会话并开启Chrome：claude --chrome
开发前端代码，修改页面
指令：@browser 访问localhost:3000，点击提交表单，查看控制台报错，截图
Claude自动操作Chrome，返回页面报错与截图信息
根据浏览器返回结果，继续修复前端代码

四、权限与控制模式

浏览器操作同样遵循当前会话模式（Manual模式下，浏览器操作会请求人工审批）
复用本机Chrome登录态，可访问已登录后台系统
遇到人机验证、验证码，Claude会暂停，等待你手动完成验证后继续执行
.claude/rules 规则可以限制浏览器访问域名

五、适用场景

✅ 推荐场景

本地前端项目开发、页面交互测试
调试页面JS报错，查看网络请求
表单自动化测试、UI回归截图
网页信息提取、文档抓取

❌ 不推荐场景

大规模爬虫、高频批量访问网站（容易触发网站风控）
无人值守长时间自动化（验证码、风控会中断任务）

六、常见问题

/chrome 提示未检测到扩展

Chrome浏览器安装 Claude in Chrome 扩展；
确认扩展已启用；重启Chrome与Claude会话，执行 /clear。

浏览器操作没有响应

检查Chrome是否正常运行；
执行 /chrome 查看连接状态；
确认当前模式不是Plan模式（Plan模式禁止执行交互操作）。

开启默认Chrome后会话启动变慢
开启默认启用会提前加载浏览器工具指令，增加token消耗；不需要时关闭默认开关，按需使用 @browser。

安全提示

Claude Code 可以操控你登录的Chrome，不要在自动模式下访问银行、账号敏感后台。
浏览器操作建议保持 Manual 模式，每次交互动作人工确认。
不要让Claude自动填写密码，敏感表单操作手动介入。
第三方MCP浏览器插件，仔细评估权限，优先官方方案。

简介