连接已打开的 Chrome 会话做自动化：通过 CDP…

当需要让 AI agent 直接操控你正在运行的 Chrome、复用已登录标签和当前页面状态时，用 CDP 连接实时浏览器会话。

适用场景

解决思路

1. 通过 CDP 连接正在运行的 Chrome，而不是启动新的隔离浏览器；使用本技能操作你已打开、已登录的标签，保留 logins、cookies 和当前页面状态。
2. 利用持久 daemon：每个 tab 一个 WebSocket daemon；"Allow debugging" 模态框只出现一次，不会每条命令都出现。
3. 无需 npm install：只需要 Node.js 22+。
4. 支持 100+ tabs：daemon 复用使大量打开标签可靠工作。
5. 支持跨源 iframe：`type` 命令在跨源 iframe 中也可用。
6. 作为 pi skill 安装：运行 `pi install git:github.com/pasky/chrome-cdp-skill@v1.0.1`。
7. 手动安装（Amp、Claude Code、Cursor、Codex 等）：运行 `git clone https://github.com/pasky/chrome-cdp-skill`，然后将 `skills/chrome-cdp/` 目录复制到你的 agent 加载上下文的位置。
8. 在 Chrome 中启用远程调试：打开 Chrome 并访问 `chrome://inspect/#remote-debugging`，切换 `"Enable remote debugging"` 开关；无需 flags，也无需重启 Chrome。
9. 浏览器自动检测：脚本自动检测 macOS、Linux、Windows 上的 Chrome、Chromium、Brave、Edge、Vivaldi；非标准安装时设置 `export CDP_PORT_FILE=/path/to/DevToolsActivePort`。
10. 统一入口：所有命令使用 `scripts/cdp.mjs` 作为入口点；`<target>` 是 `list` 显示的 targetId 的唯一前缀。
11. 列出打开的标签：运行 `node scripts/cdp.mjs list`；输出包含 targetId 前缀、URL 和标题。
12. 截图一个标签：运行 `node scripts/cdp.mjs shot A1B2`；保存截图到 runtime dir，并打印文件路径。
13. 获取可访问性树（语义快照）：运行 `node scripts/cdp.mjs snap A1B2`；返回紧凑、语义化的 accessibility tree，最适合理解页面结构。
14. 获取完整 HTML 或局部 HTML：运行 `node scripts/cdp.mjs html A1B2` 获取整页 HTML；运行 `node scripts/cdp.mjs html A1B2 ".main-content"` 按 CSS 选择器限定；运行 `node scripts/cdp.mjs html A1B2 "#article-body"` 按 ID 限定。
15. 执行 JavaScript：运行 `node scripts/cdp.mjs eval A1B2 "document.title"`；运行 `node scripts/cdp.mjs eval A1B2 "window.location.href"`；运行 `node scripts/cdp.mjs eval A1B2 "document.querySelectorAll('a').length"`。
16. 导航到 URL：运行 `node scripts/cdp.mjs nav A1B2 https://example.com`；导航并等待页面加载。
17. 查看网络资源计时：运行 `node scripts/cdp.mjs net A1B2`；显示当前页面的 network resource timing。
18. 点击元素：运行 `node scripts/cdp.mjs click A1B2 "button.submit"`；运行 `node scripts/cdp.mjs click A1B2 "#login-btn"`；运行 `node scripts/cdp.mjs click A1B2 "[data-testid='confirm']"`。
19. 按坐标点击：运行 `node scripts/cdp.mjs clickxy A1B2 320 480`；按 CSS 像素坐标（x=320，y=480）点击。
20. 输入文本：运行 `node scripts/cdp.mjs type A1B2 "Hello, world!"`；在当前聚焦元素输入，且在跨源 iframe 中也可用。
21. 加载更多（点击直到消失）：运行 `node scripts/cdp.mjs loadall A1B2 "button.load-more"`；持续点击该选择器，直到它从 DOM 中消失。
22. 打开新标签：运行 `node scripts/cdp.mjs open`；或运行 `node scripts/cdp.mjs open https://example.com`；注意会触发 Chrome 的 `"Allow"` 提示。
23. 停止 daemon：运行 `node scripts/cdp.mjs stop` 停止所有 daemons；运行 `node scripts/cdp.mjs stop A1B2` 停止指定标签的 daemon。
24. 原始 CDP 命令透传：运行 `node scripts/cdp.mjs evalraw A1B2 "Page.getFrameTree"`；运行 `node scripts/cdp.mjs evalraw A1B2 "Runtime.evaluate" '{"expression":"1+1"}'`。
25. 读取已登录页面的模式：先运行 `node scripts/cdp.mjs list` 找到目标标签；再用 `node scripts/cdp.mjs snap D4E5` 获取语义视图；或用 `node scripts/cdp.mjs html D4E5 ".email-list"` 获取特定区域 HTML。
26. 填写并提交表单的模式：先运行 `node scripts/cdp.mjs click A1B2 "input[name='search']"` 点击输入框；再运行 `node scripts/cdp.mjs type A1B2 "my search query"` 输入；再运行 `node scripts/cdp.mjs click A1B2 "button[type='submit']"` 点击提交；最后运行 `node scripts/cdp.mjs shot A1B2` 截图验证结果。
27. 用 JavaScript 提取数据的模式：用 `node scripts/cdp.mjs eval A1B2 "Array.from(document.querySelectorAll('a')).map(a => a.href)"` 获取所有链接 href；用 `node scripts/cdp.mjs eval A1B2 "document.querySelector('.price').textContent.trim()"` 获取特定元素文本；用 `node scripts/cdp.mjs eval A1B2 "Array.from(document.querySelectorAll('table tr')).map(row => Array.from(row.querySelectorAll('td,th')).map(cell => cell.textContent.trim()))"` 获取表格数据为 JSON。
28. 导航并等待的模式：先运行 `node scripts/cdp.mjs nav A1B2 https://news.ycombinator.com`，然后运行 `node scripts/cdp.mjs snap A1B2` 立即读取页面。
29. 分页内容的模式：先运行 `node scripts/cdp.mjs loadall A1B2 "button[data-action='load-more']"` 持续加载直到 Load More 按钮消失；再运行 `node scripts/cdp.mjs eval A1B2 "document.querySelectorAll('.item').length"` 提取所有已加载内容的数量。
30. Node.js 脚本集成模式：使用 `import { execFile } from 'node:child_process'; import { promisify } from 'node:util'; const exec = promisify(execFile); const CDP = (...args) => exec('node', ['scripts/cdp.mjs', ...args]);` 封装调用；实现 `getPageTitle(tabPrefix)` 调 `CDP('eval', tabPrefix, 'document.title')` 并返回 `stdout.trim()`；实现 `takeScreenshot(tabPrefix)` 调 `CDP('shot', tabPrefix)` 并返回文件路径；实现 `navigateAndSnap(tabPrefix, url)` 先 `CDP('nav', tabPrefix, url)` 再 `CDP('snap', tabPrefix)` 返回 `stdout`；用 `const tabs = (await CDP('list')).stdout; console.log(tabs);` 使用。
31. 配置非标准端口文件：设置环境变量 `CDP_PORT_FILE` 指向 `DevToolsActivePort` 文件。
32. 依赖 daemon 自动退出：daemons 在 20 分钟不活动后自动退出，正常使用无需手动清理。
33. 修复 "Allow debugging" 模态框反复出现：确保使用同一个 `scripts/cdp.mjs` 入口，它会自动管理 daemon 生命周期；如果会话中途切换工具，运行 `stop` 并让 daemons 重新启动。
34. 修复浏览器未检测到：如果自动检测失败，找到 `DevToolsActivePort` 文件并设置 env var；macOS Chrome 示例运行 `export CDP_PORT_FILE="$HOME/Library/Application Support/Google/Chrome/Default/DevToolsActivePort"`；Linux Chrome 示例运行 `export CDP_PORT_FILE="$HOME/.config/google-chrome/Default/DevToolsActivePort"`。
35. 修复 Target not found / prefix ambiguous：重新运行 `list`，因为标签关闭/重开时 tab ID 会变化；如果多个标签共享相同前缀字符，使用更长前缀。
36. 修复 Remote debugging toggle 不可见：确保在 `chrome://inspect/#remote-debugging`（不只是 `chrome://inspect/`）；开关在页面右上角。
37. 修复 Node.js 版本错误：项目要求 Node.js 22+；用 `node --version` 检查，需要时通过 nvm 或包管理器升级。
38. 修复截图空白或尺寸错误：截图反映实际渲染 viewport；如果标签在后台窗口或 OS 有显示缩放，`clickxy` 的像素坐标可能需要调整；改用 `snap` 或 `eval` 检查 DOM 状态，不要只依赖截图。
39. 架构与实现注意：不使用 Puppeteer、Playwright 或中间层，使用纯 CDP WebSocket。
40. 架构与实现注意：每个 tab 一个常驻 daemon 进程，首次访问时自动生成。
41. 架构与实现注意：daemon 复用使 100+ tabs 可靠工作，target 枚举不超时。
42. 架构与实现注意：`type` 直接使用 CDP Input domain，绕过 iframe 源限制。

适用边界 · 注意事项

• 需要干净隔离、无登录态、可重复的浏览器环境时不要用；它会连接真实 Chrome 会话，复用已有 cookies 和登录状态。
• 目标不是支持 CDP 远程调试的 Chromium 系浏览器（如 Firefox、Safari）时，不适用。
• 无法安装或运行 Node.js 22+，或不能开启 Chrome 远程调试时，不适用。