阿里巴巴Page Agent：前端AI智能体实现自然语言控制网页操作

Page AgentAI AgentDOM操作

于 2026-07-07 15:36:42 修改

·本内容遵循CC 4.0 BY-SA版权协议

在日常 Web 开发中，我们经常遇到需要自动化操作网页的场景：测试人员要编写繁琐的 UI 自动化脚本，产品经理希望为 SaaS 系统添加智能助手功能，开发者需要为残障人士提供语音控制支持。传统方案如 Selenium、Playwright 等工具虽然功能强大，但都需要在浏览器外部运行，配置复杂且存在跨域限制。

阿里巴巴开源的 Page Agent 正是为了解决这些问题而生。这款纯前端 JavaScript 库只需在网页中嵌入一段 JS 代码，就能让用户通过自然语言指令直接控制页面操作，将 AI Agent 能力"内嵌"到网页本身。无论是为现有系统快速添加 AI Copilot 功能，还是实现智能表单填写、无障碍访问等场景，Page Agent 都提供了极低的集成门槛。

本文将完整介绍 Page Agent 的技术原理、环境搭建、核心 API 使用、实战案例以及生产环境注意事项，帮助前端开发者和全栈工程师快速掌握这一创新工具。

1. Page Agent 核心概念与技术背景

1.1 什么是 Page Agent？

Page Agent 是阿里巴巴开源的一款基于 TypeScript 开发的 Web GUI 智能体库，其核心创新在于"页面内智能体"（In-Page Agent）范式。与传统浏览器自动化工具从外部控制浏览器的思路不同，Page Agent 直接运行在目标网页的 JavaScript 环境中，通过解析自然语言指令来操作当前页面的 DOM 元素。

这种设计带来了几个关键优势：首先，它天然避免了跨域安全限制，因为 Agent 与目标页面同源；其次，无需配置复杂的浏览器驱动或无头浏览器环境；最后，操作延迟极低，所有处理都在客户端完成，不依赖网络往返。

1.2 与传统自动化工具的对比

为了更好地理解 Page Agent 的定位，我们将其与主流方案进行对比：

特性	Page Agent	Playwright/Selenium	浏览器扩展
运行环境	页面内 JS 环境	外部 Node.js/Python 进程	浏览器扩展沙箱
安装配置	一行 script 标签或 npm install	需要安装浏览器驱动	需要用户安装扩展
跨域支持	天然支持同源页面	需要复杂配置	受限
多页面协作	通过 Chrome 扩展支持	原生支持	原生支持
视觉依赖	纯文本 DOM 解析	可结合视觉	可结合视觉

从对比可以看出，Page Agent 最适合的场景是为现有 Web 应用快速添加智能操作能力，特别是当你不希望用户安装额外软件或配置复杂环境时。

1.3 核心技术原理

Page Agent 的技术架构基于几个关键组件：

DOM 文本化解析：Page Agent 会将页面的 DOM 结构转换为文本描述，包括元素的标签名、类名、ID、文本内容、可见性状态等关键属性。这种文本化表示让 LLM 能够理解页面结构，而无需依赖计算密集型的截图识别。

提示词工程：库内置了精心设计的 prompt 模板，指导 LLM 将自然语言指令转换为具体的 DOM 操作序列。例如，当用户说"点击登录按钮"时，prompt 会引导模型寻找具有登录相关文本或属性的按钮元素。

操作执行引擎：识别出目标元素后，Page Agent 会模拟真实的用户操作，包括 click、input、scroll、focus 等事件，确保操作能够触发页面的正常交互逻辑。

2. 环境准备与快速开始

2.1 系统要求与兼容性

Page Agent 对运行环境的要求相当宽松：

浏览器支持：所有现代浏览器（Chrome 70+、Firefox 65+、Safari 12+、Edge 79+）
JavaScript 版本：ES6+ 环境
TypeScript：可选，库提供完整的类型定义
LLM API：需要接入支持 OpenAI 兼容接口的大模型服务

2.2 两种集成方式

根据你的使用场景，可以选择不同的集成方案：

方案一：CDN 引入（适合快速原型验证）

HTML

<!DOCTYPE html>

<head>

<title>Page Agent 演示</title>

</head>

<body>

// 页面加载后自动初始化（demo 版本）

// 生产环境建议使用手动初始化方式

window.addEventListener('load', async () => {

try {

const agent = new window.PageAgent({

model: 'qwen3.5-plus',

baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',

apiKey: '你的API密钥', // 需要替换为真实密钥

language: 'zh-CN'

});

// 测试简单指令

await agent.execute('点击登录按钮');

console.log('操作执行完成');

} catch (error) {

console.error('Page Agent 初始化失败:', error);

}

});

</script>

</body>

</html>

方案二：NPM 安装（适合生产项目）

BASH

# 使用 npm 安装

npm install page-agent

# 或使用 yarn

yarn add page-agent

# 或使用 pnpm

pnpm add page-agent

在模块化项目中的使用方式：

JAVASCRIPT

// 在 ES Module 环境中

import { PageAgent } from 'page-agent';

// 或者在 CommonJS 环境中

const { PageAgent } = require('page-agent');

// 初始化 Agent

const agent = new PageAgent({

model: 'gpt-3.5-turbo', // 或其他支持的模型

baseURL: 'https://api.openai.com/v1', // 你的 LLM API 地址

apiKey: process.env.LLM_API_KEY, // 从环境变量读取

language: 'zh-CN'

});

// 在适当的时机执行指令

const executeCommand = async (command) => {

try {

await agent.execute(command);

console.log(`指令 "${command}" 执行成功`);

} catch (error) {

console.error(`指令执行失败:`, error);

}

};

// 使用示例

executeCommand('在用户名输入框中填写"testuser"');

2.3 获取 LLM API 密钥

Page Agent 需要接入大模型服务来理解自然语言指令。目前支持所有兼容 OpenAI API 格式的服务：

JAVASCRIPT

// 支持的主流服务配置示例

const configs = {

// OpenAI 官方服务

openai: {

model: 'gpt-3.5-turbo',

baseURL: 'https://api.openai.com/v1',

apiKey: 'sk-xxx'

// 阿里云通义千问

qwen: {

model: 'qwen-plus',

baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',

apiKey: 'sk-xxx'

// 其他兼容服务

custom: {

model: 'your-model-name',

baseURL: 'https://your-llm-service.com/v1',

apiKey: 'your-api-key'

}

};

建议在正式使用前申请相应服务的 API 密钥，并注意设置用量限制以防意外费用。

3. 核心 API 与配置详解

3.1 PageAgent 构造函数配置

PageAgent 类提供了丰富的配置选项来适应不同场景：

JAVASCRIPT

const agent = new PageAgent({

// 必需配置

model: 'gpt-3.5-turbo',

baseURL: 'https://api.openai.com/v1',

apiKey: 'your-api-key-here',

// 可选配置

language: 'zh-CN', // 界面语言，支持 'en-US', 'zh-CN' 等

maxTokens: 1000, // 最大令牌数

temperature: 0.1, // 生成温度，较低值使输出更确定

timeout: 30000, // 请求超时时间（毫秒）

// 高级配置

retry: {

attempts: 3, // 重试次数

delay: 1000 // 重试延迟

// DOM 解析配置

dom: {

includeInvisible: false, // 是否包含不可见元素

maxDepth: 10, // DOM 遍历最大深度

excludedSelectors: ['.ad-container', '[data-testid]'] // 排除的选择器

// 操作安全限制

safety: {

confirmBeforeActions: ['submit', 'dele

最低 0.47元/天开通会员,解锁全文

成为会员后, 你将解锁

下载资源随意下

优质VIP博文免费学

优质文库回答免费看

付费资源9折优惠