Appearance
Page-Agent - 浏览器 DOM 精准操控引擎
是什么
Page-Agent 是由阿里巴巴开源的浏览器增强工具集。它通过在浏览器中注入一个名为 PageController 的核心控制器，将原本粗糙的网页操作转化为一套高精度的、基于索引的 DOM 操控协议。它允许 AI 像人类一样，通过识别元素索引而非脆弱的 CSS 选择器来精确点击、输入和滚动。
- GitHub： alibaba/page-agent
- 协议： MIT
- 核心定位：浏览器自动化操作的“底层驱动”，消除了 AI 与复杂前端框架（React/Vue）之间的交互屏障。
解决啥 (痛点 $\rightarrow$ 方案)
| 痛点 | Page-Agent 的解决方案 |
|---|---|
| 语义标签失效 | 启发式识别：即使元素是 <div onclick> 而非 <button>，也能通过 cursor:pointer 启发式算法识别出其可点击性。 |
| 框架事件拦截 | 原生事件模拟：绕过 React/Vue 的内部状态拦截，直接触发完整的事件链（mouseenter $\rightarrow$ mousedown $\rightarrow$ click），确保页面产生真实响应。 |
| DOM 结构混乱 | 索引化简化：将复杂的 HTML 转化为 [N]<tag> 格式的简化索引列表，让 AI 能通过简单的数字指令（如 click(2)）精准操作。 |
| 异步加载迷路 | 增量变化检测：通过 *[N] 标记新出现的元素，让 AI 能够实时感知页面的动态变化。 |
不是啥
- 不是一个简单的爬虫：它不是用来静默抓取数据的，而是为了实现交互式自动化（Interactive Automation）。
- 不是一个浏览器插件：它不是通过 Chrome Extension 安装的，而是通过 CDP (Chrome DevTools Protocol) 动态注入的运行时控制器。
- 不是一个 UI 测试框架：虽然能做测试，但其核心目标是为 AI Agent 提供一套可靠的网页操纵原语。
好在哪
- 极致的精准度：基于索引的操作模式彻底解决了 AI 经常写错 CSS 选择器导致操作失败的痛点。
- 框架无关性：无论是原生 HTML 还是最前沿的 React/Vue 组合，都能通过
PageController统一操控。 - 高效的 Token 消耗：通过
getState()返回简化的索引 HTML，极大降低了发送给模型地 DOM 信息量，节省 Token 且提升响应速度。
怎么跑 (部署与安装指南)
🛠️ 给人类用户的操作手册
Step 1: 注入控制器 在获取到浏览器 TARGET_ID 后，执行注入脚本：
bash
node ~/.openclaw/workspace/skills/page-agent/scripts/inject-cdp.mjs <TARGET_ID>
Step 2: 获取状态 调用 API 获取当前页面的索引化快照：
javascript
const state = await window.__PA__.getState(); // 返回 [0]<a...>, [1]<div...> 等索引列表
Step 3: 精准执行 根据索引号发送指令：
click(index)$\rightarrow$ 点击 linput(index, text)$\rightarrow$ 输入文本scroll(direction, pages)$\rightarrow$ 滚动页面
🤖 给其他智能体 (Agents) 的安装指令
如果你是一个 AI Agent，请执行以下逻辑来实现浏览器精准操控：
Target: Chrome/Edge (CDP Enabled) Action:
- Open the target URL via browser tool and capture the
TARGET_ID.- Execute the injection script
inject-cdp.mjstargeting that ID to deployPageController.- Implement a loop:
getState()$\rightarrow$Analyze Index$\rightarrow$Action (click/input/scroll)$\rightarrow$getState().- If an element is not found, use
scrollto reveal and re-scan the state.
by 文殊