page-agent #

是什么 #

page-agent 是阿里巴巴开源的浏览器增强工具，通过注入 PageController 获得比普通 browser 工具更精准的 DOM 操作能力——可以精确点击、输入、滚动、抓取任意网页，支持 React/Vue 等框架。

• GitHub： alibaba/page-agent（v1.5.6）
• 协议： MIT
• 定位： 设计 → 代码 → 浏览器操作 全流程的一环

解决啥 #

普通 browser 工具在复杂页面前很无力：

• 只能操作 <button>、<a> 等语义标签，遇到 <div onclick> 就失效
• React/Vue 框架的输入框直接赋值 .value = xxx 无效，事件不触发
• 点击事件只触发 .click()，没有完整事件链，页面没反应
• 无语境检测，看不见 cursor:pointer 的隐藏可点击元素

page-agent 通过 PageController 注入，重建完整的事件系统，绕过所有这些问题。

怎么跑 #

Step 1：注入 PageController

node ~/.openclaw/workspace/skills/page-agent/scripts/inject-cdp.mjs <TARGET_ID>

TARGET_ID 来自 browser(action="open", ...) 的返回值。

Step 2：获取页面结构

const state = await window.__PA__.getState();

输出是带索引的简化 HTML：

[0]<a aria-label=首页 />
[1]<div >PageAgent />
[2]<button role=button>快速开始 />
[3]<input placeholder=搜索... type=text />

Step 3：按索引操作

await window.__PA__.click(2);        // 点击第3个元素
await window.__PA__.input(3, "hello"); // 向第4个输入框输入
await window.__PA__.scroll(true, 1);    // 向下滚动一页

Step 4：重新读取状态

每次操作后调用 getState()，观察页面变化。新出现的元素用 *[N] 标记。

好在哪 #

怎么用 #

完整工作流：设计 → 代码 → 浏览器测试

1. 设计   →  用前端设计工具生成页面
2. 启动   →  npx serve 或框架 dev server
3. 打开   →  browser(action="open", targetUrl="http://localhost:3000")
4. 注入   →  inject-cdp.mjs 注入 PageController
5. 检查   →  getState() 读取 DOM 结构
6. 操作   →  click / input / scroll 测试页面行为
7. 迭代   →  修改代码 → 重新注入 → 重复

注意事项：

• 页面全刷新后需要重新注入
• 能用 content 文字获取的信息，优先于截图（更省 token）
• 长页面用 scroll + getState 组合分段查看