MarkTechPost（RSS）

精选

AI 编辑部评分，满分 100

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

2026-07-03 04:51· 45天前· Asif Razzaq

AI 导读

阿里巴巴发布 Page Agent，一个开源的 JavaScript 客户端库，嵌入网页后可通过自然语言指令直接操作 DOM 元素。与 Playwright、Puppeteer 等外部浏览器自动化工具不同，Page Agent 不依赖截图或多模态模型，而是将实时 DOM 脱水压缩为 FlatDomTree 文本映射，让纯文本模型精准执行点击、表单填写等操作。它继承用户 cookies 和会话，无需独立后端，并支持任意 OpenAI 兼容端点的模型（示例使用 qwen3.5-plus）。项目采用 MIT 许可证，适合在自有应用内构建 AI 副驾、智能表单填充或无障碍控制等场景，但限于单页面范围，风险操作仍需服务端验证。

推荐理由

Page Agent 把浏览器自动化从外部驱动变成页面内 JS，读 DOM 而非截图，让 SaaS 内的 AI 助手成本更低、更精准，适合自己产品内嵌 copilot 的团队。

正文 · AI 翻译

大多数浏览器自动化都是从外部运行的。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 被转换为 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 的密钥会包含在你的客户端 bundle 中。对于生产环境，请改为通过你自己的后端代理请求。该智能体还可以在执行每个关键操作前显示该操作以供审批。

适用与不适用的场景

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

智能体开源/仓库部署/工程

来源：MarkTechPost（RSS） · marktechpost.com

导出 Markdown