Page-Agent：用自然语言接管前端 DOM
当传统的自动化脚本还在艰难地寻找 DOM 节点时，Page-Agent 已经在你的网页里主动问用户：'这份 30 个字段的报销单，我已经帮你填好了，还需要核对一下再提交吗？'
一、核心定义与架构
Page-Agent 不是一个传统的自动化测试工具，而是一个完全运行在浏览器环境下的、能直接将自然语言转化为 DOM 操作的'意图执行'层。
1.1 与传统方案的区别
| 维度 | 传统自动化 (Puppeteer/RPA) | Page-Agent 的变革 | 核心价值 |
|---|---|---|---|
| 运行环境 | Server-Based 需要 Node.js/Python 甚至完整的无头浏览器。 | Client-First 完全运行在当前网页的 JavaScript 线程中。 | 零后端成本 完美继承当前用户的 Session 和登录态，无需处理鉴权。 |
| 识别模式 | Vision-Heavy 依赖截图和昂贵的多模态视觉大模型（极慢）。 | Text-Based DOM 深度脱水解析 DOM 树结构，纯文本输入大模型。 | 极速且精准 即使没有强大的多模态能力，普通大语言模型也能精准点击。 |
| 交互场域 | Siloed App 运行在后台，用户看不见摸不着。 | In-Page UI 自带 UI 面板直接浮在你的网页上，支持 Human-in-the-loop。 | 无感融入 它就像是你网站原生自带的一个智能客服助手。 |
1.2 技术架构
Page-Agent 采用了'前端探针 + 云端大脑'的分离设计。
User / Natural Language Intent │ ▼ ┌───────────────────────────────┐ │ Page-Agent UI (Iframe) │ ← 隔离的交互面板 (Human-in-the-loop) └──────────────┬────────────────┘ │ (Message/Event) ┌────────┼────────┐ ▼ ▼ ▼ DOM Parser Agent Core LLM Client (脱水脱敏)(意图路由)(可插拔大脑) │ │ │ ▼ ▼ ▼ ================================= Host Webpage (宿主 DOM 环境)=================================
核心组件：
- Agent Core（端侧中枢神经）：运行在宿主网页的 JavaScript 线程中，直接触达底层的 DOM API，模拟人类触发原生的
click、input和scroll等事件。 - DOM Parser（高强度脱水器）：智能过滤掉所有的排版与布局标签，只提取出真正'可交互'的节点，大幅降低 Token 消耗并遏制 AI 的幻觉。
- LLM Client（可插拔大脑）：将'如何操作页面'交给了 Agent Core，而将'该做什么'交给了大模型。支持接入 Claude 3.5 Sonnet、GPT-4o、通义千问或本地 Ollama 节点。
二、核心功能
2.1 极简接入
Page-Agent 的核心哲学是'不碰后端代码'。它不是需要用户手动下载的沉重客户端，而是直接嵌入在网页中的'幽灵操作员'。
- Vanilla HTML/JS：一行
<script>CDN 引入，开箱即用。 - React / Vue / Angular：NPM 安装，提供无缝的 Hook 集成。
- Legacy 遗留系统：无论后台是用 jQuery 还是 JSP 写的，只要有 DOM 树，它就能管。
2.2 纯文本 DOM 操控
Page-Agent 采用了极其聪明的 DOM 脱水技术。它内置了一个解析引擎，能瞬间遍历当前网页，剔除所有无关的样式代码，提取出纯净的'可交互意图地图'。
示例场景： 你：'把列表里状态为'待审核'的报销单全部打回，并备注'发票不清晰'。' Page-Agent：(不到 1 秒钟) '已为您处理完毕 3 笔待审核订单。'
2.3 开放的模型生态
- 智力巅峰：GPT-4o, Claude 3.5 Sonnet（复杂逻辑）。
- 性价比之王：通义千问 (Qwen-Max)、DeepSeek-V3（日常高频任务）。
- 隐私堡垒：Ollama 运行本地开源模型（内网核心数据）。
2.4 跨标签页魔法
结合 Chrome Extension，Page-Agent 可以突破浏览器的同源策略限制，实现跨 Tab 的数据搬运和调度。
三、实际使用场景
3.1 Smart Form Filling
业务员直接在界面的悬浮框里语音输入或随手打字，Agent 自动定位并填写姓名、公司、职位及电话字段，最后停在提交按钮等待人工确认。
3.2 Zero-Cost Copilot
前端工程师只需花 5 分钟在 index.html 里加了一行 <script> 标签。AI 直接利用现有的前端页面元素来实现功能，如'导出本周活跃用户报表'，无需后端开发新接口。
3.3 Invisible Onboarding
新员工面对复杂的 B2B 后台，只需用自然语言说出意图，Page-Agent 就能将操作过程可视化地呈现出来，高亮显示入口并引导点击。
3.4 Cross-System Bridge
在企查查页面读取企业核心信息，自动切换至 CRM 标签页，新建客户并填入法人、税号等对应字段。
四、技术深度与安全
4.1 双重隔离架构
采用'Iframe 隔离 + Host 注入'的双刃剑设计：
- UI 沙箱：对话悬浮窗运行在独立 Iframe 中，零样式污染。
- AgentCore：直接注入到宿主页面的 JavaScript 线程中，拥有上帝权限，绕过跨域限制。
4.2 高强度 DOM 脱水
现代网页的 DOM 树极其臃肿。Page-Agent 内部集成了 DOM Parser，无情抛弃所有非交互元素，精准捕获 button、a、input 等元素，将其连同 aria-label 转化为极度精简的 JSON 或文本描述。
4.3 数据脱敏与安全底线
内置端侧数据脱敏拦截器。在提取出的 DOM 树发往云端大模型之前，必须经过本地正则与黑名单的洗礼：
- 默认保护：所有
<input type="password">的内容会被自动抹除。 - 语义模糊化：自动识别页面上的手机号、邮箱、身份证号，替换为掩码。
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
security: {
masking: {
enabled: true,
maskedSelectors: ['.revenue-data', '#user-balance'],
regexPatterns: [
{ pattern: /\b\d{11}\b/g, replacement: '[PHONE_MASKED]' },
{ pattern: /¥\d+(,\d{3})*(\.\d{1,2})?/g, replacement: '[MONEY_MASKED]' }
]
}
}
})
五、部署指南
5.1 快速启动（CDN）
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js" crossorigin="true"></script>
5.2 NPM 工程化部署
npm install page-agent
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'qwen3.5-plus',
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
apiKey: process.env.VITE_APP_LLM_API_KEY,
language: 'zh-CN'
})
document.getElementById('magic-ai-button').addEventListener('click', async () => {
await agent.execute('提取当前列表中所有的待办事项，并帮我新建一个工作汇报草稿。')
})
5.3 配置解密
生产环境下建议开启数据脱敏和动作节流保护。
const agent = new PageAgent({
security: {
masking: { enabled: true }
},
action: {
requireConfirmation: true // 强制弹窗要求人类确认
}
})
六、适用性评估
6.1 适合场景
- 复杂 B2B/SaaS 架构师：老旧 ERP/CRM 系统智能化改造。
- 效率工具开发者：利用现有网页工作流自动化，避免维护后端爬虫。
- 遗留系统维护者：无法修改后端代码，仅能在展现层外挂。
6.2 不适用场景
- Canvas/WebGL 重度依赖：如在线 3D 游戏或基于 Canvas 的设计软件，Page-Agent 无法提取 DOM 树。
- 跨系统操作：涉及打开本地 Excel 或发送微信消息等非网页操作。
- 纯 C 端大流量产品：频繁调用大模型 API 可能导致成本过高。
七、资源汇总
- GitHub 核心仓库：alibaba/page-agent
- 官方文档：https://alibaba.github.io/page-agent/
- Chrome 扩展：搜索 "Page Agent Ext"
结语
Page-Agent 的出现，让我们看到了 Web 交互的终极形态——图形用户界面（GUI）与自然语言（LUI）不是互相取代的关系，而是完美的共生体。在这个大模型能力全面溢出的时代，你可以选择继续痛苦地点击鼠标，或者用一行简单的 JavaScript 代码彻底解放双手。
