# 阿里巴巴发布 Page Agent：开源 JavaScript 库实现网页 DOM 自然语言操控 - 来源：MarkTechPost（RSS） - 作者：Asif Razzaq - 发布时间：2026-07-03 04:51 - AIHOT 分数：70 - AIHOT 标记：精选 - AIHOT 链接：https://aihot.virxact.com/items/cmr3zye9z00qfslw2sg1izmks - 原文链接：https://www.marktechpost.com/2026/07/02/meet-alibabas-page-agent-a-javascript-in-page-gui-agent-that-controls-web-interfaces-with-natural-language-through-the-dom ## 精选理由 Page Agent 把浏览器自动化从外部驱动变成页面内 JS，读 DOM 而非截图，让 SaaS 内的 AI 助手成本更低、更精准，适合自己产品内嵌 copilot 的团队。 ## AI 摘要 阿里巴巴发布 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 处理和提示词均源自该项目。 摘要 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，并附带一个免费的测试用大语言模型： 该演示端点仅用于技术评估。生产环境需要使用你自己的模型凭证。 对于构建，请安装该包并配置你的端点： 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）驱动它。