# Chrome 浏览器自动化 ## 安装 **独立脚本**：无需下载；该技能调用“.claude/tools/chrome-browser/chrome-browser.cjs”（需要 Node.js v18+）。 **MCP 集成**（用于完全自动化）： * **Chrome DevTools MCP** ：通常与环境捆绑在一起；确保已安装 Chrome/Chromium ([google.com/chrome]())。 * **Claude-in-Chrome** ：安装 Claude-in-Chrome 扩展并在需要时使用 `--chrome` 运行。 ## 备忘单和最佳实践 **测试：** 测试用户可见的行为，而不是实现。隔离测试（自己的存储/cookie）；使用 before/after 钩子进行登录或设置。模拟第三方网络而不是依赖实时服务。 **DevTools Recorder：** 在 Recorder 面板中记录流程；导出为 JSON 或测试脚本（Puppeteer、Nightwatch）。在 CI 中使用 Puppeteer Replay 进行重播。用于用户流量的性能测量。 **黑客：** 首选 Chrome DevTools MCP 进行测试/调试（始终开启）；使用 Claude-in-Chrome 进行身份验证会话（GIF、表单）。限制 GIF 帧（例如 100）以避免内存问题。使用“take_snapshot”作为结构；用于自定义检查的“evaluate_script”。 ## 认证和培训 **没有官方证书。** [Chrome for Developers – DevTools]()。前端大师/Udemy“掌握 Chrome 开发工具”。 **技能数据：**测试用户可见的行为；隔离测试；录音机+傀儡师重播；性能跟踪。 ## 挂钩和工作流程 **建议的挂钩：** 可选：测试后挂钩，用于捕获失败时的屏幕截图。当 **qa** 或 **frontend-pro** 路由用于浏览器测试时使用（将 chrome-browser 添加到上下文：`browser_testing` 或类似）。 **工作流程：** 与 **qa**（添加到上下文）或 **frontend-pro** 一起使用，用于 E2E/浏览器流程。流程：打开 URL → 交互（点击/填充）→ 快照或断言。请参阅“.claude/workflows/chrome-browser-skill-workflow.md”。 ## 两种集成 - 何时使用每种集成特色 | Chrome 开发者工具 MCP |克劳德·因·克罗姆 ---|---|--- **状态** | ✅ 随时可用 | ⚠️ 需要 `--chrome` 标志 **激活** |自动（内置）| `claude --chrome` \+ 扩展名 **身份验证会话** | ❌清新浏览器| ✅ 使用您的登录信息 **绩效追踪** | ✅ 完整的核心网络生命力 | ❌ 不可用 **网络巡检** | ✅ 详细了解身体通道 | ✅ 基础 **设备仿真** | ✅ 移动、地理定位、CPU | ❌ 有限 **GIF 录制** | ❌ 否 | ✅ 是（100 帧限制） **页面文本提取** |通过快照 | ✅ 专用工具 **最适合** |测试、调试、性能 |经过身份验证的工作流程、演示 ## 性能限制（内存保护） Chrome浏览器自动化可以录制GIF视频。为防止内存耗尽： * **GIF 帧限制：100 帧（硬限制）** * 每帧：5-20 KB（取决于复杂程度） * 100 帧 × 10 KB 平均 = 每次录制约 1 MB * 保持浏览器会话内存效率 **帧跟踪：** * 每帧典型操作：1-2（单击、滚动、键入） * 50 帧 = 25-50 个动作 * 100 帧 = 50-100 个动作 * 对于较长的工作流程，请使用多个录音 ### 决策指南需要测试/调试公共站点？ → Chrome 开发者工具 MCP 需要性能分析吗？ → Chrome 开发者工具 MCP 需要访问经过身份验证的应用程序？ → 克劳德·铬 (--chrome) 需要录制演示 GIF？ → 克劳德·铬 (--chrome) 需要与 Google 文档交互吗？ → 克劳德·铬 (--chrome) 需要设备/网络仿真？ → Chrome 开发者工具 MCP **克劳德-因-克罗姆：** * 经过身份验证的网络应用程序交互（Google Docs、Gmail、Notion） * 会话录制为 GIF * 自然语言元素查找 * 使用您保存的数据形成自动化 * 页面文本提取 * 快捷方式/工作流程执行 ## Chrome DevTools MCP（始终可用）无需设置 - 这些工具立即可用。 ### 第 1 步：列出并选择页面 // 列出所有打开的页面 mcp__chrome - devtools__list_pages(); // 选择要使用的页面 mcp__chrome - devtools__select_page({ pageId: 1 }); // 创建一个新页面 mcp__chrome - devtools__new_page({ url: 'https://example.com' }); ### 第 2 步：导航和交互 // 导航到 URL mcp__chrome - devtools__navigate_page({ url: 'https://example.com' }); // 获取可访问性快照（获取元素 UID） mcp__chrome - devtools__take_snapshot(); // 通过快照中的 UID 单击元素 mcp__chrome - devtools__click({ uid: 'ref_123' }); // 填写表单字段 mcp__chrome - devtools__fill({ uid: 'ref_456', value: 'test@example.com' }); // 填写整个表格 mcp__chrome - devtools__fill_form({ 元素：[ { uid: 'ref_456', 值: 'test@example.com' }, { uid: 'ref_789', 值: 'password123' }, ], }); ### 步骤 3：调试和检查 // 读取控制台消息 mcp__chrome - devtools__list_console_messages({ 类型: ['错误', '警告'] }); // 获取具体的控制台消息详细信息 mcp__chrome - devtools__get_console_message({ msgid: 1 }); // 列出网络请求 mcp__chrome - devtools__list_network_requests({ resourceTypes: ['xhr', 'fetch'] }); // 获取请求/响应详细信息 mcp__chrome - devtools__get_network_request({ reqid: 1 }); // 执行 JavaScript mcp__chrome - devtools__evaluate_script({ 函数: '() => 文档.标题', }); ### 步骤 4：性能分析 // 启动性能跟踪（页面重新加载） mcp__chrome - devtools__performance_start_trace({ 重新加载: true, autoStop: true }); // 或者手动停止 mcp__chrome - devtools__performance_start_trace({ 重新加载: true, autoStop: false }); // ... 与页面交互 ... mcp__chrome - devtools__performance_stop_trace(); // 分析具体洞察 mcp__chrome - devtools__performance_analyze_insight({ InsightSetId: 'navigation-1', InsightName: 'LCPBreakdown', }); ### 步骤 5：设备模拟 // 模拟移动设备 mcp__chrome - devtools__模拟（{ 视口：{ 宽度：375，身高：667，设备比例因子：2，是移动：正确，有触摸：真实， }, userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 如 Mac OS X)...', }); // 模拟慢速网络 mcp__chrome - devtools__emulate({ networkConditions: '慢 3G' }); // 模拟地理位置 mcp__chrome - devtools__模拟（{ 地理位置：{纬度：37.7749，经度：-122.4194}， }); ** ** ## Claude-in-Chrome（需要设置） ### 先决条件 1. **从 Chrome 网上应用店安装 Claude-in-Chrome 扩展** (v1.0.36+) 2. **使用标志启动 Claude** : `claude --chrome` 3. **Chrome 必须可见**（无头模式） 4. **需要付费 Claude 计划**（专业版、团队版或企业版） ### 第 1 步：获取选项卡上下文 // 始终首先调用以获取可用选项卡 mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true }) // 为此对话创建一个新选项卡 mcp__claude-in-chrome__tabs_create_mcp() ### 第 2 步：导航和阅读 // 导航到 URL mcp__claude-in-chrome__navigate({ url: "https://docs.google.com", tabId: 123 }) // 读取页面结构（可访问树） mcp__claude-in-chrome__read_page({ tabId: 123 }) // 通过自然语言查找元素 mcp__claude-in-chrome__find({ query: "登录按钮", tabId: 123 }) // 提取页面文本 mcp__claude-in-chrome__get_page_text({ tabId: 123 }) ### 第 3 步：互动 // 通过电脑工具点击、打字、截图 mcp__claude-in-chrome__computer({ 动作：“左键单击”，坐标：[100, 200], 标签编号：123 }) mcp__claude-in-chrome__computer({ 动作：“类型”，文本：“你好世界”，标签编号：123 }) mcp__claude-in-chrome__computer({ 动作：“屏幕截图”，标签编号：123 }) // 通过元素引用填充表单 mcp__claude-in-chrome__form_input({ 参考：“ref_1”，值：“test@example.com”，标签编号：123 }) ### 步骤 4：录制 GIF 演示 // 开始录音 mcp__claude-in-chrome__gif_creator({ 操作: "start_recording", tabId: 123 }) // 截图以捕获初始状态 mcp__claude-in-chrome__computer({ 操作：“屏幕截图”，tabId：123 }) // ...执行操作... // 截取最终截图 mcp__claude-in-chrome__computer({ 操作：“屏幕截图”，tabId：123 }) // 停止并导出 mcp__claude-in-chrome__gif_creator({ 操作: "stop_recording", tabId: 123 }) mcp__claude-in-chrome__gif_creator({ 动作：“导出”，下载：真实，文件名：“演示.gif”，标签编号：123 }) ### 记录最佳实践 ✓ 好的模式： * 登录流程：15-20帧（5-10个动作） * 填表：10-15帧（5-8个动作） * 导航演示：20-30 帧（10-15 个动作） * 完整工作流程：2-3 个录制，每个录制 30-50 帧 ✗ 不良模式： * 单次录制200+帧 * 等待加载（每秒添加 10+ 空帧） * 连续滚动（可以快速达到100+帧） * 多个同时录音 **如果达到 100 帧：** 1. 停止录音 2.导出当前GIF 3. 开始下一部分的新录音 4. 在文档中将录音链接在一起 ### 超时管理 * 默认超时：每次录音 30 秒 * 如果录制 >100 帧：使用多个 30 秒录制 * 不要等待缓慢加载（而是截图） * 保持快速行动（尽量减少等待） <最佳实践> ### Chrome 开发者工具 MCP 1. **始终先拍摄快照**以在单击/填充之前获取元素 UID 2. **在操作上使用 includeSnapshot: true** 来获取更新的状态 3. **按资源类型过滤网络请求**以避免噪音 4. **使用 filePath 参数将痕迹保存到文件**以供以后分析 ### 克劳德·铬 1. **首先调用tabs_context_mcp**获取有效的选项卡ID 2. **创建新选项卡**而不是重用现有选项卡 3. **在find之前使用read_page**来了解页面结构 4. **使用模式过滤控制台**以避免冗长 5. **手动关闭模式对话框** \- 它们阻止所有事件 ### 一般 1. **对于公共站点首选 Chrome DevTools MCP**（始终可用） 2. **仅在需要身份验证时才使用 Claude-in-Chrome** 3. **不要触发警报/确认/提示** \-它们会阻止浏览器事件 // 创建页面并导航 mcp__chrome - devtools__new_page({ url: 'https://example.com/login' }); // 拍摄快照以获取元素 UID mcp__chrome - devtools__take_snapshot(); // 填写登录表单 mcp__chrome - devtools__fill_form({ 元素：[ { uid: 'email_field', 值: 'test@example.com' }, { uid: 'password_field', value: 'testpass123' }, ], }); // 点击提交 mcp__chrome - devtools__click({ uid: 'submit_button' }); // 检查是否有错误 mcp__chrome - devtools__list_console_messages({ 类型: ['错误'] }); **性能审核 (Chrome DevTools MCP)** ： // 导航到页面 mcp__chrome - devtools__navigate_page({ url: 'https://example.com' }); // 通过重新加载运行性能跟踪 mcp__chrome - devtools__performance_start_trace({ 重新加载：正确，自动停止：真，文件路径: 'trace.json.gz', }); // 分析LCP故障 mcp__chrome - devtools__performance_analyze_insight({ InsightSetId: 'navigation-1', InsightName: 'LCPBreakdown', }); **Google 文档编辑 (Claude-in-Chrome)** ： // 获取选项卡上下文 mcp__claude-in-chrome__tabs_context_mcp({ createIfEmpty: true }) // 导航到 Google 文档（使用您的登录名） mcp__claude-in-chrome__navigate({ 网址：“https://docs.google.com/document/d/YOUR_DOC_ID”，标签编号：123 }) // 读取页面以查找元素 mcp__claude-in-chrome__read_page({ tabId: 123 }) // 单击文档并输入 mcp__claude-in-chrome__computer({ 动作：“左键单击”，参考：“文档正文”，标签编号：123 }) mcp__claude-in-chrome__computer({ 动作：“类型”， text: "今天的会议记录...", 标签编号：123 }) **录制演示 GIF (Claude-in-Chrome)** : // 开始录音 mcp__claude-in-chrome__gif_creator({ 操作: "start_recording", tabId: 123 }) // 初始截图 mcp__claude-in-chrome__computer({ 操作：“屏幕截图”，tabId：123 }) // 导航 mcp__claude-in-chrome__navigate({ url: "https://example.com/product", tabId: 123 }) mcp__claude-in-chrome__computer({ 操作：“屏幕截图”，tabId：123 }) // 点击添加到购物车 mcp__claude-in-chrome__computer({ 操作：“left_click”，参考：“add_to_cart”，tabId：123 }) mcp__claude-in-chrome__computer({ 操作：“屏幕截图”，tabId：123 }) // 停止并导出 mcp__claude-in-chrome__gif_creator({ 操作: "stop_recording", tabId: 123 }) mcp__claude-in-chrome__gif_creator({ 动作：“导出”，下载：真实，文件名：“添加到购物车流.gif”，选项：{ showClickIndicators：true，showProgressBar：true }，标签编号：123 }) ## 可用工具 ### Chrome DevTools MCP（始终可用）工具|描述 ---|--- `mcp__chrome-devtools__list_pages` |列出所有浏览器页面 `mcp__chrome-devtools__select_page` |选择操作页面 `mcp__chrome-devtools__new_page` |使用 URL 创建新页面 `mcp__chrome-devtools__close_page` |关闭页面 `mcp__chrome-devtools__navigate_page` |导航、重新加载、后退/前进 `mcp__chrome-devtools__take_snapshot` |获取带有 UID 的可访问性树 `mcp__chrome-devtools__take_screenshot` |捕获页面/元素屏幕截图 `mcp__chrome-devtools__click` |通过 UID 单击元素 `mcp__chrome-devtools__fill` |通过UID填写输入/选择 `mcp__chrome-devtools__fill_form` |填写多个表单元素 `mcp__chrome-devtools__hover` |将鼠标悬停在元素上 `mcp__chrome-devtools__drag` |将元素拖到另一个元素上 `mcp__chrome-devtools__press_key` |按键或组合 `mcp__chrome-devtools__evaluate_script` |执行JavaScript `mcp__chrome-devtools__handle_dialog` |接受/拒绝对话框 `mcp__chrome-devtools__upload_file` |通过输入上传文件 `mcp__chrome-devtools__wait_for` |等待文字出现 `mcp__chrome-devtools__resize_page` |调整浏览器窗口大小 `mcp__chrome-devtools__emulate` |设备/网络/地理仿真 `mcp__chrome-devtools__list_console_messages` |列出控制台输出 `mcp__chrome-devtools__get_console_message` |获取消息详情 `mcp__chrome-devtools__list_network_requests` |列出网络请求 `mcp__chrome-devtools__get_network_request` |获取请求/响应详细信息 `mcp__chrome-devtools__performance_start_trace` |开始演奏录音 `mcp__chrome-devtools__performance_stop_trace` |停止演奏录音 `mcp__chrome-devtools__performance_analyze_insight` |分析绩效洞察 ### Claude-in-Chrome（需要 `--chrome` 标志）工具|描述 ---|--- `mcp__claude-in-chrome__tabs_context_mcp` |获取选项卡上下文（首先调用！） `mcp__claude-in-chrome__tabs_create_mcp` |创建新选项卡 `mcp__claude-in-chrome__navigate` |导航至网址 `mcp__claude-in-chrome__read_page` |获取可访问性树 `mcp__claude-in-chrome__find` |按描述查找元素 `mcp__claude-in-chrome__get_page_text` |提取页面文本 `mcp__claude-in-chrome__computer` |单击、键入、屏幕截图、滚动 `mcp__claude-in-chrome__form_input` |填写表单字段 `mcp__claude-in-chrome__fill_form` |填写多个字段 `mcp__claude-in-chrome__javascript_tool` |执行 JavaScript `mcp__claude-in-chrome__read_console_messages` |读取控制台日志 `mcp__claude-in-chrome__read_network_requests` |读取网络请求 `mcp__claude-in-chrome__resize_window` |调整浏览器窗口大小 `mcp__claude-in-chrome__upload_image` |将图像上传到元素 `mcp__claude-in-chrome__gif_creator` |录制/导出 GIF `mcp__claude-in-chrome__shortcuts_list` |列出可用的快捷方式 `mcp__claude-in-chrome__shortcuts_execute` |执行快捷方式 `mcp__claude-in-chrome__update_plan` |目前计划待批准 ## 代理集成该技能自动分配给： * **开发人员** \- 测试、调试、数据提取 * **qa** \- 自动化测试、表单验证、用户流程验证 * **安全架构师** \- 安全测试、身份验证流程 * **devops-troubleshooter** \- 生产调试、监控 * **研究员** \- 网页抓取、数据提取 ## 相关工作流程有关有效使用此技能的指导，请参阅相应的工作流程： * **工作流程文件** : `.claude/workflows/chrome-browser-skill-workflow.md` * **何时使用** ：当您需要浏览器自动化来进行测试、调试、经过身份验证的工作流程或演示录制时 * **整合方法**： * 斜杠命令调用（`/chrome-browser`） * 代理技能分配（来自 frontmatter） * 直接执行脚本 **两种集成选项：** * **Chrome DevTools MCP**（始终可用）- 用于公共站点测试、性能分析、调试 * **Claude-in-Chrome** （需要 `--chrome` 标志） - 对于经过身份验证的应用程序工作流程、GIF 录制该工作流提供了调用方法、代理分配和内存集成模式的示例。 ## 故障排除 ### Claude-in-Chrome“浏览器扩展未连接” **症状**：当使用 `--chrome` 标志时，尽管安装了扩展，工具仍返回“浏览器扩展未连接”错误。 **根本原因**：Claude.app（桌面）和 Claude Code 注册**竞争本机消息传递主机**。当两者都安装时，Chrome 扩展程序会连接到最后注册的那个，从而导致连接失败。 **诊断**： 1.检查Claude.app和Claude Code是否都安装了 2. 在 Windows 上：检查 `%APPDATA%\Claude\ChromeNativeHost\com.anthropic.claude_browser_extension.json` 3. 在 macOS 上：检查 `~/Library/Application Support/Claude/ChromeNativeHost/` **已知错误**：这记录在 GitHub 问题中： * [#15336]() \- Windows Native Messaging Host 未安装 * [#14894]() \- 在 macOS 上重新连接扩展失败 * [#20790]() \- 扩展连接到 Claude.app 而不是 Claude Code **解决方法 (macOS)**： # 禁用 Claude.app 的本机主机（保留文件以进行恢复） cd ~/Library/Application\ Support/Google/Chrome/NativeMessagingHosts/ mv com.anthropic.claude_browser_extension.json com.anthropic.claude_browser_extension.json.disabled # 完全重新启动 Chrome（退出并重新打开） # 然后使用 --chrome 标志启动 Claude Code **解决方法 (Windows)**：未完整记录。潜在的方法： # 重命名配置以禁用 Claude.app 的注册 cd $env:APPDATA\Claude\ChromeNativeHost 任 com.anthropic.claude_browser_extension.json com.anthropic.claude_browser_extension.json.disabled # 重新启动 Chrome 并重试 **替代**：使用 **Chrome DevTools MCP** - 它无需扩展即可工作，并为大多数用例提供类似的功能。 ### 模态对话框阻止事件 **症状**：触发警报/确认/提示后，所有浏览器工具停止响应。 **原因**：JavaScript 模式对话框阻止所有浏览器事件，包括扩展通信。 **修复**：用户必须手动关闭浏览器中的对话框。避免在自动化脚本中触发对话框。 ## 内存协议（强制） **开始之前：** 猫.克劳德/上下文/内存/learnings.md **完成后：** * 新模式 -> `.claude/context/memory/learnings.md` * 发现问题 -> `.claude/context/memory/issues.md` * 做出决定 -> `.claude/context/memory/decisions.md` > 假设中断：您的上下文可能会重置。如果它不在记忆中，那么它就没有发生。

Chrome浏览器

包含技能