CDP驱动Chrome自动化工具

1. 📌 Skill基础信息

Skill名称：CDP (Chrome DevTools Protocol)

简称：cdp

来源：社区第三方 (browser-use)

运行宿主：Claude Code、Cursor 等支持 Skills 的 Agent 工具

核心定位：通过 JavaScript 驱动 Chrome DevTools Protocol，实现浏览器自动化、脚本执行和页面检查，支持单标签页或多标签页操作。

2. 🧩 内部核心组成

核心组件

CDP SDK：完整类型化的 CDP 协议包装器，包含 56 个域和 652 个方法
HTTP Server：基于 Bun 的长连接服务器，维护持久化 CDP Session
CLI 工具：browser-harness-js 命令行接口

CLI 命令表格

命令名	功能简述
`browser-harness-js '<JS>'`	执行 JavaScript 代码片段
`browser-harness-js --status`	检查服务器健康状态
`browser-harness-js --start`	显式启动服务器
`browser-harness-js --stop`	优雅停止服务器
`browser-harness-js --restart`	重启服务器
`browser-harness-js --logs`	查看服务器日志

全局 API

session：持久化 CDP Session 对象
listPageTargets()：列出页面目标
detectBrowsers()：检测运行中的浏览器
resolveWsUrl()：解析 WebSocket URL

3. 🛠 安装与启用方式

安装命令：

skills install --user browser-use/browser-harness-js

关键步骤：

通过 npx skills add 安装到 Agent 的 skills 目录
手动创建符号链接到 PATH 目录：

```bash

ln -sf <skill-dir>/sdk/browser-harness-js /usr/local/bin/

```

首次运行自动安装 Bun 运行时（可设置 BROWSER_HARNESS_SKIP_BUN_INSTALL=1 跳过）

前置依赖：Bun 运行时（自动安装）

4. 📋 标准工作流

用户输入：通过 CLI 执行 JavaScript 代码片段
服务器启动：首次调用时自动启动 HTTP 服务器
连接建立：自动检测运行中的 Chrome 浏览器并建立 WebSocket 连接
会话维持：所有后续调用复用同一 Session 和连接状态
结果返回：执行结果通过 stdout 返回，错误通过 stderr 输出

典型使用链路：

# 连接浏览器
browser-harness-js 'await session.connect()'

# 页面导航
browser-harness-js 'await session.Page.navigate({url:"https://example.com"})'

# 执行脚本
browser-harness-js '(await session.Runtime.evaluate({expression:"document.title"}))'

5. ⚠️ 关键限制、缺陷、注意事项

平台限制：

支持 macOS、Linux、Windows
需要 Chromium 内核浏览器（Chrome、Edge、Brave 等）

Token 消耗：中等，每次调用需要建立和执行 JavaScript 环境

适合项目：

浏览器自动化测试
页面数据抓取
开发调试工具

不适合项目：

高性能要求的批量处理
生产环境关键任务
无图形界面的服务器环境

已知坑点：

需要用户手动点击 Chrome 的远程调试授权弹窗
多浏览器运行时可能连接到错误的实例
首次运行需要手动配置 PATH

生产环境适用性：仅适合开发和测试环境，不建议直接用于生产环境

6. ✅ 适用场景 & ❌ 不适合场景

✅ 适用场景

Web 开发者：需要自动化浏览器操作和调试
QA 工程师：编写浏览器自动化测试脚本
数据工程师：需要从动态网页抓取数据
研究人员：进行网页行为分析和监控

❌ 不适合场景

生产环境部署：稳定性依赖本地浏览器状态
高并发场景：单服务器设计不支持多并发
无头浏览器需求：需要完整的图形界面支持
跨平台大规模部署：配置依赖本地环境

如何安装

skills install --user browser-use/browser-harness-js

通用安装教程：在哪里输入上面的命令

上面的命令本质是在「终端 / 命令行」中调用技能管理器，把该 Skill 下载并注册到你的 AI 工具。各主流工具打开终端的位置不同，按下面操作即可：

打开工具自带的终端面板，或系统终端（macOS「终端」、Windows「PowerShell」、Linux「Terminal」）。
把上面的安装命令复制进去，回车运行，等待下载与注册完成。
重启或重新加载 AI 工具，让新安装的 Skill 被识别。
新建对话并触发：直接描述用途，或通过该工具的技能 / 斜杠菜单选中此 Skill。

Claude 桌面版（macOS / Windows）

桌面版没有内置命令行，Skill 需通过 Claude Code CLI 安装。打开系统终端，先执行 npm install -g @anthropic-ai/claude-code，再运行上面的安装命令；完成后完全退出并重新打开 Claude。

Claude Code（终端 CLI）

直接在项目目录的终端里运行上面的命令即可。也可先输入 claude 启动交互界面，再在对话中引用该 Skill（/ 斜杠菜单或直接描述用途）。

VS Code（含 GitHub Copilot）

打开终端面板：菜单「终端 → 新建终端」，或快捷键 Ctrl+`（macOS 为 ⌃+`）。在终端里运行上面的命令；装完后执行「重新加载窗口」（Ctrl+Shift+P → Reload Window），让 Copilot 等扩展识别新技能。

Cursor

底部「终端」面板（Ctrl+`）即是内置终端。粘贴运行上面的命令，完成后在命令面板执行「Reload Window」刷新，再开始对话。

Windsurf

底部「终端」面板运行命令；也可直接使用其内置 Agent 终端，在对话侧执行安装。

其他工具（ChatGPT、本地脚本等）

不支持本地终端的产品，可先在本机终端完成安装，再在对话中描述该 Skill 的能力让其调用；不同工具的命令格式请以其官方文档为准。

风险提示

✅ 低风险

自动扫描未发现高危命令、隐私抓取或数据外传行为。仍建议安装前快速浏览仓库代码。