Browser Automation C

> 核心功能: 本技能提供完整的参数配置、和输出格式说明、处理场景等能力。

何时使用

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

架构概览

Agent（我）
    ↓ require('./cdp-automation.js')
cdp-automation.js（连接管理器 + 浏览器抽象类）
    ↓ WebSocket (HTTP → CDP)
用户 Windows 浏览器（Edge:9222 / Chrome:9223）
    ↓ 执行 JS / 读 DOM / 点击
目标网站（bilibili / 小红书 / Minimax 等）

部署说明

1. 确保浏览器 remote debugging 已开启

Edge（端口 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

exe" --remote-debugging-port=9222 --user-data-dir="C:\Skill平台Browser\Edge"

Chrome（端口 9223）：

Start-Process "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9223

2. 在任务中调用

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

// 基础用法
await edge.goto('https://目标网站.com');
const data = await edge./* REMOVED: eval */ (`document.title`);

// 点击 + 等待 + 提取
await edge.click('[class*="radio-filter__item"]');  // CSS 选择器
await edge.wait(5000);  // 等待 JS 渲染
const result = await edge./* REMOVED: eval */ (`提取数据的 JS `);

// 截图
const png = await edge.screenshot();  // 返回 base64

API 参考

browser.goto(url)

导航到指定 URL，等待页面加载完成（Page.loadEventFired + 额外 2s 等待 JS 渲染）。

await edge.goto('https://space.bilibili.com/151190274/video');

browser./* REMOVED: eval */ (script)

在页面上下文执行 JavaScript，返回结果。

// 读取 DOM
const r = await edge.title`);
console.log(r.result.value);

// 提取结构化数据
/* REMOVED: eval */ (`
    JSON.stringify(
        Array.from(document.querySelectorAll('.upload-video-card')).slice(0,5).map(c => ({
            title: c.querySelector('.bili-video-card__title')?.innerText,
            play: c.querySelector('.bili-cover-card__stat span')?.innerText
        }))
    )
`);
const videos = JSON.parse(r.result.value);

browser.click(selector)

点击匹配选择器的领先个元素。通过计算元素中心坐标后用 document.elementFromPoint 模拟点击，支持任何可点击元素。

await edge.click('[class*="radio-filter__item"]');  // 点击"最多播放"tab

browser.screenshot()

截图当前页面，返回 PNG base64 字符串。可选保存到文件：

require('fs').writeFileSync('/tmp/screenshot.png', Buffer.from(png, 'base64'));

browser.wait(ms)

显式等待，用于等待 JS 渲染或网络请求。

await edge.click('.next-page');
await edge.wait(3000);  // 等待翻页后内容加载

browser.tabs()

获取所有标签页列表（不含临时 JS 上下文）。

const tabs = await edge.tabs();
const bTab = tabs.find(t => t.url.includes('bilibili.com'));

平台踩坑经验

B站

选择器（2025年有效）：

• 视频卡片：.upload-video-card
• 标题：.bili-video-card__title
• 播放量：.bili-cover-card__stat span（领先个 span）
• "最多播放" tab：[class*="radio-filter__item"]，文字为"最多播放"

重要：

• B站页面完全 JS 渲染，web_fetch 拿到的是空壳
• 播放量字段在 DOM 里是文本（如"1890"），不是数字
• 排序需要 JS 端做：parseInt(play.replace(/\D/g,''))
• API 有 wbi 签名保护，直接调 API 不可行，必须走 DOM

小红书（Xiaohongshu）

注意：

• 有强反自动化检测（UA 检测、行为检测）
• 建议先测试是否能正常浏览，再尝试自动化
• 选择器可能随时变，建议先 eval 探索DOM结构

处理方式：

// 先探索页面结构
const r = await xhs./* REMOVED: eval */ (`
    JSON.stringify({
        title: document.title,
        samples: Array.from(document.querySelectorAll('[class*="note"]')).slice(0,3).map(x => ({
            text: x.innerText?.substring(0,100),
            class: x.className?.substring(0,60)
        }))
    })
`);
console.log(JSON.parse(r.result.value));

Minimax（平台：platform.minimaxi.com）

查询目标： Token Plan 配额（每 5 小时重置）

关键路径（已验证）：

1. 先导航到任意 minimaxi 页面（需是 type=page 的标签页）
2. 再导航到 /user-center/basic-information（可正常访问）
3. 用 JS 点击侧边栏的 div（注意：不是 <a> 标签）：

javascript

// 找到并点击"Token Plan"菜单项 /* REMOVED: eval */ (` (function() { var allDivs = document.querySelectorAll('div'); for (var d of allDivs) { if (d.innerText && d.innerText.trim() === 'Token Plan' && d.className.includes('cursor-pointer')) { d.click(); return 'clicked'; } } return 'not found'; })() `);
4. 等待页面跳转后，提取配额数据

实际路径规律（Next.js SPA）：

• 账户管理侧边栏是 SPA 内部路由，URL 最终为 /user-center/payment/token-plan
• 直接 Page.navigate 到 /user-center/token-plan 会 404
• 正确做法：先进 /user-center/basic-information，再 JS 点击触发路由跳转

配额数据所在位置（2026-03 验证）：

• 套餐名：Token Plan / Starter年度套餐
• 剩余量：可用额度：未指定次模型调用 / 5小时
• 已用量：<参数>/600
• 重置倒计时：页面显示

示例提取脚本：

// 已在 basic-information 页面，点击 Token Plan 后执行：
/* REMOVED: eval */ (`(function(){
  var t = document.body.innerText;
  // 提取套餐信息
  var plan = t.match(/(Starter|Pro|Enterprise)[^\\n]*/)?.[0];
  var quota = t.match(/可用额度[：:][^\\n]*/)?.[0];
  var used = t.match(/(\\d+)\\/600/)?.[0];
  return JSON.stringify({plan, quota, used});
})()`);

模块文件位置

$HOME/.skill-platform/browser-automation/
├── cdp-automation.js   ← 核心模块（不用动）
└── SKILL.md           ← 本文件

调用时：

const { edge, chrome } = require('$HOME/.skill-platform/browser-automation/cdp-automation.js');

最后更新：2026-03-24
踩坑：B站选择器 / Edge 端口占用 / CDP 连接复用 / Minimax SPA 导航 / div 菜单点击

依赖与配置

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
• 操作系统: Windows / macOS / Linux

依赖说明

API Key 配置

• 本Skill基于Markdown指令,无需额外API Key(除内容中明确标注的外部API)

可用性分类

• 分类: MD+execute(纯Markdown指令,部分功能需要exec命令行执行能力)
• 说明: 基于Markdown的AI Skill,通过自然语言指令驱动Agent执行任务

主要能力

• 通过已登录的Edge或Chrome浏览器，利用Chrome DevTools Protocol执行JS渲染页面的导航、点击、截图及数据提取等自动化操作
• 触发关键词: (cdp), chrome, 通过已登录的, devtools, 执行, automation, browser, 渲染页面的导

示例

示例1：基础用法

## 异常恢复方案
| 错误场景 | 原因 | 处理方式 |
|---------|------|---------|
| 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 |
| 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 |
| 网络错误 | 连接超时或不可达 | 检查网络连接后重试，参考国内替代方案 |

## 疑问解答
### Q1: 如何开始使用Browser Automation C？
A: 请先阅读使用流程章节，确认环境满足依赖说明中的要求。

### Q2: 遇到错误怎么办？
A: 请参考错误处理章节，按照表格中的处理方式操作。

### Q3: Browser Automation C有什么限制？
A: 请参考已知限制章节了解具体限制。

---
## 使用边界
### 输入限制

- **URL格式**：输入的URL必须符合有效的HTTP或HTTPS格式，否则技能将无法识别并执行。
- **字符长度**：URL长度不应超过Chrome或Edge浏览器的最大URL长度限制（通常为2000个字符）。
- **特殊字符**：URL中不应包含特殊字符，除非这些字符是URL的一部分（如查询参数）。

### 性能边界

- **并发连接**：同一时间只能有一个WebSocket连接到浏览器的调试端口，因此不能同时执行多个CDP任务。
- **页面加载时间**：CDP自动化可能需要等待页面加载完成，对于复杂的JS渲染页面，等待时间可能较长。
- **内存限制**：浏览器和CDP自动化脚本可能受到系统内存限制的影响，导致性能下降或任务失败。

### 兼容性约束

- **浏览器版本**：CDP自动化依赖于特定版本的Chrome或Edge浏览器，旧版本可能不支持某些功能。
- **操作系统**：CDP自动化在Windows、macOS和Linux操作系统上均支持，但可能存在特定版本的兼容性问题。
- **浏览器配置**：远程调试功能必须在浏览器中手动开启，且浏览器配置可能影响CDP自动化脚本的执行。

### 交互限制

- **JavaScript执行**：CDP自动化只能执行页面中的JavaScript代码，无法直接与服务器端代码交互。
- **DOM操作**：CDP自动化只能操作页面DOM元素，无法访问或修改浏览器的其他部分，如系统设置或插件。
- **安全性**：CDP自动化可能受到浏览器的安全限制，如同源策略，这可能导致某些操作无法执行。

### 其他限制

- **反爬虫机制**：某些网站可能具有反爬虫机制，CDP自动化可能无法规避这些机制。
- **网络稳定性**：CDP自动化依赖于稳定的网络连接，网络中断可能导致任务失败。
- **浏览器资源占用**：长时间运行CDP自动化可能导致浏览器资源占用过高，影响其他应用程序的性能。

## 安全规范
### 安全风险防范

| 风险项 | 等级 | 防护措施 | 验证方法 |
| --- | --- | --- | --- |
| API密钥泄露 | 高 | 通过环境变量配置，禁止硬编码 | 定期检查代码和配置文件 |
| 命令执行风险 | 高 | 仅执行白名单命令，避免拼接用户输入 | 使用沙箱环境测试 |
| 网络通信安全 | 中 | 使用HTTPS协议，验证SSL证书 | 定期检查证书有效期 |
| 敏感数据暴露 | 高 | 输出结果中不包含密钥、令牌等敏感信息 | 日志脱敏审查 |
| 未授权访问 | 中 | 限制访问权限，实施认证机制 | 定期审计访问日志 |

使用前请确认已阅读依赖说明章节，确保运行环境满足安全要求。

## 效率指标
| 操作场景 | 手动耗时 | 自动化耗时 | 效率提升 |
|----------|---------|-----------|---------|
| 文件解析与提取 | 5-10分钟/个 | <5秒/个 | 60-120x |
| 批量文件处理(100个) | 8-16小时 | <5分钟 | 96-192x |
| API调用与响应解析 | 2-3分钟/次 | <1秒/次 | 120-180x |
| 多接口数据聚合 | 15-30分钟 | <10秒 | 90-180x |
| 命令执行与结果收集 | 3-5分钟/次 | <2秒/次 | 90-150x |
| 重复任务批量执行 | 因任务而异 | 线性缩减 | 5-50x |
| 错误排查与修复 | 10-30分钟 | <30秒 | 20-60x |

## 优势分析
| 对比维度 | Browser Automation C | 传统手动方式 | 通用脚本工具 |
|---------|------------|-------------|------------|
| 自动化程度 | 全流程自动 | 完全手动 | 部分自动 |
| 错误处理 | 内置错误恢复 | 依赖人工经验 | 基本try-catch |
| 可复用性 | 参数化配置 | 一次性脚本 | 模板化 |
| 安全合规 | 内置安全检查 | 无安全保障 | 无安全保障 |
| 适用场景 | CDP协议浏览器自动化 | 通用场景 | 通用场景 |