浏览器CDP控制

技能简介

该技能基于Chrome DevTools Protocol（CDP）提供完整的浏览器控制能力，支持直接调用任意CDP方法实现网页导航、DOM操作、JavaScript执行、网络拦截、输入模拟、设备仿真等功能。

业务背景

浏览器CDP控制为开发和测试团队提供底层浏览器操控能力，直接调用Chrome原生协议实现精细化的网页交互与数据采集。相比传统自动化工具，它能触及更深层的功能如网络请求拦截、性能分析和设备仿真，满足复杂Web场景的调试与自动化需求。

落地案例：电商运营需要监控竞品页面价格变动，但对方网站有反爬机制且价格由JavaScript动态加载。通过CDP控制，可先模拟手机浏览器环境访问页面，执行特定JavaScript获取渲染后的真实价格数据，同时拦截并分析网络请求找到数据接口，最终稳定采集所需信息而不会被常规检测阻断。

能做什么

• 远程控制Chrome/Chromium浏览器实例
• 执行页面导航、刷新、前进后退操作
• 查询和修改DOM元素属性与结构
• 在页面上下文中执行JavaScript代码
• 监控和拦截网络请求，管理Cookie与缓存
• 模拟鼠标点击、键盘输入等用户操作
• 模拟移动设备视口、地理位置、时区
• 采集性能指标，进行JavaScript性能分析

使用说明

安装指令：原始文档未提供具体安装命令，需手动配置MCP服务器并确保Chrome浏览器以远程调试模式启动（chrome --remote-debugging-port=9222）。

基础调用示例：

// 导航到指定URL
cdp_send(method: "Page.navigate", params: { url: "https://example.com" })

// 获取页面截图
screenshot(format: "png", fullPage: true)

// 执行JavaScript并获取返回值
cdp_send(method: "Runtime.evaluate", params: { 
  expression: "document.title",
  returnByValue: true 
})

完整CDP方法参考：Chrome DevTools Protocol文档

输入与输出

见下方输入与输出表格。

风险提示

• 远程调试端口暴露可能导致未授权访问风险
• 执行任意JavaScript可能触发XSS或恶意代码
• 网络拦截功能需先启用对应Domain，否则调用失败
• DOM操作依赖nodeId，需先调用getDocument获取根节点
• 部分CDP方法需要特定权限或实验性标志开启

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/myestery/verify-on-browser/SKILL.md
来源类型：GitHub仓库