阿里巴巴发布 Page Agent:客户端 JavaScript 代理,通过 DOM 用自然语言操控网页界面
阿里巴巴开源 Page Agent,一种运行在网页内的 JavaScript 代理,通过读取 DOM 文本而非截图来理解页面,用户可用自然语言指令点击按钮、填写表单。无需后端改造,兼容任何 OpenAI 兼容的模型,适合为自家应用添加 AI 助手。本文详解其工作原理、DOM 脱水技术、使用场景及中文用户的实际应用价值。
一句话看懂
阿里巴巴开源 Page Agent,一个运行在网页内的 JavaScript 代理,通过读取 DOM 文本而非截图,让用户用自然语言直接操控网页界面。
详细发生了什么
阿里巴巴发布了 Page Agent,一个运行在网页内部的客户端 JavaScript 库。与 Playwright、Puppeteer 等外部浏览器自动化工具不同,Page Agent 直接嵌入在目标网页中,通过读取实时的 DOM 结构(而非截图)来理解页面内容,并执行点击、输入、滚动等操作。
核心创新在于 “DOM 脱水”(DOM Dehydration)技术:当收到指令时,代理扫描 Document Object Model,提取所有可交互元素(按钮、链接、输入框等),为每个元素分配索引、角色和标签,压缩成一个 FlatDomTree(扁平 DOM 树),只将精简后的文本表示发送给大语言模型。这避免了传输原始 HTML 或像素数据,降低了成本和延迟。
Page Agent 是模型无关的,支持任何 OpenAI 兼容的 endpoint,包括阿里自己的 Qwen 系列。项目采用 MIT 开源协议,代码以 TypeScript 为主,基于 browser-use 项目衍生。开发者可以通过一个 script 标签或 npm 包快速集成,并支持操作白名单、数据脱敏、自定义知识注入等安全控制。
中文圈视角
Page Agent 对中文开发者有直接价值:
-
平替国外方案:类似功能此前主要由 browser-use、Playwright 等外部驱动工具实现,而 Page Agent 作为客户端库,部署更简单,尤其适合国内 SaaS 产品快速添加 AI 助手,无需改造后端。
-
国产模型友好:Page Agent 默认兼容 DashScope(阿里云模型服务),可直接使用 Qwen 系列模型。对于国内用户,这意味着无需翻墙即可使用,且模型成本可控。
-
典型场景:
- 智能表单填写:一句话完成 ERP/CRM 多步表单,如“提交昨天午餐 50 元的差旅报销”。
- 老旧系统改造:对没有 API 的内部遗留系统,添加一个命令栏即可实现自然语言操控。
- 无障碍访问:结合 Web Speech API,让视障用户通过语音控制网页。
-
盲点提醒:Page Agent 目前只支持单页面交互,跨标签页或跨站点操作需要额外 Chrome 扩展或 MCP 服务器。对于国内复杂的单页应用(如钉钉、飞书),其 DOM 脱水效率值得关注。
几条值得记住的细节
- 部署方式:通过一个 script 标签或 npm 包即可集成,无需后端改造。
- 模型成本:只传输文本,避免多模态模型的高昂费用,一个强文本模型即可胜任。
- 安全限制:操作白名单和系统提示词是主要安全手段,但敏感操作仍需服务端验证。
- 开源协议:MIT 许可,代码托管在 GitHub,社区可自由修改。
- 快速体验:官方提供 CDN 加载的 demo 版本,内置免费测试 LLM,可直接在浏览器中试用。
一句话总结
Page Agent 让任何网页应用都能通过自然语言操控,尤其适合国内开发者快速为自家产品添加 AI 助手,且无需依赖海外模型。