# 阿里巴巴发布 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 处理和提示词均源自 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，并附带一个免费的测试用大语言模型： 复制代码已复制使用其他浏览器 该演示端点仅供技术评估使用。生产环境需要你提供自己的模型凭证。 对于构建，请安装该包并配置你的端点： 复制代码已复制使用其他浏览器 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）驱动它。