Page-Agent：一行 JS 代码实现大模型前端 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 代码彻底解放双手。