mcpField
C
chrome-cdp

chrome-cdp

github.com/pasky开发3.3k2.1k 次安装17 周前更新
代码仓库

关于 chrome-cdp

chrome-cdp 是通过 Chrome DevTools Protocol 控制浏览器的轻量级 Node.js 命令行工具。它通过 WebSocket 直接连接，供开发者检查页面和执行浏览器操作，无需 Puppeteer。

主要功能

  1. 01列出已打开的浏览器页面
  2. 02截取视口截图
  3. 03查看无障碍树
  4. 04执行 JavaScript 并获取 HTML
  5. 05导航、点击、输入和查看网络计时

适用场景

  1. 01调试时检查页面结构
  2. 02截取浏览器视口供审阅
  3. 03在跨域 iframe 中与元素交互
  4. 04收集资源计时数据

安装

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

$npx skills add https://github.com/pasky/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