阿里巴巴发布Page Agent：一款通过DOM用自然语言控制网页界面的JavaScript页面内GUI代理

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

阿里巴巴的Page Agent采取了相反的路径。该代理作为纯JavaScript代码存在于网页内部。它读取实时的DOM文本，并像真实用户一样操作。无需无头浏览器、无需截图、无需多模态模型。

该项目采用MIT许可证开源。代码库以TypeScript为首选语言。它构建在browser-use的基础上，其DOM处理和提示词也源自该项目。

简明总结

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

什么是Page Agent？

Page Agent是一个客户端库，用于为Web应用添加代理行为。你将嵌入它，然后通过自然语言发出命令。代理会从页面内部查找元素、点击按钮和填写表单。

由于它在浏览器会话中运行，因此继承了用户的Cookie、会话和身份验证。无需编写单独的后端。现有的UI验证和安全规则保持不变。

设计是模型无关的。你可以通过任何兼容OpenAI的端点使用自己的大型语言模型。只有文本会被发送给模型，因此一个强大的文本模型就足够了。

DOM脱水的工作原理

核心技术被称为DOM脱水。一个现代页面可能包含数千个节点。将原始HTML发送给模型会很慢且昂贵。

当命令到达时，代理扫描文档对象模型（DOM）。它识别出每一个交互元素，例如按钮、链接和输入字段。每个元素都会获得一个索引以及角色和标签。

实时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 })

单体仓库将这些关注点拆分为小型包。@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的遗留内部工具。无需修改原有代码即可添加一个命令栏。

快速开始

用于评估时，一个script标签即可加载带有免费测试LLM的Page Agent。

<script src="https://cdn.jsdelivr.net/npm/page-agent/dist/page-agent.umd.js"></script>
<script>
  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');
</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的提供商。切换模型基本上只需更改baseURL和密钥。

注意：传递给new PageAgent的密钥会包含在你的客户端包中。对于生产环境，应通过你自己的后端代理请求。代理还可以在运行每个关键操作前显示审批提示。

优点与局限

• 强大的集成能力：只需几行代码即可部署一个智能助手。无需重写后端，也无需分发扩展。
• 较低的模型成本：由于只传输文本，避免了多模态模型及其高昂费用。精确性来自对结构的读取，而非从像素中猜测。
• 基于提示的安全性有限：像“永远不要自动提交支付表单”这样的规则存在于系统提示中。它们是说服性的指导，而非硬性保证。对于敏感或破坏性操作，请保留服务端验证。提示指令不应是唯一的控制手段。
• 单页面聚焦：核心库仅针对单一视图内的交互。它无法自行跨标签页或窗口移动。多页面自动化需要可选的Chrome扩展，这需要额外安装和权限。还有一个Beta MCP服务器，允许外部代理（如Claude Desktop或Copilot）驱动它。

查看GitHub仓库。另外，可以关注Twitter，加入150k+的ML SubReddit，订阅我们的Newsletter。Telegram用户现在也可以加入我们。

如需合作推广你的GitHub仓库、Hugging Face页面、产品发布或网络研讨会等，请联系我们。

本文首发于MarkTechPost。