### [阿里巴巴 Page-Agent 深度解析：无需视觉模型，纯 JavaScript 实现网页 GUI 自动化控制](https://www.qiqiwa.com/article/521)

**Published:** 2026-03-17T08:15:31

**Author:** Hello

**Excerpt:** 在 AI Agent 飞速发展的今天，自动化操作网页通常依赖于 Puppeteer 等厚重的后端驱动程序，或者需要消耗巨大 Token 的视觉模型（Vision Model）来识别截图。这种方式不仅延迟高、部署复杂，而且隐私性较差。 Pag

在 AI Agent 飞速发展的今天，自动化操作网页通常依赖于 Puppeteer 等厚重的后端驱动程序，或者需要消耗巨大 Token 的视觉模型（Vision Model）来识别截图。这种方式不仅延迟高、部署复杂，而且隐私性较差。

**Page-Agent** 是由阿里巴巴团队推出的新一代 **In-Page GUI Agent** 框架。它完全运行在浏览器页面内部，通过纯 JavaScript 驱动，能够将复杂的 DOM 结构智能“脱水”为大模型易于理解的纯文本。这意味着你可以仅凭自然语言，就能让 AI 在你的 SaaS 系统、ERP 或任何复杂网页上像真人一样进行点击、输入和滚动，而无需昂贵的视觉推理。

* * *

## 简介

**Page-Agent** 是一款革命性的网页原生智能体工具。它解决了传统自动化工具的三大痛点：**环境依赖重**（需要 Python/Node 后端）、**Token 消耗高**（截图识别非常贵）以及**操作精度差**。

该项目的核心思想是“**赋予网页自我意识**”。通过在前端注入一个轻量级的 JS 代理，Page-Agent 能够实时感知页面状态，并将操作逻辑交给大模型（如通义千问、GPT-4）处理。它将网页操作从“模拟像素点击”进化到了“语义化 DOM 操控”。

## 核心功能

-   **原生 JS 驱动**：无需安装 Python 或任何后端驱动，直接在浏览器控制台或 HTML 中引入即可使用。 ⚡
-   **高效 DOM 脱水**：独创的文本压缩技术，将冗长的 HTML 转化为精简的语义文本，大幅降低 LLM 的 Token 开销。 📉
-   **无需视觉模型**：通过理解元素属性（ID, Class, Text）而非图像进行决策，操作精度更高，适配性更强。 🎯
-   **工具调用（Tool-Use）集成**：完美适配大模型的 Function Calling 机制，支持点击、输入、滚动、等待等一系列原子操作。 🛠️
-   **极低延迟**：由于决策逻辑与页面执行都在浏览器端（或通过 API 快速交互），响应速度远超视觉方案。 🚀
-   **隐私保护**：所有 DOM 数据处理均在本地进行，无需上传页面截图到云端。 🔒

## 技术参数对比

| **特性** | **传统视觉 Agent (如 UFO)** | **Page-Agent** |
| --- | --- | --- |
| **推理资源** | 高（需要 Vision LLM） | 低（普通文本 LLM 即可） |
| **部署方式** | 复杂（后端环境+驱动） | 极简（Script 注入/NPM） |
| **准确率** | 受分辨率和布局影响 | 受 DOM 语义清晰度影响 |
| **Token 成本** | 极高（单次交互数千 Token） | 极低（数百 Token） |

* * *

## 准备工作

在部署 Page-Agent 之前，请确保你已具备以下环境：

1.  **大模型 API 密钥**：支持 Tool Call 功能的模型（推荐 **Qwen-Max**, **Qwen-Plus** 或 **GPT-4o**）。
2.  **开发环境**：
    -   若使用 NPM 方式，需安装 **Node.js 18+**。
    -   若使用 CDN 方式，仅需一个现代浏览器（Chrome/Edge）。
3.  **网络环境**：能够正常调用大模型 API 接口。

* * *

## 部署步骤

Page-Agent 提供了多种灵活的接入方式，满足从个人演示到企业级集成的不同场景。

## 方案一：通过 CDN 一行代码引入 (最快体验)

这种方式最适合在现有网页中快速增加 AI 助手功能，或在浏览器控制台中直接调试。

```
<script src="https://unpkg.com/@alibaba/page-agent/dist/index.js"></script>

<script>
  const agent = new PageAgent({
    apiKey: 'YOUR_LLM_API_KEY',
    model: 'qwen-max',
    baseURL: 'https://dashscope.aliyuncs.com/api/v1', // 对应模型的 API 终点
  });

  // 启动 Agent 并下达指令
  agent.run("帮我把这个页面的背景色改成浅蓝色，并搜索 '阿里巴巴'");
</script>
```

* * *

## 方案二：使用 NPM 集成到工程项目

如果你正在开发一个 SaaS 系统的 AI Copilot，推荐使用 NPM 包形式。

#### 1\. 安装依赖

```
npm install @alibaba/page-agent
```

#### 2\. 在业务代码中调用

```
import { PageAgent } from '@alibaba/page-agent';

const agent = new PageAgent({
  config: {
    // 这里的配置可以根据具体的 LLM 服务商进行调整
    provider: 'openai', // 兼容 OpenAI 协议的接口
    apiKey: process.env.AGENT_API_KEY,
  }
});

async function autoFillForm() {
  await agent.execute("找到页面上的注册表单，并填写默认测试信息");
}
```

* * *

## 方案三：源码编译与本地开发

如果你需要自定义“脱水”逻辑或增加新的原子操作工具，可以从源码构建。

#### 1\. 克隆仓库

```
git clone https://github.com/alibaba/page-agent.git
cd page-agent
```

#### 2\. 安装并构建

```
npm install
npm run build
```

#### 3\. 运行示例

项目中包含了多个 Playground 示例，可以帮助你理解 Agent 是如何在 React 或 Vue 页面中工作的：

```
npm run dev
```

* * *

## 核心配置项解析

在初始化时，你可以通过配置项优化 Agent 的表现：

```
{
  maxSteps: 10,        // 最大尝试步数，防止死循环
  interactive: true,   // 是否开启交互模式（人工确认后再执行）
  includeHidden: false // 是否包含隐藏元素，设为 false 可显著减少 Token 消耗
}
```

* * *

## 总结评价

**优点**：

-   **成本极度友好**：对于需要频繁操作网页的场景，Page-Agent 能帮你节省 80% 以上的 API 费用。 💰
-   **开发门槛低**：前端工程师无需学习复杂的自动化测试框架，只要会 JS 就能上手。 👩‍💻
-   **稳定性高**：直接操作 DOM 元素比图像识别更稳健，即使页面缩放或部分遮挡也不受影响。 🏗️

**缺点**：

-   **跨域限制**：受浏览器沙箱限制，在不使用插件的情况下，无法跨域名操作（例如从 A 网站直接跳到 B 网站）。 🚧
-   **对 DOM 规范有依赖**：如果网页充满了无意义的 `<div>` 嵌套且没有任何 Text 或 Class 描述，Agent 的理解能力会下降。 🧩

**适用建议**：

Page-Agent 非常适合作为 **SaaS 产品的内置 AI 助手**、**自动化报表填写工具** 或 **内部管理系统的智能导航**。如果你需要一个能够“听懂人话”并操作复杂后台界面的组件，它是目前的最佳选择。

* * *

## 项目地址

| **资源名称** | **链接地址** |
| --- | --- |
| **GitHub 仓库** | [alibaba/page-agent](https://github.com/alibaba/page-agent) |
| **官方文档** | [Page-Agent Wiki](https://github.com/alibaba/page-agent/blob/main/docs/README-zh.md) |
| **示例演示** | [Online Playground](https://alibaba.github.io/page-agent/) |

**Tags:** 开源项目

**Categories:** 项目笔记

---