chrome-cdp核心功能解析：10个实用命令让AI代理与浏览器无缝交互

【免费下载链接】chrome-cdp-skill Give your AI agent access to your live Chrome session — works out of the box, connects to tabs you already have open 项目地址: https://gitcode.com/gh_mirrors/ch/chrome-cdp-skill

chrome-cdp是一款轻量级Chrome DevTools Protocol CLI工具，能够让AI代理直接与本地Chrome浏览器会话交互，无需Puppeteer依赖，可支持100多个标签页，实现即时连接。通过它，AI代理可以轻松操作浏览器完成各种任务。

🌟 准备工作

使用chrome-cdp前，需要完成以下准备：

• 启用浏览器远程调试：打开Chrome（或Chromium、Brave、Edge、Vivaldi），访问chrome://inspect/#remote-debugging并开启开关
• 安装Node.js：确保已安装Node.js 22+版本（因使用内置WebSocket功能）
• 特殊路径配置：如果浏览器的DevToolsActivePort位于非标准位置，需设置CDP_PORT_FILE环境变量指向其完整路径

🚀 核心命令详解

所有命令都通过scripts/cdp.mjs执行。<target>是从list命令获取的唯一targetId前缀，例如6BE827FA。CLI会拒绝模糊的前缀，确保操作准确性。

1️⃣ 列出打开的页面

scripts/cdp.mjs list

该命令会显示所有打开的页面信息，包括唯一的targetId前缀、标题和URL，帮助你选择要操作的目标页面。

2️⃣ 截取屏幕截图

scripts/cdp.mjs shot <target> [file]    # 默认保存为runtime目录下的screenshot-<target>.png

此命令仅捕获当前视口。如果需要截取折叠内容，可先用eval命令滚动页面。输出结果包含页面的DPR（设备像素比）和坐标转换提示。

3️⃣ 获取可访问性树快照

scripts/cdp.mjs snap <target>

通过该命令可以获取页面的可访问性树快照，有助于分析页面结构和元素关系。

4️⃣ 执行JavaScript代码

scripts/cdp.mjs eval <target> <expr>

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

5️⃣ 获取HTML内容

scripts/cdp.mjs html <target> [selector]   # 获取整页或指定元素的HTML

可用于获取整个页面的HTML代码，或通过CSS选择器获取特定元素的HTML内容。

6️⃣ 页面导航

scripts/cdp.mjs nav <target> <url>         # 导航到指定URL并等待加载完成

让目标页面导航到指定的URL，并等待页面加载完成，确保后续操作在页面准备就绪后进行。

7️⃣ 网络性能数据

scripts/cdp.mjs net <target>               # 获取资源计时条目

获取页面的资源加载计时信息，帮助分析网络性能问题。

8️⃣ 点击元素

scripts/cdp.mjs click <target> <selector>    # 通过CSS选择器点击元素

使用CSS选择器定位并点击页面元素，实现模拟用户点击操作。

9️⃣ 坐标点击

scripts/cdp.mjs clickxy <target> <x> <y>       # 在指定CSS像素坐标处点击

在页面的指定CSS像素坐标位置进行点击，精确控制点击位置。

🔟 输入文本

scripts/cdp.mjs type <target> <text>         # 在当前焦点处输入文本

通过Input.insertText在当前焦点位置输入文本，与eval方式不同，此方法在跨域iframe中也能正常工作。先使用click/clickxy命令获取焦点，再使用type输入文本。

📌 其他实用命令

加载更多内容

scripts/cdp.mjs loadall <target> <selector> [ms]  # 点击"加载更多"按钮直到其消失（默认点击间隔1500ms）

对于需要多次点击"加载更多"按钮才能显示全部内容的页面非常有用。

发送原始CDP命令

scripts/cdp.mjs evalraw <target> <method> [json]  # 原始CDP命令传递

可直接发送原始的CDP命令，满足高级自定义需求。

打开新标签页

scripts/cdp.mjs open [url]                  # 打开新标签页（每个新标签页都会触发"允许调试"提示）

停止守护进程

scripts/cdp.mjs stop [target]               # 停止守护进程

🧩 坐标系统说明

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

CSS像素 = 截图图像像素 / DPR

shot命令会打印当前页面的DPR。对于典型的Retina屏幕（DPR=2），需将截图坐标除以2得到CSS像素坐标。

💡 使用技巧

• 要获取页面结构，优先使用snap --compact而非html命令。
• Chrome在首次访问每个标签页时会显示"允许调试"模态框。后台守护进程会保持会话活动，因此后续命令无需进一步确认。守护进程在闲置20分钟后会自动退出。

通过这些实用命令，chrome-cdp为AI代理与Chrome浏览器之间搭建了高效、便捷的交互桥梁，让自动化浏览器操作变得简单而强大。无论是页面分析、自动化测试还是数据采集，chrome-cdp都能发挥重要作用。

【免费下载链接】chrome-cdp-skill Give your AI agent access to your live Chrome session — works out of the box, connects to tabs you already have open 项目地址: https://gitcode.com/gh_mirrors/ch/chrome-cdp-skill