阿里巴巴发布 Page Agent：开源 JavaScript 库实现网页 DOM 自然语言操控

大多数浏览器自动化都是从外部运行的。Playwright、Puppeteer、Selenium 和 browser-use 都是通过外部进程来驱动浏览器。它们通过截图或 Chrome DevTools Protocol 来读取页面。

阿里巴巴的 Page Agent 走的是相反的路径。该智能体以纯 JavaScript 的形式存在于网页内部。它将实时 DOM 作为文本读取，并像真实用户一样操作。无需无头浏览器，无需截图，无需多模态模型。

该项目以 MIT 许可证开源。代码库以 TypeScript 优先。它构建于 browser-use 之上，其 DOM 处理和提示词均衍生自该项目。

TL;DR

Page Agent 以 JavaScript 的形式在页面内运行，将实时 DOM 作为文本读取，而非截图。
DOM 脱水将页面压缩为一个 FlatDomTree，使更小的文本模型也能精确操作。
它通过任何兼容 OpenAI 的端点实现模型无关，并以 MIT 许可证发布。
提示词层面的安全性和单页面范围是实实在在的限制；对于高风险操作，请保留服务端验证。
最适合的场景：你自己拥有的应用内部的 copilot 和表单填写，而非外部或受限的网站。

什么是 Page Agent？

Page Agent 是一个客户端库，用于为 Web 应用添加智能体行为。你将它嵌入后，即可用自然语言下达指令。智能体会在页面内查找元素、点击按钮并填写表单。

由于它运行在浏览器会话中，因此会继承用户的 cookies、会话和身份验证。无需编写单独的后端。现有的 UI 校验和安全规则依然有效。

该设计与模型无关。你可以通过任何 OpenAI 兼容端点接入自己的大语言模型。由于只向模型发送文本，因此一个强大的文本模型就足够了。

DOM 脱水是如何工作的

核心技术是团队所称的DOM 脱水。一个现代页面可能包含数千个节点。将原始 HTML 发送给模型既慢又昂贵。

当指令到达时，智能体会扫描文档对象模型。它会识别每一个可交互元素，例如按钮、链接和输入框。每个元素都会获得一个索引，以及一个角色和一个标签。

实时 DOM 会被转换为FlatDomTree，即一份只保留关键内容的简洁文本映射。冗余的标记会被剥离。模型读取的是这种紧凑的表示，而不是像素。

本页的交互式演示完整复现了这一循环。当命令运行时，可以看到“Dehydrated DOM”和“Action trace”面板实时更新。

在底层，该智能体将工作委托给一个 PageController：

await this.pageController.updateTree()
await this.pageController.clickElement(index)
await this.pageController.inputText(index, text)
await this.pageController.scroll({ down: true, numPages: 1 })

这个 monorepo 将这些关注点拆分为多个小型包。@page-agent/core 承载无头智能体逻辑。page-agent 是带有 UI 面板的完整入口类。@page-agent/page-controller 负责 DOM 提取和元素索引，并通过 SimulatorMask 提供可选的视觉反馈。

开发者始终掌控范围。操作允许列表限制了智能体可以运行哪些操作。数据脱敏可以从模型中隐藏敏感字段，例如密码。还可以注入自定义知识，让智能体遵循你的领域规则。

对比分析

方案	运行位置	读取页面的方式	配置	最适用场景
Page Agent	页面内部（客户端 JS）	脱水文本 DOM	一个 script 标签或 npm	自有应用内的 Copilot
Selenium / Playwright / Puppeteer	外部进程	通过驱动（WebDriver/CDP）操作 DOM	驱动加运行时或服务器	脚本化端到端测试
browser-use	外部进程	DOM 加可选的视觉能力	Python 加一个浏览器	自主多站点智能体
WebMCP	服务端工具	结构化函数调用	需要标准被广泛采用	原生智能体工具访问

关键在于适用范围，而非速度。Page Agent 适合你能够掌控、并且可以添加代码的产品。对于跨站点抓取和封闭环境，外部驱动方案仍然更胜一筹。

用例与示例

SaaS AI copilot：交付一个能操作产品的助手，而不是只会给出指令的助手。客服机器人可以为用户执行这些步骤，而不是仅仅描述它们。
智能表单填写：把多步骤的 ERP 或 CRM 表单压缩成一条指令。用户输入"为昨天的午餐提交一笔 50 美元的差旅报销。"智能体负责处理导航和数据录入。
无障碍：将其与 Web Speech API 搭配使用以实现语音控制。任何 Web 应用都能通过自然语言访问，并配有对屏幕阅读器友好的播报。
遗留应用现代化：它可以封装一个没有 API 的遗留内部工具。你无需改动原始代码，就能添加一个命令栏。

快速上手

在评估方面，只需一个 script 标签即可加载 Page Agent，并附带一个免费的测试用 LLM：

<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 的密钥会随你的客户端打包文件一起分发。在生产环境中，应改为通过你自己的后端代理请求。该智能体还可以在执行每个关键操作之前将其展示出来以供批准。

哪些行得通，哪些行不通

集成体验出色：只需几行代码就能交付一个 copilot。无需重写后端，也无需分发扩展程序。
更低的模型成本：因为只传输文本，你可以避开多模态模型及其定价。精确性来自读取结构，而非从像素中猜测。
基于提示词的安全措施有其局限：诸如“绝不自动提交支付表单”之类的规则存在于系统提示词中。这些是有说服力的引导，而非硬性保证。对于敏感或破坏性操作，请保留服务端验证。提示词指令不应成为你唯一的控制手段。
单页聚焦：核心库仅针对单一视图内的交互。它本身无法跨标签页或窗口操作。多页面自动化需要可选的 Chrome 扩展，该扩展需要单独安装并授予权限。一个 Beta 版 MCP 服务器还可让外部智能体（如 Claude Desktop 或 Copilot）来驱动它。