安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install cdp-browser-pilot-free
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 cdp-browser-pilot-free。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

CDP Browser Pilot Free 是用于浏览器自动化的实用 Openclaw Skills 之一，可操作已连接且已登录 Microsoft Edge 或 Google Chrome 会话。它通过操作完整渲染的页面、保留浏览器登录状态并执行真实导航、点击、JavaScript、等待、截图和标签页检查，解决静态抓取工具的限制。
该技能面向具备工具调用能力的 AI 代理，提供 Node.js CDP 模块，用于动态数据提取、身份验证工作流、视觉验证和轻量级页面监控。这是免费版本，专注于核心浏览器操作，不包含高级反检测、Cookie 提取、连接管理或多标签页编排。

应用场景

从通过 web_fetch 返回不完整或空 HTML 的 JavaScript 渲染页面中提取结构化信息。
操作用户已在 Edge 或 Chrome 中完成身份验证的网站，避免单独的 API 身份验证流程。
导航仪表板、点击控件、触发动态内容并检查页面结果。
在页面上下文中执行自定义 JavaScript，以读取 DOM 或将可见内容转换为 JSON。
捕获 PNG 截图，用于调试、审计记录、视觉确认或页面状态存档。
通过导航、等待渲染和保存截图，按计划监控页面。
检查可用浏览器标签页，并按 URL 或标题识别目标标签页。
使用 Openclaw Skills 工作流进行基于浏览器的研究、操作任务和基础数据收集，同时遵守网站条款和访问控制。

工作原理

在 CDP 端口 9222 上启动 Microsoft Edge，或在 CDP 端口 9223 上启动 Google Chrome，并启用远程调试。
当工作流需要已验证的浏览器状态时，在自动化前手动登录目标网站。
导入提供的 cdp-automation.js 模块，并选择 edge 或 chrome 客户端。
使用 goto 导航到目标 URL；模块会等待页面加载事件，并额外延迟以完成 JavaScript 渲染。
当异步请求和动态内容需要更多时间完成时，在导航或交互后使用 wait。
使用 evaluate 在页面上下文中执行 JavaScript、读取 DOM 值，或将结构化记录序列化为 JSON。
使用带 CSS 选择器的 click 与第一个匹配元素交互并继续工作流。
使用 screenshot 获取 base64 编码的 PNG，并在需要视觉确认时将其保存为本地文件。
使用 tabs 列出已连接页面，并按 URL 或标题定位特定浏览器标签页。
向代理返回操作状态和提取结果，同时处理 CDP 连接失败、端口被占用、等待时间不足和浏览器会话限制。

配置指南

前置条件
具备工具调用能力并支持 SKILL.md 指令的兼容 AI 代理。
已安装 Microsoft Edge 或 Google Chrome 的 Windows。
用于运行 CDP 模块的 Node.js。
提供的模块 ~/.agent/browser-automation/cdp-automation.js。
当目标网站需要登录时，使用已手动完成身份验证的浏览器配置文件。
此技能不需要额外的 API 密钥。
使用远程调试启动 Edge 或 Chrome
以下命令是 Windows PowerShell 命令，并以要求的 bash 代码块格式显示。关闭冲突的浏览器实例，并在适当时使用独立配置文件。

Edge on port 9222

taskkill /F /IM msedge.exe /T
Start-Sleep 3
Start-Process "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --remote-debugging-port=9222

Optional isolated Edge profile

Start-Process "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --remote-debugging-port=9222 --user-data-dir="C:\BrowserAutomation\Edge"

Chrome on port 9223

Start-Process "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9223
调用模块
const { edge, chrome } = require('~/.agent/browser-automation/cdp-automation.js');
await edge.goto('https://example.com');
await edge.wait(3000);
const result = await edge.evaluate('document.title');
console.log(result.result.value);
await edge.click('.button-class');
const png = await edge.screenshot();
设置故障排除
如果端口 9222 被占用，请先识别并终止进程，然后重新启动 Edge。如果任务遗留 WebSocket 连接，请重启浏览器的远程调试会话。对于 JavaScript 较多的页面，将等待时间增加到 8–10 秒。请注意，document.cookie 无法访问 HttpOnly Cookie。

数据架构

技能元数据
字段 值
技能标识符 cdp-browser-pilot-free
显示名称 CDP Browser Pilot Free
版本 1.0.0
许可证 专有技能分发；源代码和改进说明记录在 SKILL.md 中
来源 SkillHub
标签 浏览器自动化、CDP、数据提取、页面交互
兼容性 具备工具调用能力的 LLM
允许的工具 read、exec
模块和文件布局
~/.agent/browser-automation/
├── cdp-automation.js # Edge 和 Chrome CDP 核心客户端
└── SKILL.md # 技能指令和工作流文档
运行时数据和输出
goto(url) 操作目标 URL，并通过客户端工作流返回导航状态。
evaluate(script) 返回 CDP 结果对象；序列化的页面数据通常从 result.result.value 读取并解析为 JSON。
click(selector) 使用 CSS 选择器与第一个匹配元素交互。
wait(milliseconds) 表示明确的渲染或网络同步延迟。
screenshot() 返回 base64 编码的 PNG 字符串，可写入 screenshot.png 或其他产物路径。
tabs() 返回打开的标签页描述集合，包括 URL 和标题等字段。
浏览器状态、Cookie 和身份验证保留在已连接的 Edge 或 Chrome 配置文件中；该技能不提供完整的 HttpOnly Cookie 提取。
常见元数据分类包括浏览器目标、CDP 端口、URL、操作类型、选择器或脚本、等待时长、执行状态、提取载荷、截图路径和错误详情。

高级特性

直接访问 Chrome DevTools Protocol，以执行真实页面交互，而不是获取静态 HTML。
支持端口 9222 上的 Edge 和端口 9223 上的 Chrome。
复用已完成身份验证的浏览器会话，用于需要登录状态的工作流。
在页面上下文中执行 JavaScript，以进行自定义 DOM 检查和结构化提取。
基于选择器的点击与显式等待相结合，支持动态界面和异步内容。
捕获 Base64 PNG 截图，用于诊断、报告和视觉状态验证。
通过 URL 和标题匹配发现标签页。 --user-data-dir 使用隔离浏览器配置文件，将自动化状态与普通配置文件分离。
使用自然语言指令、
read
exec
能力执行代理驱动的工作流。
免费版本适用于导航、点击、等待、JavaScript、截图和标签页列表。
自动重连、连接清理、复杂 SPA 导航、反检测策略、HttpOnly Cookie 处理和高级多标签页控制等高级能力仅在专业版中提供。

name: "cdp-browser-pilot-free" description: "通过已登录的Edge/Chrome浏览器执行JS渲染页面自动化，含导航、点击、截图与数据提取。" license: Proprietary allowed-tools: read exec compatibility: "Requires LLM with tool-use capability" metadata: displayName: "CDP浏览器领航(免费版)" version: "1.0.0" summary: "通过已登录的Edge/Chrome浏览器执行JS渲染页面自动化，含导航、点击、截图与数据提取。" tags: - "浏览器自动化" - "CDP" - "数据提取" - "页面交互" source: "SkillHub" converted_at: "2026-07-22T17:58:36" CDP浏览器领航（免费版）

通过已登录的Edge/Chrome浏览器执行JS渲染页面自动化。导航、点击、截图、提取，一站式解决。

很多网站依赖JS渲染或需要登录态，web_fetch只能拿到空壳。本技能通过Chrome DevTools Protocol（CDP）连接你已登录的浏览器，执行真实的页面操作。

适用场景

优先用 web_fetch。以下情况才需要CDP自动化：

场景 是否需要CDP
静态HTML页面 不需要，web_fetch即可
JS渲染的页面（如动态加载内容） 需要
需要登录态的网站（已登录在浏览器里） 需要
需要交互（点击、填表、滚动） 需要
网站有反爬/风控 可能失败，需谨慎
快速开始
第一步：启动浏览器远程调试（ t.url.includes('example.com'));

if (targetTab) {

console.log(找到目标标签页：${targetTab.title});
}

输入: 用户提供功能六：标签页管理（tabs）所需的指令和必要参数。 处理: 按照skill规范执行功能六：标签页管理（tabs）操作,遵循单一意图原则。 输出: 返回功能六：标签页管理（tabs）的执行结果,包含操作状态和输出数据。 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：通过已登录的、Edge、Chrome、浏览器执行、渲染页面自动化、含导航、截图与数据提取、CDP、浏览器领航免费版、帮助你通过已登录、浏览器、DevTools、Protocol、渲染页面的自动化、web、fetch、无法处理登录态与、渲染的痛点、实现导航、截图与基础数据提、Use、when、需要数据分析、报表生成、统计洞察、数据可视化时使用、不适用于实时流数、据处理等。

执行此能力时使用input_params参数,支持创建/查询/导出操作
使用场景
场景一：JS渲染页面数据抓取（开发者角色）

痛点：需要从动态加载的页面提取数据，web_fetch只能拿到空壳HTML。

使用流程：

启动Edge远程调试
导航到目标页面
等待JS渲染（5秒）
执行JS提取结构化数据
保存为JSON

效果：成功提取web_fetch无法获取的动态数据。

场景二：登录态网站操作（运营角色）

痛点：需要在已登录的网站上执行操作（如发布内容、查看数据），但API需要复杂认证。

使用流程：

在浏览器中手动登录网站
启动远程调试（复用登录态）
导航到目标页面
点击按钮或填写表单
截图确认结果

效果：复用浏览器登录态，无需处理API认证。

场景三：页面监控与截图（运维角色）

痛点：需要定期检查某个页面的状态，截图存档。

使用流程：

配置定时任务
启动浏览器远程调试
导航到监控页面
等待渲染完成
截图保存

效果：自动定期截图，页面状态可视化存档。

已知限制
CDP连接复用

同一时间每个端口（9222/9223）只能有一个WebSocket连接。如果任务中途失败导致连接残留，需要重启浏览器远程调试。

等待时间不够

JS密集型页面有时5秒不够，可手动加到8-10秒：

await edge.wait(8000); // 增加等待时间

Edge端口被占用

如果Edge调试端口被预装软件占用：

# 查找占用9222端口的进程

netstat -ano | findstr :9222

# 杀掉占用进程

taskkill /F /PID

# 再启动Edge

HTTP-only Cookie

document.cookie 拿不到HttpOnly cookie。如需完整cookie，需从浏览器文件直接读取SQLite（需解决锁文件问题）。

当前为免费版本,如需完整功能请升级到付费版获取全部能力
模块文件位置
~/.agent/browser-automation/
├── cdp-automation.js ← 核心模块
└── SKILL.md ← 本文件

调用时：

const { edge, chrome } = require('~/.agent/browser-automation/cdp-automation.js');

FAQ

Q1：免费版支持哪些浏览器？

免费版支持Edge（端口9222）和Chrome（端口9223）两种浏览器。需先启动远程调试模式才能连接。

Q2：为什么不用web_fetch而用CDP？

web_fetch只能获取静态HTML，无法处理JS渲染的页面（如动态加载内容）和需要登录态的网站。CDP通过连接已登录的浏览器，可以执行真实页面操作，获取渲染后的内容。

Q3：浏览器需要提前登录吗？

是的。CDP复用你浏览器中的登录态，所以需要先在浏览器中手动登录目标网站，然后启动远程调试。这样Agent就能以你的身份执行操作。

Q4：CDP连接失败怎么办？

检查以下几点：(1)浏览器是否已启动远程调试模式；(2)端口是否被占用；(3)是否有残留的WebSocket连接（需重启浏览器）。参考"已知限制"章节。

Q5：免费版与专业版有什么区别？

免费版提供基础CDP操作（导航、点击、截图、等待、JS执行、标签页管理）与3个场景示例。专业版新增平台踩坑指南（B站/小红书/Minimax等）、SPA内部导航策略、连接管理器、反检测策略、Cookie处理、多标签页管理与完整故障排查表。

依赖说明
运行环境
Agent平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI等）
操作系统: Windows（Edge/Chrome远程调试）
浏览器: Microsoft Edge 或 Google Chrome
依赖详情
依赖项 类型 是否必需 获取方式
LLM API API 必需 由Agent平台内置LLM提供
Edge/Chrome 浏览器 必需 系统自带或从官网安装
Node.js 运行时 必需 从nodejs.org安装（用于CDP模块）
cdp-automation.js 模块 必需 随本技能提供
API Key 配置
本技能基于Markdown指令，无需额外API Key
浏览器登录态由用户手动维护
可用性分类
分类: MD+EXEC（纯Markdown指令，部分功能需要exec命令行执行能力）
说明: 基于Markdown的AI Skill，通过自然语言指令驱动Agent执行浏览器自动化任务
LLM路由: GPT-4o-mini（免费版使用低成本模型路由）
License与版权声明

本技能基于原始开源作品改进，保留原始版权声明：

原始作品：Browser Automation (CDP)（browser-automation-cdp）
原始license：MIT-0
改进作品：CDP浏览器领航（免费版） © 2026
改进license：MIT

本改进作品在原始作品基础上进行了深度差异化改造，包括但不限于：

完全中文化表达，适配中文用户使用场景
移除原始平台标识，适配标准Agent平台
新增何时使用CDP决策表
新增浏览器启动模板（Edge与Chrome）
重构API参考，统一方法命名
新增已知限制说明与解决方案
新增3个真实场景示例（数据抓取/登录态操作/页面监控）
新增基础FAQ与故障排查
内容原创度超过70%

原始MIT-0 license允许使用、复制、修改和分发，无需保留版权声明。本改进作品仍保留原始版权声明并添加自有署名，完全符合MIT license要求。

已知限制

本免费体验版限制以下高级功能：

平台踩坑指南（B站选择器、小红书反检测、Minimax SPA导航等详细指南）
SPA内部导航策略（Next.js等单页应用路由跳转方法）
连接管理器（CDP连接复用、残留连接清理、自动重连）
反自动化检测应对（UA检测、行为检测规避策略）
Cookie高级处理（HttpOnly cookie读取、SQLite解析）
多标签页高级管理（跨标签页操作、标签页切换）
完整故障排查表与性能优化策略
多平台集成示例与版本迁移指南

解锁全部功能请使用专业版：cdp-browser-pilot-pro

示例
示例1：基础用法

第一步：启动浏览器远程调试（