browser-cdp

Polar Sponsor
爱发电 赞助
.NET 9.0

使用 CDP 代理实现真实 Chrome 自动化,支持完整登录状态访问页面、绕过反爬虫检测、执行点击/填写等交互操作。

浏览器- cdp 是什么 ?

功能概述

浏览器- cdp 是什么 ?是一项面向实际任务的技能,主要用于浏览器- cdp 直接通过 Chrome DevTools 协议( CDP) 连接到您的本地 Chrome, 给 AI 代理 :. 完全登录状态 – 您的 cookie 和会话被带入 throug。它将相关步骤、工具调用和结果整理方式集中到统一流程中,帮助使用者更快完成目标并减少重复操作。

核心要点

  • 使用时应结合输入条件选择合适的执行方式,核对必要参数、依赖环境与输出内容,并按原始要求处理异常情况。
  • 从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
  • 实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;

使用与执行

若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;

结果检查与注意事项

涉及批量任务时,还应保存进度,避免中断后重复操作。该技能适合用于一次性任务,也可以接入自动化工作流,与其他技能或上层代理配合完成更完整的业务链路;在组合使用时,应明确每一步的输入输出关系,并避免不同步骤之间出现参数冲突。

什么是 browser-cdp?

browser-cdp 通过 Chrome DevTools Protocol(CDP)直接连接本地 Chrome 浏览器,为 AI agent 提供以下能力:

  • 完整的登录状态 —— 复用您的 Cookie 和会话信息
  • 反机器人绕过能力 —— 可访问屏蔽静态抓取器的页面(如搜索引擎结果页、视频平台)
  • 交互式操作 —— 支持点击、表单填写、滚动、拖拽、文件上传等
  • 动态内容提取 —— 可读取 JavaScript 渲染后的 DOM
  • 截图功能 —— 可在任意时刻对任意页面进行截图

架构

Chrome(remote-debugging-port=9222)
    ↓ CDP WebSocket
CDP Proxy(cdp-proxy.mjs)—— 运行于 localhost:3456 的 HTTP API
    ↓ HTTP REST
OpenClaw AI Agent

配置步骤

1. 启动启用调试端口的 Chrome

# macOS —— 必须使用完整二进制路径(不可使用 `open -a`)
pkill -9 "Google Chrome"; sleep 2
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" 
  --remote-debugging-port=9222 
  --user-data-dir=/tmp/chrome-debug-profile 
  --no-first-run &

验证是否启动成功:

curl -s http://127.0.0.1:9222/json/version

2. 启动 CDP Proxy

node ~/.openclaw/skills/browser-cdp/scripts/cdp-proxy.mjs &
sleep 3
curl -s http://localhost:3456/health
# {"status":"ok","connected":true,"sessions":0,"chromePort":9222}

API 参考

# 列出所有标签页
curl -s http://localhost:3456/targets

# 在新标签页中打开 URL
curl -s "http://localhost:3456/new?url=https://example.com"

# 执行 JavaScript
curl -s -X POST "http://localhost:3456/eval?target=TARGET_ID" 
  -d 'document.title'

# JS 级点击(速度快,推荐使用)
curl -s -X POST "http://localhost:3456/click?target=TARGET_ID" 
  -d 'button.submit'

# 真实鼠标点击
curl -s -X POST "http://localhost:3456/clickAt?target=TARGET_ID" 
  -d '.upload-btn'

# 截图
curl -s "http://localhost:3456/screenshot?target=TARGET_ID&file=/tmp/shot.png"

# 滚动(支持懒加载)
curl -s "http://localhost:3456/scroll?target=TARGET_ID&direction=bottom"

# 导航至指定 URL
curl -s "http://localhost:3456/navigate?target=TARGET_ID&url=https://..."

# 关闭标签页
curl -s "http://localhost:3456/close?target=TARGET_ID"

工具选择:三层策略

场景 推荐工具 原因
公开页面(GitHub、Wikipedia、博客等) agent-reach 速度快、Token 消耗低、返回结构化数据
搜索结果页(Bing / Google / YouTube) browser-cdp agent-reach 会被屏蔽
需登录才能访问的内容 browser-cdp agent-reach 不携带 Cookie
JavaScript 渲染的页面 browser-cdp 可读取渲染完成后的 DOM
简单自动化任务或独立截图需求 agent-browser 无需额外配置 Chrome
大规模并行爬取 agent-reach + 并行 browser-cdp 易受请求频率限制

决策流程:

公开内容 → 使用 agent-reach(快速、低成本)
搜索结果 / 被屏蔽页面 → 使用 browser-cdp
仍失败 → 回退至 agent-reach,并将该站点模式记录至 site-patterns

已知限制

  • Chrome 必须使用独立的用户配置文件(例如 /tmp/chrome-debug-profile)
  • 同站多标签页可能触发频率限制
  • 需要 Node.js 22+(依赖原生 WebSocket 支持)
  • macOS 下:必须使用 Chrome 的完整二进制路径启动,不可使用 open -a

站点模式与使用日志

~/.openclaw/skills/browser-cdp/references/site-patterns/   # 按域名存储的经验规则
~/.openclaw/skills/browser-cdp/references/usage-log.md    # 每次调用的详细记录

起源

本项目基于 eze-is/web-access(MIT 协议)适配改造,专为 OpenClaw 设计。 原始版本存在一个 Bug(ES 模块中误用 require(),已在本版本修复)。

相关专题

更多
Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

2026.11.06

0

12

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

2026.11.06

0

13

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

2026.11.06

0

10

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

0

12

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

2026.11.05

0

12

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

2026.11.04

0

16

XORM框架结构体映射与表结构同步
XORM框架结构体映射与表结构同步

本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

2026.11.04

0

15

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

15

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 134.1万人学习