阿里开源 Page Agent｜纯前端 GUI 智能体，一行 JS 实现网页自然语言操控

前言

做 SaaS 后台、企业 ERP、管理系统的开发者，总会遇到两大痛点：

1. 系统操作链路极深：新增数据、审批表单要连续十几步点击，新手上手成本极高，客服工单暴增；
2. 传统自动化太重：Playwright、browser-use、Selenium 依赖 Python / 无头浏览器，需要维护登录态、Cookie 同步，无法嵌入现有产品给终端用户使用；
3. 多模态视觉方案成本高：靠截图识别页面的多模态 LLM 计费昂贵，识别不稳定，弹窗、动态表单极易识别失败。

今天介绍阿里最新开源 page-agent，一款运行在网页内部的 GUI 智能体，仅引入一段 JS 脚本，无需后端改造、无需浏览器插件，直接让用户用中文 / 英文自然语言操控页面 DOM，一键完成填表、查询、数据录入、流程审批等操作。项目采用 MIT 开源协议，支持商用，适配通义、GPT、Claude 等所有兼容 OpenAI 接口的大模型，配套 Chrome 扩展、MCP 服务实现跨多标签页复杂工作流。

一、Page Agent 核心定位与底层优势

1.1 项目定义

Slogan：The GUI Agent Living in Your Webpage（驻留在网页内的 GUI 智能体） 和传统浏览器自动化工具完全区分：

• 传统方案：外部进程（Python 无头浏览器 / 插件）远程操控页面，存在登录态、跨域、权限同步难题；
• Page Agent：纯前端 JS 运行在当前页面上下文，天然继承用户登录 Cookie、页面权限，直接解析 DOM 文本，不需要截图、不需要多模态视觉模型。

1.2 核心技术亮点

1. 纯文本 DOM 解析，零视觉依赖 不截图、不调用图像大模型，直接提取页面 HTML 交互元素（按钮、输入框、下拉、复选框），速度更快、成本更低，复杂动态表单识别准确率远高于视觉方案。
2. 零后端改造，一行 CDN 接入 仅在页面引入 script 标签即可启用，后端接口、业务逻辑完全不用改动，适合存量 SaaS 快速上线 AI 助手。
3. 兼容任意 LLM 自研模型适配器，支持通义千问、GPT 系列、Claude、DeepSeek 等所有 OpenAI 兼容 API，自由切换模型服务商。
4. 安全管控机制 提供操作白名单、敏感字段掩码（手机号 / 银行卡自动屏蔽不传入 LLM），防止 AI 执行删除、批量导出等高风险操作。
5. 扩展双能力 可选 Chrome 扩展实现多标签页跨站任务；内置 Beta 版 MCP Server，支持 Claude Code 等 Agent 远程操控浏览器页面。

1.3 Page Agent vs browser-use / Playwright 对比

二、完整项目目录结构

page-agent/
├── packages/          # TS核心源码包（代理核心、DOM解析、模型适配器）
├── scripts/           # 打包、校验、构建脚本
├── .agents/skills     # 内置Agent技能库（表单、查询、导出等）
├── .vscode/           # 开发配置
├── docs/              # 中英双语完整文档
│   ├── CLAUDE.md      # MCP对接Claude教程
│   └── AGENTS.md      # 自定义技能开发文档
├── LICENSE            MIT开源协议
├── README / README_zh 中英双语说明
└── package.json       TS项目配置，支持npm安装

项目基于 TypeScript 开发，代码占比 80.7%，轻量无重型依赖，打包后 JS 体积极小，不会大幅增加页面加载耗时。

三、3 种快速接入方式（实战可直接复制代码）

方式 1：CDN 快速体验（推荐测试演示）

内置阿里免费演示通义模型，仅用于功能验证，生产环境请替换自有 LLM Key

<!-- 国际CDN -->
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.8.2/dist/iife/page-agent.demo.js" crossorigin="true"></script>

<!-- 国内镜像（国内网站优先） -->
<script src="https://registry.npmmirror.com/page-agent/1.8.2/files/dist/iife/page-agent.demo.js"></script>

<!-- 禁止自动初始化，手动实例化 -->
<script src="xxx?autoInit=false"></script>

方式 2：NPM 项目正式接入（生产环境）

npm install page-agent

TS/JS 完整初始化示例（接入通义千问 API）

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
  model: 'qwen3.5-plus',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  apiKey: '你的通义API Key',
  language: 'zh-CN',
  // 安全配置：敏感字段掩码、操作白名单
  maskFields: ['password', 'bankCard'],
  allowActions: ['click', 'input', 'select', 'scroll']
})

// 执行自然语言指令
await agent.execute('打开新增员工表单，姓名填张三，部门选研发部，职级P6，点击保存')

方式 3：自定义扩展业务 Tool（企业定制）

支持 Zod 定义入参，开发业务专属 AI 工具，例如购物车、知识库查询：

import { PageAgent, tool } from 'page-agent'
import { z } from 'zod'

const agent = new PageAgent({
  apiKey: 'xxx',
  customTools: {
    addCart: tool({
      description: '根据商品ID加入购物车',
      inputSchema: z.object({
        productId: z.string(),
        quantity: z.number().default(1)
      }),
      execute: async (input) => {
        await fetch('/api/cart', {
          method: 'POST',
          body: JSON.stringify(input)
        })
        return `成功添加${input.quantity}件商品`
      }
    })
  }
})

四、两大扩展能力：Chrome 扩展 + MCP 服务

4.1 Chrome 扩展（跨多标签页任务）

原生 Page Agent 仅能操作当前页面，安装官方扩展后可实现：

1. 多浏览器标签页切换、新开页面；
2. 跨网站数据流转（A 站导出数据填入 B 站表单）；
3. 外部脚本调用页面 Agent 执行操作。 调用示例：

javascript

运行

const res = await window.PAGE_AGENT_EXT.execute(
  '打开京东，搜索无线鼠标，对比前3款价格与评价'
)

安全限制：扩展需要用户手动授权 Token，禁止第三方无权限调用。

4.2 MCP Server（Beta，AI 代码工具联动）

内置 Model Context Protocol 服务，支持 Claude Code、Codex 等本地智能体远程操控浏览器页面，开发、测试流程自动化：

1. AI 写完表单代码，直接调用浏览器填入测试数据；
2. 自动抓取文档页面生成接口文档；
3. 本地 Agent 自动完成后台功能回归测试。 配套文档 CLAUDE.md 提供完整对接配置。

五、6 大落地真实业务场景

场景 1：SaaS/ERP 系统内置 AI Copilot（最高频）

企业管理后台、CRM、财务系统操作步骤繁琐，集成 Page Agent 后，用户一句话完成复杂流程： 指令示例：帮我录入3月销售报销单，金额2300元，归属市场部，上传发票附件并提交审批 收益：新手学习成本下降 70%，客服工单减少 60%。

场景 2：智能表单一键填充

长入职表、申报系统、电商下单页，无需逐个输入，自然语言批量填写字段，支持下拉、单选、文件上传。

场景 3：网页无障碍访问（政务 / 公共平台）

视障、老年用户通过语音文字指令操控网站，无需精细鼠标操作： 指令示例：查询本月社保缴费记录，导出PDF保存 大幅提升政务网站无障碍合规评分。

场景 4：运营批量自动化

电商商家后台、自媒体平台批量修改商品、发布内容、导出报表，重复操作交给 AI 完成。

场景 5：前端自动化测试

开发者写自然语言测试用例，Agent 自动点击、输入、校验页面结果，快速完成回归测试，不用编写复杂 Playwright 脚本。

场景 6：文档智能提取

自动过滤导航、广告，提取正文，整理 Markdown 文档、表格数据导出，适合研发知识库归档。

六、Page Agent 完整使用流程

1. 页面引入 JS 脚本 / NPM 引入依赖，配置自有 LLM 密钥；
2. 配置安全规则（敏感字段掩码、允许操作）；
3. 定义自定义业务 Tool（可选）；
4. 用户输入中文自然语言指令；
5. Agent 解析当前 DOM，拆分多步操作；
6. 自动执行点击、输入、下拉、滚动等交互；
7. 返回执行结果，失败自动重试或提示用户修正指令；
8. 如需跨页面，启用 Chrome 扩展；如需本地 AI 联动，启动 MCP 服务。

七、核心优势总结

1. 轻量化无侵入 纯前端方案，存量项目零后端改造，几分钟集成上线；
2. 无视觉依赖，成本更低：不用付费多模态模型，DOM 文本解析极速稳定；
3. 天然登录态复用，解决传统自动化 Cookie 同步痛点；
4. 模型中立，兼容所有 OpenAI 格式大模型，切换无改造成本；
5. 安全可控，字段掩码、操作白名单规避数据泄露风险；
6. 可扩展双生态：Chrome 扩展跨页面 + MCP 对接本地 AI 智能体；
7. MIT 开源免费商用，阿里官方持续迭代，更新稳定（当前最新 v1.8.2）。

八、常见问题避坑指南

Q1 为什么执行指令无响应？

• 检查 LLM ApiKey 是否有效、接口地址填写正确；
• 页面动态渲染元素等待 DOM 加载完成后再执行指令；
• 高风险操作未加入 allowActions 白名单会被拦截。

Q2 能否用于爬虫批量采集？

不适合。Page Agent 设计面向终端用户产品内置助手，爬虫场景推荐 browser-use/Playwright。

Q3 国内网站用什么模型？

优先通义千问、DeepSeek 兼容接口，演示 CDN 内置免费通义测试模型，生产必须替换自有密钥。

Q4 扩展 Chrome 插件有安全风险吗？

需要用户手动授权访问 Token，第三方无法私自调用，敏感业务建议关闭扩展功能。

Q5 支持 Vue/React 等框架页面吗？

完全兼容，无论原生 JS、Vue、React、Angular，均可正常解析 DOM 交互元素。

九、适用人群

1. 前端 / 全栈开发者：给自有 SaaS、后台快速增加 AI 助手；
2. 产品负责人：降低系统使用门槛，提升产品竞争力；
3. 政务 / 公共平台开发：无障碍数字化改造；
4. AI Agent 开发者：通过 MCP 打通代码工具与浏览器页面；
5. 运营 / 产品自动化需求：减少重复网页操作。

十、总结

在浏览器自动化、网页 AI 助手赛道，Page Agent 走出了和传统工具完全不同的轻量化客户端路线。它抛弃重型外部浏览器方案，以页面内置 JS 智能体为核心，完美解决 SaaS 产品嵌入 AI 操控的各类痛点：登录同步、部署复杂、视觉识别成本高等。