★ FEATURED ARTICLE 人工智能大模型LLM 网关AI Agent即时通讯【免费下载链接】openclaw-zero-tokenOpenClaw: Use All Major AI Models NO API Token! Claude/ChatGPT/Gemini/DeepSeek/Doubao/Grok/Qwen/Manus/Kimi项目地址https://gitcode.com/gh_mirrors/op/openclaw-zero-token点击查看免费下载本篇技术指南围绕 OpenClaw 仓库中的browser-cdp技能展开讲解如何用一个轻量 HTTP 代理把 Chrome DevTools ProtocolCDP封装成 REST 接口从而在无需 Playwright / Puppeteer 等重型依赖的前提下完成网页导航、截图、JS 求值、元素点击、表单填写与 Chrome 扩展安装等真实浏览器自动化操作。读完本文你将能独立启动 cdp_proxy.py 代理并熟练使用/targets、/navigate、/screenshot、/eval、/click、/new六个端点搭建可复用的浏览器自动化工作流。技能定位SKILL.md 说了什么browser-cdp技能的定义文件位于 skills/browser-cdp/SKILL.md。其 YAML frontmatter 声明了技能名称、触发描述与 OpenClaw 元数据--- name: browser-cdp description: Control a browser via Chrome DevTools Protocol (CDP) proxy. Use when: (1) navigating to URLs and reading page content, (2) taking screenshots, (3) executing JavaScript in the browser, (4) clicking elements or filling forms, (5) searching and installing Chrome Web Store extensions, (6) interacting with web APIs that require a real browser. NOT for: simple HTTP requests (use curl), local file operations, or when no CDP proxy is available. metadata: { openclaw: { emoji: , requires: { bins: [curl] } } } ---这段元数据不是摆设OpenClaw 的 Agent 技能系统会解析 SKILL.md 的 frontmatter 来决定技能何时被加载。从 src/agents/skills/frontmatter.ts 的实现看metadata.openclaw块中的requires、emoji、always、os、install等字段都会被解析进OpenClawSkillMetadata其中requires.bins用于声明技能运行所需的可执行文件——browser-cdp声明需要curl因为整个技能的使用方式就是通过curl调用本地代理的 REST 接口。技能正文Markdown 部分则只在技能被触发后才加载这与 skills/skill-creator/SKILL.md 中描述的 AgentSkills 规范一致。简单概括技能的适用边界适合使用打开 URL 并读取页面内容、截取当前页面截图、在页面上执行 JavaScript、点击按钮或填写表单、搜索并安装 Chrome 扩展、需要真实浏览器上下文来交互的网页 API。不适合使用简单 HTTP 请求直接用curl、下载文件用curl -O、解析本地保存的 HTML用python3配合 BeautifulSoup、以及 CDP 代理未启动的情况应先请用户启动代理。环境准备安装依赖并启动 CDP 代理安装 Python 依赖cdp_proxy.py依赖psutil用于进程信息与浏览器查找安装命令为pip install psutil若未安装脚本会在启动时直接报错退出并提示安装命令见 cdp_proxy.py。启动代理代理默认监听http://localhost:3456从仓库根目录启动python3 skills/browser-cdp/scripts/cdp_proxy.py启动成功后脚本会依次输出浏览器路径、调试端口、浏览器 PID、代理监听地址与可用端点列表。代理启动后Chrome/Edge 会以远程调试模式--remote-debugging-port运行HTTP 代理再把 CDP 命令转发到浏览器调试端口。从源码看启动细节cdp_proxy.py的启动逻辑比文档描述更完整值得了解几个关键点对应 main()命令行参数除默认端口外还支持--port代理监听端口默认 3456、--host默认 127.0.0.1、--chrome-path显式指定浏览器可执行文件路径、--debug-portChrome 调试端口默认自动选择。浏览器自动探测find_chrome_path()会按平台搜索候选路径——Windows 上查找chrome.exe/msedge.exe的标准安装位置macOS 上查找/Applications/Google Chrome.app与Microsoft Edge.appLinux 上则依次尝试google-chrome、google-chrome-stable、chromium-browser、chromium、microsoft-edge等命令名探测不到时脚本报错提示--chrome-path见 find_chrome_path。空闲端口分配find_free_port()从 9222 开始向上扫描 100 个端口找到第一个可用的作为调试端口见 find_free_port。浏览器启动参数start_browser()会附带一组抑制干扰的 flag包括--no-first-run、--no-default-browser-check、--disable-background-networking、--disable-popup-blocking、--disable-sync、--new-window等见 start_browser确保自动化场景下浏览器行为可预期。就绪等待启动后脚本以 0.5 秒间隔最多轮询 20 次探测http://127.0.0.1:debug_port/json是否可访问超时则终止浏览器进程并报错见 main()。API 参考六个 REST 端点详解以下所有端点均相对http://localhost:3456提供。端点与底层 CDP 方法的对应关系可以从 CDPProxyHandler 中直接读出端点方法底层 CDP 调用用途/targetsGET浏览器/json列表列出所有打开的浏览器标签页/navigate?urlURLGETPage.navigate导航标签页到指定 URL/screenshotGETPage.captureScreenshot截取当前页面 PNG 截图/evalPOSTRuntime.evaluate在页面中执行 JavaScript/click?selectorCSSGETRuntime.evaluateelement.click()点击匹配 CSS 选择器的元素/newGET浏览器/json/new打开新标签页并返回其 target IDGET /targets —— 列出所有标签页curl -s http://localhost:3456/targets | python3 -m json.tool响应示例[ { id: ABC123, title: Google, url: https://google.com } ]实际响应还会带上type字段_handle_targets从/json原始列表抽取id、title、url、type见 cdp_proxy.py。/targets返回的id可用来配合其他端点的?targettargetId参数定向操作指定标签页。GET /navigate —— 导航到 URLcurl -s http://localhost:3456/navigate?urlhttps://example.com默认使用最近创建的标签页也可以指定目标标签页?targettargetId。若未传url参数代理返回 400 错误Missing url parameter若当前没有可用浏览器目标则返回No browser target available见 cdp_proxy.py。GET /screenshot —— 截图# 保存到文件 curl -s -o screenshot.png http://localhost:3456/screenshot截图以 PNG 二进制数据返回代理内部把 CDP 返回的 base64 数据解码后以image/png直接写入响应体见 cdp_proxy.py。因此用curl -o保存文件时不要加-s之外的重定向干扰直接落盘即可。POST /eval —— 执行 JavaScript/eval是唯一需要 POST 的端点请求体是纯文本非 JSON需显式声明Content-Type: text/plaincurl -s -X POST http://localhost:3456/eval \ -H Content-Type: text/plain \ -d document.title多行脚本可以用 stdin 管道或 heredoc 传入。/eval的语义类似 REPL返回最后一个表达式的值。底层调用Runtime.evaluate时开启了returnByValue: true和awaitPromise: true因此返回 Promise 的表达式也会被等待并返回其值见 cdp_proxy.py代理还会尝试把 JSON 字符串结果如JSON.stringify的输出解析为结构化 JSON 返回。如果误用 GET 访问/eval代理会返回提示Use POST for /eval。批量提取页面所有链接的经典写法curl -s -X POST http://localhost:3456/eval \ -H Content-Type: text/plain \ -d JSON.stringify(Array.from(document.querySelectorAll(a)).map(a ({text: a.innerText, href: a.href})))GET /click —— 点击元素curl -s http://localhost:3456/click?selector%23submit-btnselector参数是 CSS 选择器需要 URL 编码#→%23空格 →或%20。实现上代理注入一段 JSdocument.querySelector(selector).click()元素不存在时返回Element not found成功则返回{success: true}见 cdp_proxy.py。注意该端点使用的是 DOM 的el.click()适用于大多数按钮/链接点击对于依赖真实鼠标事件如 hover 菜单的复杂交互可改用/eval派发MouseEvent。GET /new —— 打开新标签页curl -s http://localhost:3456/new响应示例{ id: NEW_TAB_ID, title: about:blank, url: about:blank }新标签页初始为about:blank随后可用返回的id配合/navigate定向导航见 cdp_proxy.py。常见工作流实战工作流一导航并提取页面内容# 打开页面 curl -s http://localhost:3456/navigate?urlhttps://example.com # 提取全部文本 curl -s -X POST http://localhost:3456/eval \ -H Content-Type: text/plain \ -d document.body.innerText # 提取所有链接文本 地址 curl -s -X POST http://localhost:3456/eval \ -H Content-Type: text/plain \ -d JSON.stringify([...document.querySelectorAll(a)].map(a ({text: a.textContent.trim(), href: a.href})))这个组合是“读取网页”类任务的最小闭环先导航再用document.body.innerText抓全文或用querySelectorAll结构化抓取特定元素。由于/eval有returnByValue与 JSON 字符串自动解析返回结果可直接交给 Agent 做后续决策。工作流二截取页面截图curl -s http://localhost:3456/navigate?urlhttps://example.com curl -s -o page.png http://localhost:3456/screenshot导航后立即截图可能因页面尚未渲染完成而拿到空白图稳妥起见可在导航与截图之间用/eval等待关键元素出现例如轮询document.querySelector(#main) ! null。工作流三搜索并安装 Chrome 扩展Chrome Web Store 的搜索不需要登录# 搜索扩展URL 中空格需编码为 %20 curl -s http://localhost:3456/navigate?urlhttps://chromewebstore.google.com/search/example%20extension # 从搜索结果中提取扩展 ID curl -s -X POST http://localhost:3456/eval \ -H Content-Type: text/plain \ -d JSON.stringify([...document.querySelectorAll(a[data-id])].map(a ({id: a.dataset.id, title: a.textContent.trim()}))) # 用扩展 ID 打开详情页 curl -s http://localhost:3456/navigate?urlhttps://chromewebstore.google.com/detail/extension-id # 然后点击 Add to Chrome 按钮选择器需 URL 编码 curl -s http://localhost:3456/click?selector%5Bdata-id%3Dinstall-button%5D注意#、[、]、等字符在 URL 查询串里都必须正确编码#→%23、[→%5B、]→%5D、→%3D否则会被当成 URL 结构字符截断参数。安装按钮点击后浏览器通常会弹出确认可在/click之后再用/eval轮询安装状态或再次document.querySelector校验。工作流四填写表单并提交# 导航到表单页 curl -s http://localhost:3456/navigate?urlhttps://example.com/login # 填充字段 curl -s -X POST http://localhost:3456/eval \ -H Content-Type: text/plain \ -d document.querySelector(#username).value myuser curl -s -X POST http://localhost:3456/eval \ -H Content-Type: text/plain \ -d document.querySelector(#password).value mypass # 提交选择器中的空格编码为 curl -s http://localhost:3456/click?selector%23login-form%3Ebutton这里展示了?selector%23login-form%3Ebutton的编码写法#login-form button中的#、与空格分别编码为%23、%3E、。对于复杂多步交互按 SKILL.md 的建议可以链式组合/eval与/click每次/eval先校验页面状态再执行下一步操作。注意事项与故障排查综合 SKILL.md 的 Notes 与代理源码的错误处理路径实践中有以下要点代理必须先启动任何端点调用前python3 skills/browser-cdp/scripts/cdp_proxy.py必须在运行代理未启动时curl会连接失败此时应请用户先启动代理。没有可用标签页时的报错若浏览器没有可用的 page 类型 target_get_target优先挑选type page的标签页其次回退到列表第一个 target各端点会返回No browser target available可先调用/new开一个新标签页见 cdp_proxy.py。查询参数必须 URL 编码url、selector中的特殊字符#、[、]、、空格等都需编码否则参数解析会出错。/eval是 REPL 语义返回最后一个表达式的值多语句脚本请用分号连接或写成 IIFE立即执行函数表达式。截图是 PNG 二进制用-o落盘不要期望得到 JSON。定向标签页大多数端点支持?targettargetId/targets与/new返回的 ID 可用于精确控制多标签页场景。信号量抑制代理启动的浏览器关闭了弹窗、同步、后台网络等功能某些依赖弹窗或浏览器同步的服务可能表现不同这是自动化场景的预期行为。从源码角度代理的错误处理也很直白CDP 请求失败超时 30 秒或网络异常时返回{error: ...}HTTP 状态码 500缺少必要参数如navigate无url、click无selector返回 400未知端点返回 404Unknown endpoint。熟悉这些返回形态有助于在脚本中做分支判断。小结browser-cdp技能的价值在于把 CDP 的复杂协议面收敛成六个可被curl直接调用的 REST 端点让 Agent 以最小的依赖成本获得真实浏览器能力。无论是抓取动态渲染的页面、执行登录态操作、安装扩展还是编写可复现的浏览器自动化脚本都可以基于 SKILL.md 的端点约定与 cdp_proxy.py 的实现快速落地代理层负责浏览器生命周期与 CDP 编解码上层只需组合navigate→eval→click→screenshot的调用链即可完成绝大多数网页交互任务。赞分享人工智能大模型LLM 网关AI Agent即时通讯【免费下载链接】openclaw-zero-tokenOpenClaw: Use All Major AI Models NO API Token! Claude/ChatGPT/Gemini/DeepSeek/Doubao/Grok/Qwen/Manus/Kimi项目地址https://gitcode.com/gh_mirrors/op/openclaw-zero-token点击查看免费下载相关推荐AionUi CDP 远程调试集成指南通过 Chrome DevTools Protocol 与 MCP 驱动应用内浏览器AionUi CDP 远程调试集成指南通过 Chrome DevTools Protocol 与 MCP 驱动应用内浏览器 AionUi 内置了一个可被 AI人工智能AI 应用交互助手不存账号密码如何驱动真实浏览器BossHunter的Chrome DevTools Protocol实战不存账号密码如何驱动真实浏览器BossHunter的Chrome DevTools Protocol实战 BossHunter 是一个智能求职 Agent它browser-harness 实战指南让 LLM Agent 通过一条可编辑的 CDP WebSocket 直接驱动真实浏览器browser harness 实战指南让 LLM Agent 通过一条可编辑的 CDP WebSocket 直接驱动真实浏览器 Browser HarnesAI 应用AI 技能浏览器控制GUI 自动化MCP 服务上一篇3分钟掌握ncmdump免费解密网易云音乐NCM文件完整指南下一篇三进制状态压缩 DP 到线性递推优化codeforces-go 仓库中 LeetCode 1931「网格三色涂色」四种解法全解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
