# Page Agent – 阿里开源的 JavaScript GUI 智能体库

- Link: https://paooo.com/aigc-news/24007/
- Published: 2026-07-07T13:40:54+08:00
- Author: 站外新闻

## Page Agent是什么

Page Agent 是阿里巴巴开源的纯前端 JavaScript 智能体库，通过一行代码嵌入网页，可让
用户用自然语言操控页面 DOM 元素。客户端库采用DOM 脱水技术将复杂页面压缩为精简文本
树，支持任何 OpenAI 兼容模型，无需后端、截图或浏览器扩展，即可实现点击、填表、滚动
等交互，适合为自有 Web 应用快速添加 AI 副驾驶功能。

![Page Agent](https://paooo.com/wp-content/uploads/2026/07/Page-Agent-website-1.
avif)

## Page Agent的主要功能

 * **自然语言操控页面**：用户输入点击登录按钮、填写表单等指令，AI 自动定位并执行
   DOM 操作
 * **DOM 脱水压缩**：将复杂页面结构压缩为 FlatDomTree 文本树，仅提取交互元素，降低
   模型输入成本
 * **模型无关架构**：支持任何 OpenAI 兼容端点（如通义千问、GPT 等），只需配置 baseURL
   和 API Key
 * **内置安全控制**：支持操作白名单、敏感字段数据脱敏、关键操作人工确认，以及自定义
   领域知识注入
 * **单页交互闭环**：在单个页面内完成点击、输入、滚动等操作，无需后端服务或浏览器
   扩展

## Page Agent的技术原理

 * **DOM 脱水（DOM Dehydration）**：扫描页面 DOM，为每个交互元素分配索引、角色和
   标签，剥离冗余标记，生成紧凑文本表示供模型理解。
 * **PageController 架构**：核心控制器负责更新 DOM 树、执行元素点击、文本输入、页
   面滚动等原子操作。
 * **Monorepo 分包设计**：`@page-agent/core` 负责无头智能体逻辑，`page-agent` 提供
   完整 UI 面板，`@page-agent/page-controller` 处理 DOM 提取与索引。
 * **客户端沙箱运行**：直接运行在用户浏览器会话中，继承 Cookie、Session 和认证状态，
   无需额外后端。

![挖挖GitHub](https://paooo.com/wp-content/uploads/2026/07/wawagithub-7.avif)

微信关注回复“**开源**”，加入**AI开源项目交流群**

## 如何使用Page Agent

 * **快速体验**：在网页中插入一行 `<script>` 标签引入 Page Agent 的 IIFE 演示脚本，
   即可在页面上激活 AI 操控面板。
 * **安装依赖**：生产环境通过 `npm install page-agent` 安装依赖包，将其引入到你的
   前端项目中。
 * **创建实例**：用 `new PageAgent()` 创建实例，配置 model、baseURL、apiKey 等参数
   指向你的 OpenAI 兼容模型端点。
 * **执行指令**：调用 `agent.execute('你的自然语言指令')` 让 AI 解析指令并自动在
   页面 DOM 中定位元素、执行点击或输入等操作。
 * **安全配置**：可选配置操作白名单、数据脱敏规则和关键操作确认，确保 AI 行为符合
   安全与业务要求。

## Page Agent的核心优势

 * **零后端改造**：嵌入一行脚本即可，无需重写后端或分发浏览器扩展。
 * **低成本运行**：仅传输文本 DOM 结构，无需多模态视觉模型，显著降低 Token 消耗。
 * **原生安全继承**：页面原有的 UI 校验、权限规则继续生效，敏感数据可脱敏。
 * **模型无关**：支持任何 OpenAI 兼容端点，切换模型仅需改 baseURL。
 * **MIT 开源**：TypeScript 编写，代码完全开放，可自由定制。

## Page Agent的项目地址

 * **项目官网**：https://alibaba.github.io/page-agent/
 * **GitHub仓库**：https://github.com/alibaba/page-agent

## Page Agent的同类竞品对比

  |  维度 |  Page Agent |  Playwright |  
   |  **运行位置** |  页面内部（客户端 JavaScript） |  外部进程（Node.js/Python/.NET） |  
 |  **页面读取** |  脱水文本 DOM（FlatDomTree） |  CDP 协议直接访问浏览器 DOM |  
 |  **交互方式** |  自然语言指令驱动 |  代码脚本精确控制 |  
 |  **模型依赖** |  需 LLM 解析指令 |  无需 AI 模型，纯规则执行 |  
 |  **部署方式** |  嵌入一行 `<script>` 或 npm 安装 |  安装浏览器驱动 + 运行时环境 |  
 |  **认证状态** |  自动继承用户浏览器 Cookie/Session |  需手动配置上下文或登录流程 |  
 |  **视觉能力** |  无，纯文本 DOM |  支持截图、视觉比对、录屏 |  
 |  **跨页能力** |  单页为主，跨标签需 Chrome 扩展 |  原生支持多标签、多窗口、多浏览器 |  
 |  **适用场景** |  为已有 Web 应用添加 AI 副驾驶 |  端到端自动化测试、跨站爬虫 |  
 |  **学习成本** |  低，用户自然语言即可 |  中，需编写选择器和脚本 |

## Page Agent的应用场景

 * **SaaS 产品 AI 副驾驶**：在自家产品中嵌入助手，直接帮用户执行操作而非仅给出文字
   指引。
 * **智能表单填写**：将多步 ERP/CRM 表单压缩为一句指令，如”提交昨天午餐 50 元差旅
   报销”。
 * **无障碍访问**：结合 Web Speech API 实现语音控制网页，提升视障用户操作体验。
 * **遗留系统现代化**：为无 API 的旧系统添加自然语言命令栏，无需改动原始代码。