mcpField
C
chrome-cdp

chrome-cdp

github.com/hanyu0001开发4225 次安装33 周前更新
代码仓库

关于 chrome-cdp

chrome-cdp 是通过 Chrome DevTools Protocol 控制浏览器页面的轻量命令行技能。它直接使用 WebSocket 连接，无需 Puppeteer，并支持检查和操作页面。

主要功能

  1. 01列出已打开的浏览器页面
  2. 02截取视口截图
  3. 03检查无障碍树和 HTML
  4. 04执行 JavaScript 与 CDP 命令
  5. 05点击元素并输入文本

适用场景

  1. 01检查页面结构与无障碍信息
  2. 02截取浏览器视口画面
  3. 03操作页面，包括跨域 iframe

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hanyu0001/chrome-cdp-skill --skill chrome-cdp

安装后在 Claude Code 中输入/chrome-cdp确认已加载。

附带文件scripts/cdp.mjs

详细介绍

Chrome CDP

轻量级 Chrome DevTools Protocol CLI。通过 WebSocket 直接连接，无需 Puppeteer，可处理 100 多个标签页，并可即时连接。

前置条件

  • 启用了远程调试的 Chrome（或 Chromium、Brave、Edge、Vivaldi）：打开 chrome://inspect/#remote-debugging 并切换开关
  • Node.js 22+（使用内置 WebSocket）
  • 如果浏览器的 DevToolsActivePort 位于非标准位置，请将 CDP_PORT_FILE 设置为其完整路径

命令

所有命令都使用 scripts/cdp.mjs。<target> 是从 list 获取的唯一 targetId 前缀；请复制 list 输出中显示的完整前缀（例如 6BE827FA）。CLI 会拒绝有歧义的前缀。

列出打开的页面
scripts/cdp.mjs list
截取屏幕截图
scripts/cdp.mjs shot <target> [file]    # default: screenshot-<target>.png in runtime dir

仅截取视口。如果需要查看首屏以下的内容，请先使用 eval 滚动页面。输出中包含页面的 DPR 和坐标转换提示（见下文的坐标）。

无障碍树快照
scripts/cdp.mjs snap <target>
执行 JavaScript
scripts/cdp.mjs eval <target> <expr>

注意： 如果 DOM 可能在多次 eval 调用之间发生变化（例如点击 Ignore 后卡片索引会改变），请避免使用基于索引的选择方式（querySelectorAll(...)[i]）。请在一次 eval 中收集所有数据，或使用稳定的选择器。

其他命令
scripts/cdp.mjs html    <target> [selector]   # full page or element HTML
scripts/cdp.mjs nav     <target> <url>         # navigate and wait for load
scripts/cdp.mjs net     <target>               # resource timing entries
scripts/cdp.mjs click   <target> <selector>    # click element by CSS selector
scripts/cdp.mjs clickxy <target> <x> <y>       # click at CSS pixel coords
scripts/cdp.mjs type    <target> <text>         # Input.insertText at current focus; works in cross-origin iframes unlike eval
scripts/cdp.mjs loadall <target> <selector> [ms]  # click "load more" until gone (default 1500ms between clicks)
scripts/cdp.mjs evalraw <target> <method> [json]  # raw CDP command passthrough
scripts/cdp.mjs open    [url]                  # open new tab (each triggers Allow prompt)
scripts/cdp.mjs stop    [target]               # stop daemon(s)

坐标

shot 会以原生分辨率保存图像：图像像素 = CSS 像素 × DPR。CDP 输入事件（如 clickxy）使用CSS 像素。

CSS px = screenshot image px / DPR

shot 会输出当前页面的 DPR。典型的 Retina 屏幕（DPR=2）：将截图坐标除以 2。

提示

  • 相较于 html，优先使用 snap --compact 查看页面结构。
  • 在跨域 iframe 中输入文本时，请使用 type（而不是 eval）——先使用 click/clickxy 聚焦，再使用 type。
  • Chrome 首次访问每个标签页时会显示一次“Allow debugging”模态框。后台守护进程会保持会话运行，因此后续命令无需再次批准。守护进程在闲置 20 分钟后会自动退出。

评论

支持 Markdown