阿里巴巴 PageAgent 深度评测:改变网页自动化的页面内嵌式 GUI Agent
阿里巴巴 PageAgent 深度评测:改变网页自动化的页面内嵌式 GUI Agent
今天我们来深入分析阿里巴巴开源的 page-agent—一款发布后即获得 8,600+ GitHub Star 的 JavaScript 页面内嵌 GUI Agent。它不仅仅是一个浏览器自动化工具,更是用自然语言控制网页界面的全新范式。
它有什么特别之处?
PageAgent 通过简单的 <script> 标签将 AI Agent 直接嵌入到任何网页中。与 Playwright、Puppeteer 等从外部控制浏览器实例的工具不同,pageAgent 运行在用户的浏览器会话中—它看到用户看到的 DOM,用用户已有的权限执行操作。
六维质量评估
| 评估维度 | 得分 | 权重 | 核心亮点 |
|---|---|---|---|
| 结构完整性 | 9.0 | 15% | 7个包的TypeScript monorepo,文档完善,Demo/Chrome扩展/MCP全配齐 |
| 指令清晰度 | 8.5 | 20% | README清晰,文档完整,中英双语,开发者指南详尽 |
| 实用性 | 9.5 | 25% | 极简集成(一行script标签),继承用户会话,无需后端改造 |
| 可复现性 | 8.5 | 10% | 基于DOM文本操作,确定性强于截图方案 |
| 专业深度 | 8.5 | 20% | Observe-Think-Act闭环,DOM简化提取,支持Ollama离线部署 |
| 差异化 | 9.5 | 10% | 业界唯一纯客户端内嵌方案vs外部自动化框架 |
总分:8.93/10 — S级 ★★★★★
架构创新
其他主流网页自动化方案都在浏览器外部运行:
传统方案: Playwright/Puppeteer → 外部浏览器实例 → 需credential管理 page-agent → <script>标签内嵌 → 继承用户已登录会话 → 无需cookie同步
这是根本性差异:无需重新登录、无需同步cookie、无需维护TLS代理。
Observe–Think–Act 闭环
- Observe(观察):PageController 提取 DOM 状态,转换为带索引交互元素的简化HTML
- Think(思考):文本表示传递给 LLM,模型推理下一步操作
- Act(执行):选中工具执行合成 DOM 操作(点击、填写、滚动)
每步都发起新的 LLM 调用并携带更新后的页面状态,使系统能对动态变化做出响应。
极简集成示例
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.7.1/dist/iife/page-agent.demo.js"></script>
就这一行。或者使用 npm:
import { PageAgent } from 'page-agent';
const agent = new PageAgent({
model: 'qwen3.5-plus',
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
apiKey: 'YOUR_API_KEY',
});
await agent.execute('找到优先级最高的未处理工单并分配给Alice');
多LLM提供商支持
| 提供商 | 状态 |
|---|---|
| OpenAI (GPT-4o, o3) | ✅ 原生支持 |
| 阿里 Qwen | ✅ Dashscope |
| Anthropic Claude | ✅ 兼容patch |
| DeepSeek | ✅ |
| Google Gemini | ✅ |
| Ollama (本地) | ✅ 离线部署 |
Ollama 支持尤其重要:满足数据主权要求的离线部署成为可能。
与竞品对比
| 维度 | page-agent | Playwright | Browser-Use | Stagehand |
|---|---|---|---|---|
| 部署方式 | 页面内嵌JS | 外部Node.js | 外部Python | 外部Node.js |
| 会话认证 | 继承浏览器 | 手动管理 | 手动管理 | 手动管理 |
| 接口方式 | DOM文本 | WebDriver | DOM+截图 | DOM+截图 |
| 视觉依赖 | 否 | 否 | 可选 | 可选 |
| 多标签 | 需扩展 | 原生 | 原生 | 原生 |
| GitHub Stars | 8.6k | 67k | 21k | 8k |
| 最佳场景 | 站内Copilot | CI/CD测试 | 研究型Agent | 精准操作 |
适用场景
| 场景 | 推荐度 | 说明 |
|---|---|---|
| 企业内嵌Copilot | ⭐⭐⭐⭐⭐ | 继承SSO会话,12行代码改造ERP/CRM |
| SaaS产品AI增强 | ⭐⭐⭐⭐⭐ | 无后端改造,一行script加Copilot |
| 数据抓取/自动化 | ⭐⭐⭐ | 需处理反爬场景 |
| 无障碍访问增强 | ⭐⭐⭐⭐ | 自然语言控制,屏幕阅读器兼容 |
| 离线/安全敏感环境 | ⭐⭐⭐⭐ | Ollama支持,数据不出本地 |
安全考量
PageAgent 包含多项安全特性:
- allowList:限制可执行操作(click/fill/scroll)
- dataMask:敏感字段脱敏(密码、信用卡)后传给LLM
- Human-in-the-loop:可视化思考面板,执行前展示推理过程
⚠️ 间接提示注入风险:恶意网页内容可能诱导Agent执行非预期操作。缓解措施:使用allowList限制,高风险流程启用人工确认。
能力边界
- ❌ 无法解决CAPTCHA
- ❌ 无法处理纯图片内容
- ❌ 某些contenteditable元素支持有限(如Twitter编辑器)
总结
S级评分 8.93分 — 这是目前最轻量的网页AI控制方案。
它的意义不在于技术突破(DOM+LLM是已知模式),而在于部署模型:把AI Agent从需要后端基础设施的"项目"变成前端的"npm包"。
"每个Web应用都能拥有AI层" — 这是page-agent带来的范式转变。
发表于 SkillsAgent 博客。在 skillsagent.org 发现此技能