上周有个做 SaaS 的朋友跟我吐槽他们的 CRM 系统功能堆了上百个按钮客户 onboarding 周期拉到两周光教用户怎么填表单就消耗了 1/3 的售后服务工时。他不是第一个这么说的。几乎每个人都在面对同一个问题——给网页加个 AI 助手怎么就这么难传统方案基本两条路要么重写后台搞一套 Agent 编排逻辑要么上 Playwright/Puppeteer 装无头浏览器从外部控制页面。前者改造成本高到老板皱眉后者依赖截图和多模态模型延迟大、成本高、用户还得装扩展。上周我刷 GitHub Trending 时发现一个项目彻底刷新了我的认知——阿里巴巴开源的 Page Agent。20k starsMIT 协议一行script标签就能让你的网页听懂人话。我花了一晚上跑通 Demo 又做了两个真实项目集成今天这篇把完整的上手流程和关键原理拆给你看。Page Agent 是什么两句话讲清楚Page Agent 是一个纯前端 JavaScript GUI Agent直接住在你的网页里通过自然语言操作 DOM 元素。它不是浏览器自动化工具——不要拿它和 Playwright、Puppeteer 比。它的定位是客户端的 Web 增强层维度Playwright / browser-usePage Agent运行位置外部进程控制浏览器直接嵌入页面内部感知方式截图 多模态 LLM纯文本 DOM 解析部署方式Python 后端 浏览器驱动一行script标签权限需求浏览器扩展或 CDP 连接无额外权限典型场景E2E 测试、爬虫、自动化SaaS AI Copilot、ERP 智能助手它的设计哲学很务实不追求炫技只追求让开发者用最少的代码给产品加上 AI 交互能力。第一步30 秒跑通 Demo最快的方式是直接通过 CDN 引入page-agent.demo.js。在任意网页的浏览器控制台运行(function(){varsdocument.createElement(script);s.srchttps://cdn.jsdelivr.net/npm/page-agent1.10.0/dist/iife/page-agent.demo.js;document.head.appendChild(s);})();跑完后页面右下角会出现一个浮动按钮点击即可打开 AI 对话面板。试试输入“点击页面上的第一个按钮然后把第 3 个输入框的内容清空”Page Agent 会解析你的指令找到对应 DOM 元素并执行操作。整个过程不需要截图不需要多模态模型纯文本搞定。如果你用的是 DashScope阿里云灵积甚至可以不用配 API Key——官方 Demo 默认带了一个免费测试用的 LLM 端点。第二步在自己的项目里集成NPM 安装生产环境推荐npminstallpage-agent然后在你的 React/Vue/原生 JS 项目中初始化完整的解决方案就在后半部分包含可直接复用的代码模板【关注后可见】import{PageAgent}frompage-agent;constagentnewPageAgent({model:qwen3.5-plus,baseURL:https://dashscope.aliyuncs.com/compatible-mode/v1,apiKey:process.env.DASHSCOPE_API_KEY,language:zh-CN,});// 让用户说一句话就能完成复杂操作awaitagent.execute(帮我填好这个表单客户名是张三科技联系人邮箱是 zhangexample.com然后提交);CDN 方式快速原型scriptsrchttps://cdn.jsdelivr.net/npm/page-agent1.10.0/dist/iife/page-agent.demo.jscrossorigintrue/script支持的模型端点Page Agent 兼容任何 OpenAI 格式的 API你可以自由切换提供商Base URL推荐模型DashScope (阿里云)https://dashscope.aliyuncs.com/compatible-mode/v1qwen3.5-plusOpenAIhttps://api.openai.com/v1gpt-4o-miniOpenRouterhttps://openrouter.ai/api/v1anthropic/claude-sonnet-4.6本地 Ollamahttp://localhost:11434/v1qwen2.5:7b一点经验实测qwen3.5-plus在中文场景下对 DOM 操作指令的理解非常精准性价比最高的组合是 DashScope Page Agent延迟和成本都控制在毫秒级。第三步原理拆解——它不靠截图怎么认按钮这是 Page Agent 最值得关注的技术点。传统 GUI Agent 依赖「截图 → 多模态 LLM 看图 → 决定动作」的链路这套方案的瓶颈很明显截图需要 GPU 渲染浏览器 Tab 被切换到后台时还截不到图像 token 成本高一张截图 ≈ 1000 tokens延迟大多模态模型的推理速度比纯文本模型慢得多Page Agent 的方案叫DOM 脱水DOM Dehydration页面实时 DOM ↓ DOM 脱水压缩 → FlatDomTree纯文本结构 ↓ 喂给纯文本 LLM → LLM 输出操作指令 ↓ Agent 将指令翻译成 DOM 操作方法 ↓ 执行 click()、input.value xxx 等操作所谓 FlatDomTree就是把嵌套的 DOM 树压平为带层级缩进的文本结构。LLM 看到的大概是这样[Button] 登录 [Input] 用户名 input#username [Input] 密码 input#password [Button] 注册新账号 └─ [Link] 忘记密码这种「够用即可」的工程思维非常值得学习——大多数 Web 交互不需要看懂按钮长什么样只需要知道按钮在哪里、叫什么、做什么就够了。Page Agent 官方承认了这套 DOM 处理方案继承自 browser-use 项目MIT 协议合规引用。站在巨人肩膀上挑最务实的部分拿过来比从头造轮子聪明得多。进阶玩法MCP Server 集成Page Agent 还提供了一个 Beta 版的 MCP Server让你可以从外部 AI 客户端Claude Desktop、Cursor 等通过 MCP 协议远程控制浏览器# 启动 Page Agent MCP Servernpx page-agent-mcp-server# MCP 客户端配置示例{mcpServers:{page-agent:{command:npx,args:[page-agent-mcp-server],env:{PAGE_AGENT_MODEL:qwen3.5-plus,PAGE_AGENT_BASE_URL:https://dashscope.aliyuncs.com/compatible-mode/v1}}}}这意味着你可以在 Cursor 中直接说「帮我打开那个后台管理页面找到昨天创建的订单把状态改为已发货」Page Agent 就会作为一个 MCP 工具被外部 Agent 调用真实地操作浏览器来完成这个任务。这是我目前看到的最实用的 Agent 浏览器控制方案——不依赖多模态模型、不需要处理截图的像素级匹配、部署成本几乎为零。安全与局限所有页面内的 JS Agent 都面临一个核心问题一旦注入恶意指令Prompt Injection可能触发危险操作。目前 Page Agent 的设计中有以下防护手段自定义工具Custom Tools你可以用 Zod Schema 对外暴露的操作做参数校验数据脱敏Data Masking敏感字段如密码、Token可以从 FlatDomTree 中排除人工确认工作流临界操作如提交订单、删除数据可以挂载 human-in-the-loop 确认// 自定义工具示例带参数校验的提交操作import{z}fromzod;agent.registerTool(submitOrder,{parameters:z.object({orderId:z.string().min(1),confirmItems:z.boolean(),}),execute:async({orderId,confirmItems}){if(!confirmItems)return请先确认订单明细;// 执行提交...return订单${orderId}已提交;},});局限也是明确的⚠️ 只适用于页内交互不适合跨页面工作流页面跳转后状态重置⚠️ 依赖页面 DOM 的语义化程度——全是div和span的网站识别率会下降⚠️ 不支持需要视觉判断的场景如「把那个红色的按钮点一下」值得关注的方向Page Agent 的页内 Agent 范式正在被越来越多的人注意到。我个人的判断SaaS AI Copilot 的集成门槛降到了零——之前给产品加 AI 助手动辄几周现在一个 script 标签就能搞定MCP Page Agent 的组合是 Agent 控制浏览器的务实路径——避开了多模态模型的高成本和延迟纯文本 DOM 操作在大多数 Web 场景下完全足够——「够用即可」的工程取舍值得学习如果你正在给别人做 SaaS 产品或内部管理系统Page Agent 是目前我看到的最快让产品「开口说话」的方案。一行script一个好的大模型 API几分钟就能让用户用自然语言给你的产品下指令。比我预想的简单太多了。延伸阅读GitHub Copilot 6月起按Token计费你的账单涨了多少3套替代方案与迁移实战指南看完有收获点个关注 我会持续分享更多AI编程实战教程。