阿里巴巴发布 Page Agent：开源 JavaScript 库实现网页 DOM 自然语言操控
阅读原文· marktechpost.comPage Agent 把浏览器自动化从外部驱动变成页面内 JS，读 DOM 而非截图，让 SaaS 内的 AI 助手成本更低、更精准，适合自己产品内嵌 copilot 的团队。
阿里巴巴发布 Page Agent，一个开源的 JavaScript 客户端库，嵌入网页后可通过自然语言指令直接操作 DOM 元素。与 Playwright、Puppeteer 等外部浏览器自动化工具不同，Page Agent 不依赖截图或多模态模型，而是将实时 DOM 脱水压缩为 FlatDomTree 文本映射，让纯文本模型精准执行点击、表单填写等操作。它继承用户 cookies 和会话，无需独立后端，并支持任意 OpenAI 兼容端点的模型（示例使用 qwen3.5-plus）。项目采用 MIT 许可证，适合在自有应用内构建 AI 副驾、智能表单填充或无障碍控制等场景，但限于单页面范围，风险操作仍需服务端验证。
大多数浏览器自动化都是从外部运行的。Playwright、Puppeteer、Selenium 和 browser-use 都是通过外部进程来驱动浏览器。它们通过截图或 Chrome DevTools 协议来读取页面内容。
阿里巴巴的 Page Agent 走的是相反路线。这个智能体以纯 JavaScript 的形式存在于网页内部。它把实时 DOM 当作文本来读取，并像真实用户一样操作。不需要无头浏览器、不需要截图、也不需要多模态模型。
该项目以 MIT 许可证开源。代码库以 TypeScript 优先。它构建在 browser-use 之上，其 DOM 处理和提示词均源自 browser-use。
太长不看版
- Page Agent 以 JavaScript 的形式在页面内部运行，把实时 DOM 当作文本来读取，而非截图。
- DOM 脱水技术将页面压缩为 FlatDomTree，从而让较小的纯文本模型也能精准执行操作。
- 它通过任何兼容 OpenAI 的接口实现模型无关性，并以 MIT 许可证发布。
- 提示词级别的安全性和单页面作用域是实际存在的限制；对于高风险操作，仍需保留服务端验证。
- 最佳适用场景：在你自己的应用内部充当智能助手和表单填写工具，而非用于外部网站或被锁定的站点。
什么是 Page Agent？
Page Agent 是一个客户端库，用于为网页应用添加智能体行为。你嵌入它，然后用自然语言下达指令。该智能体会在页面内部查找元素、点击按钮、填写表单。
由于它在浏览器会话中运行，因此会继承用户的 Cookie、会话和身份认证信息。无需编写单独的后端。现有的 UI 验证和安全规则仍然有效。
其设计是模型无关的。你可以通过任何兼容 OpenAI 的接口自带大语言模型。只有文本会被发送给模型，因此一个强大的文本模型就足够了。
DOM 脱水的工作原理
核心技术是该团队所说的 DOM 脱水。一个现代页面可能包含数千个节点。把原始 HTML 发送给模型会既慢又昂贵。
当指令到达时，智能体会扫描文档对象模型。它会识别每一个可交互元素，例如按钮、链接和输入字段。每个元素都会获得一个索引以及角色和标签。
实时 DOM 被转换为 FlatDomTree，即一份仅保留关键内容的纯文本映射。冗余标记被剥离。模型读取的是这种紧凑表示形式，而非像素。
本页面的交互式演示会实时反映这一循环过程。观察“脱水 DOM”和“动作追踪”面板在命令执行时的更新变化。
在底层，智能体将工作委派给 PageController：
await this.pageController.updateTree()
await this.pageController.clickElement(index)
await this.pageController.inputText(index, text)
await this.pageController.scroll({ down: true, numPages: 1 })单体仓库将这些关注点拆分为多个小型包。`@page-agent/core` 持有无头智能体的逻辑。`page-agent` 是包含 UI 面板的完整入口类。`@page-agent/page-controller` 负责 DOM 提取和元素索引，并通过可选的 SimulatorMask 提供视觉反馈。
开发者可以控制作用范围。操作白名单限制了智能体可以执行的动作。数据屏蔽可以隐藏敏感字段（如密码）使其不被模型看到。还可以注入自定义知识，让智能体遵循你的领域规则。
对比
| 方案 | 运行位置 | 读取页面的方式 | 设置方式 | 最佳适用场景 |
|---|---|---|---|---|
| Page Agent | 页面内部（客户端 JS） | 脱水文本 DOM | 一个 script 标签或 npm | 在你拥有的应用内嵌入副驾驶 |
| Selenium / Playwright / Puppeteer | 外部进程 | 通过驱动程序（WebDriver/CDP）读取 DOM | 驱动程序 + 运行时或服务器 | 脚本化端到端测试 |
| browser-use | 外部进程 | DOM + 可选的视觉信息 | Python + 浏览器 | 自主多站点智能体 |
| WebMCP | 服务端工具 | 结构化函数调用 | 需要标准化采纳 | 原生智能体工具访问 |
关键在于作用范围，而非速度。Page Agent 适合你拥有控制权且能添加代码的产品。外部驱动程序在跨站点抓取和受限环境中仍然占优。
用例及示例
- SaaS AI 副驾驶：快速部署一个能操作产品的助手，而不仅仅是给出指令。支持机器人可以替用户执行步骤，而非描述步骤。
- 智能表单填写：将多步骤的 ERP 或 CRM 表单压缩为一条指令。用户输入“提交一笔昨天午餐 50 美元的差旅费用。”智能体负责处理导航和数据录入。
- 无障碍功能：配合 Web Speech API 实现语音控制。任何 web 应用都能通过自然语言触达，并伴有屏幕阅读器友好的提示播报。
- 遗留应用现代化：它可以封装一个没有 API 的旧有内部工具。你可以在不修改原始代码的情况下添加一个命令栏。
快速开始
对于评估，用一个脚本标签即可加载 Page Agent，并附带一个免费的测试用大语言模型：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js" crossorigin="true"></script>该演示端点仅供技术评估使用。生产环境需要你提供自己的模型凭证。
对于构建，请安装该包并配置你的端点：
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',
language: 'en-US',
})
await agent.execute('Click the login button')model 和 baseURL 字段接受任何兼容 OpenAI 的服务提供商。更换模型基本上就是更改 base-URL 和密钥。
注意：传递给 new PageAgent 的密钥会嵌入在你的客户端代码包中。在生产环境中，请改为通过你自己的后端代理请求。此外，智能体还可以在执行每个关键操作之前显示审批提示。
哪些可行，哪些不行
- 强大的集成能力：用几行代码即可交付一个 AI 助手。无需重写后端，也无需分发扩展程序。
- 更低的模型成本：因为只传输文本，所以避免了使用多模态模型及其计费方式。精度来自读取结构，而非根据像素猜测。
- 基于提示词的安全性存在局限：像“永远不要自动提交支付表单”这样的规则写在系统提示词中。这些只是引导性的建议，而非硬性保证。对于敏感或破坏性操作，请保留服务端验证。提示词指令不应成为你唯一的控制措施。
- 单页面焦点：核心库的目标是单个视图内的交互。它无法自行跨标签页或窗口移动。多页面自动化需要可选的 Chrome 扩展程序，该扩展需要单独安装和授权。一个 Beta 版 MCP 服务器还允许外部智能体（如 Claude Desktop 或 Copilot）驱动它。