企业官网建设流程全解析

浏览器自动化利器：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-skills

browser-tools是 pi-skills 项目（GitHub 加速计划 pi 开源的编码 Agent 技能库）中的一个浏览器自动化技能。它基于 Chrome DevTools Protocol（CDP）协议，通过 Node.js + puppeteer-core 连接运行在:9222端口的真实 Chrome 浏览器，让 AI Agent 能够导航网页、执行 JavaScript、截图、抓取 Cookies、交互式选取页面元素，甚至把动态渲染的网页内容提取为 Markdown。与无头浏览器不同，它驱动的是你肉眼可见的浏览器，天然适合前端测试、动态内容抓取和登录态调试场景。

为什么选择 Chrome DevTools Protocol 浏览器自动化？

大多数爬虫工具只能获取服务端返回的静态 HTML，而大量现代网页（SPA、数据看板、懒加载列表）的内容全靠 JavaScript 动态渲染。browser-tools 的思路是：不模拟浏览器，而是直接接入一个真实的 Chrome 实例。

它的工作链路非常清晰：

1. browser-start.js以--remote-debugging-port=9222参数启动 Chrome，开启远程调试端口
2. 其余每个脚本（导航、执行脚本、截图等）通过 puppeteer-core 的browserURL连接到同一个浏览器
3. Agent 根据用户指令选择对应工具，形成"看页面 → 理解结构 → 操作 → 验证"的完整闭环

这种设计带来了两个显著优点：

• ✅所见即所得：浏览器窗口真实可见，人和 Agent 可以在同一个页面上协作，人负责"点一下告诉我选哪个"，Agent 负责批量操作
• ✅保留真实环境：支持--profile拷贝用户默认 Chrome 配置，登录态、Cookies 全部保留，轻松处理需要登录的页面

一键安装：browser-tools 快速上手步骤

整个安装只需两条命令。

第一步，克隆仓库并进入技能目录（技能说明见 browser-tools/SKILL.md）：

git clone https://gitcode.com/gh_mirrors/pi/pi-skills cd pi-skills/browser-tools

第二步，安装 Node.js 依赖（核心依赖清单见 package.json）：

npm install

完成。接下来就可以让 pi-coding-agent、Claude Code 或 Codex CLI 直接调用这套工具了——各客户端的接入方式在 README.md 的 Installation 一节中有详细说明。

💡 前提条件：系统已安装 Chrome 浏览器和 Node.js。

核心工具体系：7 个脚本覆盖浏览器操作全流程

browser-tools 目录下的每个.js脚本都是一个独立工具，职责单一、组合灵活：

下面介绍其中三个最有特色的工具。

browser-pick：让"人指哪，Agent 打哪"

这是整个技能中最具协作感的工具。执行 browser-pick.js 后，页面底部会浮现一个提示横幅，鼠标悬停时目标元素会被蓝色高亮框实时追踪：

• 普通点击：选中单个元素并立即结束
• Cmd/Ctrl + 点击：多选元素，按 Enter 确认
• Esc：取消选择

选中后返回的不仅是 CSS 选择器，还有标签名、id、class、文本内容、500 字符的 outerHTML 片段以及完整的父级 DOM 路径。当页面结构复杂、Agent 拿不准该操作哪个元素时，这一步能彻底消除歧义——用户亲手指认，结果 100% 准确。

browser-content：动态页面一键转 Markdown

browser-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 类：

1. 前端测试：在真实浏览器中验证 UI 变更，比无头环境更贴近用户实际体验
2. JavaScript 重度页面交互：SPA 路由、懒加载、动态表单等操作
3. 人机协同浏览：用户需要"亲眼看到"或亲手参与操作的页面
4. 登录态调试：用--profile启动后，通过 browser-cookies.js 查看 httpOnly、secure 等属性，快速定位认证问题
5. 动态内容抓取：必须执行 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