浏览器自动化利器pi-skills的browser-tools如何用Chrome DevTools Protocol驱动真实浏览器【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skillsbrowser-tools是 pi-skills 项目GitHub 加速计划 pi 开源的编码 Agent 技能库中的一个浏览器自动化技能。它基于 Chrome DevTools ProtocolCDP协议通过 Node.js puppeteer-core 连接运行在:9222端口的真实 Chrome 浏览器让 AI Agent 能够导航网页、执行 JavaScript、截图、抓取 Cookies、交互式选取页面元素甚至把动态渲染的网页内容提取为 Markdown。与无头浏览器不同它驱动的是你肉眼可见的浏览器天然适合前端测试、动态内容抓取和登录态调试场景。为什么选择 Chrome DevTools Protocol 浏览器自动化大多数爬虫工具只能获取服务端返回的静态 HTML而大量现代网页SPA、数据看板、懒加载列表的内容全靠 JavaScript 动态渲染。browser-tools 的思路是不模拟浏览器而是直接接入一个真实的 Chrome 实例。它的工作链路非常清晰browser-start.js以--remote-debugging-port9222参数启动 Chrome开启远程调试端口其余每个脚本导航、执行脚本、截图等通过 puppeteer-core 的browserURL连接到同一个浏览器Agent 根据用户指令选择对应工具形成看页面 → 理解结构 → 操作 → 验证的完整闭环这种设计带来了两个显著优点✅所见即所得浏览器窗口真实可见人和 Agent 可以在同一个页面上协作人负责点一下告诉我选哪个Agent 负责批量操作✅保留真实环境支持--profile拷贝用户默认 Chrome 配置登录态、Cookies 全部保留轻松处理需要登录的页面一键安装browser-tools 快速上手步骤整个安装只需两条命令。第一步克隆仓库并进入技能目录技能说明见 browser-tools/SKILL.mdgit clone https://gitcode.com/gh_mirrors/pi/pi-skills cd pi-skills/browser-tools第二步安装 Node.js 依赖核心依赖清单见 package.jsonnpm install完成。接下来就可以让 pi-coding-agent、Claude Code 或 Codex CLI 直接调用这套工具了——各客户端的接入方式在 README.md 的 Installation 一节中有详细说明。 前提条件系统已安装 Chrome 浏览器和 Node.js。核心工具体系7 个脚本覆盖浏览器操作全流程browser-tools 目录下的每个.js脚本都是一个独立工具职责单一、组合灵活工具脚本功能典型命令browser-start.js启动带远程调试端口的 Chromebrowser-start.js --profilebrowser-nav.js导航到指定 URL支持新标签页/强制刷新browser-nav.js https://example.com --newbrowser-eval.js在激活标签页执行任意 JavaScriptbrowser-eval.js document.titlebrowser-screenshot.js截取当前视口返回临时文件路径browser-screenshot.jsbrowser-pick.js交互式元素选择器点击页面元素获取信息browser-pick.js 点击提交按钮browser-cookies.js列出当前标签页全部 Cookies 及属性browser-cookies.jsbrowser-content.js抓取页面正文并转为 Markdownbrowser-content.js https://example.com下面介绍其中三个最有特色的工具。browser-pick让人指哪Agent 打哪这是整个技能中最具协作感的工具。执行 browser-pick.js 后页面底部会浮现一个提示横幅鼠标悬停时目标元素会被蓝色高亮框实时追踪普通点击选中单个元素并立即结束Cmd/Ctrl 点击多选元素按 Enter 确认Esc取消选择选中后返回的不仅是 CSS 选择器还有标签名、id、class、文本内容、500 字符的 outerHTML 片段以及完整的父级 DOM 路径。当页面结构复杂、Agent 拿不准该操作哪个元素时这一步能彻底消除歧义——用户亲手指认结果 100% 准确。browser-content动态页面一键转 Markdownbrowser-content.js 展示了 CDP 的深度用法它不只是打开页面等加载而是通过puppeteer的 CDP 会话直接调用DOM.getDocument拿到完整渲染后的 DOM 树即使页面有 TrustedScriptURL 限制也能工作再用 Mozilla Readability 识别正文区域最后经 Turndown 转成干净的 Markdown 输出。这意味着一篇需要 JavaScript 才能显示的万字长文一条命令就能变成 Agent 可直接阅读的结构化文本还内置了 30 秒全局超时保护不会卡死。browser-eval把整页 DOM 变成可编程对象browser-eval.js 在激活标签页执行任意表达式且代码运行在async 上下文中支持await。SKILL.md 中还附带了效率指南教你如何用一次调用完成复合操作例如用 IIFE 包裹多行代码一次调用内完成读取数据 → 点击按钮 → 返回结果批量点击多个元素避免逐个发起调用用JSON.stringify一次性提取应用的完整状态比分、状态、列表项配合sleep 0.5等待 DOM 更新后再读取基本覆盖了所有与动态页面交互的需求。典型使用场景清单前端测试到动态数据抓取根据 SKILL.md 的When to Use章节browser-tools 的适用场景可以总结为 5 类前端测试在真实浏览器中验证 UI 变更比无头环境更贴近用户实际体验JavaScript 重度页面交互SPA 路由、懒加载、动态表单等操作人机协同浏览用户需要亲眼看到或亲手参与操作的页面登录态调试用--profile启动后通过 browser-cookies.js 查看 httpOnly、secure 等属性快速定位认证问题动态内容抓取必须执行 JS 才能出现的数据比如仓库中自带的 browser-hn-scraper.js 就演示了如何解析 Hacker News 首页的标题、分数、作者和评论数写在最后browser-tools 用不到 300 行核心代码展示了 Chrome DevTools Protocol 最实用的打开方式不做庞大的框架只做一组职责清晰的原子工具把组合权交给 Agent。这正是 pi-skills 整个项目的设计哲学——每个技能独立、轻量、开箱即用。如果你想让自己的编码 Agent 也具备看得见、摸得着网页的能力这套技能库值得直接搬走。更多技能如 Gmail/Google Drive CLI、YouTube 字幕抓取、语音转写等的完整列表可参考 README.md。【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考