阿里巴巴开源了 PageAgentGitHub 9600 Stars一个纯前端 JavaScript GUI Agent 库。本文从技术架构DOM文本化 vs 截图识别、代码集成、模型兼容性、适用场景等角度做深度解读附实际接入代码和踩坑记录。适合做 SaaS 产品、企业管理后台的前端开发者。目录前言一、跟传统方案有什么不同1.1 传统 GUI 自动化的问题1.2 PageAgent 的 Inside-out 思路二、技术架构拆解2.1 核心工作流2.2 DOM 文本化2.3 代码接入三、实际试用和踩坑3.1 试用过程3.2 踩坑记录3.3 跨页面的问题四、适用场景分析五、总结六、参考资料前言上周刷 GitHub Trending 看到这个项目的时候说实话第一反应是又一个GUI自动化工具。但点进去看了下 README 和源码,发现它跟我之前用过的那些方案都不一样。它不是从外面控制浏览器而是直接住在网页里面。PageAgent 是阿里巴巴开源的一个 JavaScript 页面内 GUI AgentMIT 协议。截到今天 GitHub 上已经 9600 Stars 了。它的 slogan 是 “The GUI Agent Living in Your Webpage”直译过来就是住在你网页里的GUI Agent。这篇文章我从技术角度拆解下它到底做了什么顺便记录下我实际试用的过程。一、跟传统方案有什么不同1.1 传统 GUI 自动化的问题我们先看看现有的方案方案运行位置依赖登录态速度Selenium/Playwright后端Python 无头浏览器需同步Cookie慢网络开销浏览器扩展 (如Browser Use)扩展层用户安装扩展部分继承中RPA工具 (截图识别)外部多模态视觉模型不继承慢截图OCRPageAgent页面内无天然继承快纯DOM传统方案的痛点其实挺明显的后端方案有网络开销且需要同步Cookie截图方案又慢又贵需要视觉模型扩展方案需要用户安装东西。1.2 PageAgent 的 “Inside-out” 思路PageAgent 走了一条完全不同的路——它不是从外面控制浏览器,而是作为页面的一部分在里面跑。这带来了几个天然优势跑在页面里自动拥有用户的所有Cookie和权限直接操作DOM不需要经过网络传输不需要截图不需要多模态视觉模型用户不需要安装任何东西二、技术架构拆解2.1 核心工作流用户自然语言指令 │ ▼ ┌─────────────┐ │ DOM 文本化 │ 遍历DOM树提取可交互元素编号 └──────┬──────┘ │ ▼ 文本描述 用户指令 ┌─────────────┐ │ LLM 推理 │ 返回操作序列: click([3]), type([5], hello) └──────┬──────┘ │ ▼ ┌─────────────┐ │ DOM 操作执行 │ 模拟点击、输入、滚动等事件 └──────┬──────┘ │ ▼ 任务完成 or 继续循环2.2 DOM 文本化这是 PageAgent 最核心的设计。它不截图,而是遍历 DOM 树提取可交互元素,生成精简文本描述[1] button 登录 [2] input 用户名 placeholder请输入 [3] input 密码 typepassword [4] checkbox 记住我 checkedfalse [5] link 忘记密码每个元素有编号、类型、文字内容。模型看这个比看一坨 HTML 源码或者一张截图效率高得多。为什么不用截图算了下成本对比方案模型要求单次成本速度截图 多模态模型GPT-4o 等~$0.01-0.032-5秒DOM文本化 文本模型gpt-4o-mini / 千问~$0.001-0.0030.5-1秒成本差了一个数量级速度也快了不少。2.3 代码接入快速体验Demo模式用阿里提供的测试APIscriptsrchttps://cdn.jsdelivr.net/npm/page-agent1.7.1/dist/iife/page-agent.demo.jscrossorigintrue/script一行代码。页面右下角会出现对话框。正式集成NPMnpminstallpage-agentimport{PageAgent}frompage-agentconstagentnewPageAgent({model:qwen-plus,baseURL:https://dashscope.aliyuncs.com/compatible-mode/v1,apiKey:YOUR_API_KEY,language:zh-CN,})// 执行自然语言指令awaitagent.execute(把截止日期改到下周五)接 OpenAI 也一样简单constagentnewPageAgent({model:gpt-4o-mini,baseURL:https://api.openai.com/v1,apiKey:YOUR_OPENAI_KEY,language:zh-CN,})awaitagent.execute(在搜索框输入 PageAgent 并回车)支持通义千问、OpenAI、Gemini只要兼容 OpenAI API 格式的模型都行。三、实际试用和踩坑3.1 试用过程我在一个内部管理后台上试了下,大致流程# 1. 安装npminstallpage-agent# 2. 在页面入口文件里初始化# 用的通义千问 qwen-plus简单的操作“点击XX按钮”“在搜索框输入XX”基本都能正确执行。表单填充也行,说把名字改成张三它能找到对的输入框。3.2 踩坑记录坑描述解决Shadow DOMWeb Components 里的元素操作不了目前无解,等官方支持CSP 限制公司项目 CSP 比较严核心库加载失败改用 Chrome 扩展模式长链路中断10步以上的任务中间容易断拆成多个短指令分步执行模型幻觉偶尔点错元素换更好的模型 or 加重试逻辑说实话,长链路任务中断这个问题比较头疼。比如登录→搜索→点详情→下载这种4步的操作,大概率能走完。但如果是10步以上的复杂流程,中间出错的概率就高了。目前我的做法是把长任务拆成多个短指令一步步来。3.3 跨页面的问题核心库只能操作当前页面。如果任务涉及多个页面比如去A页面查数据然后到B页面填进去需要配合 Chrome 扩展使用。这个扩展做了标签页桥接让 Agent 能跨标签操作。但这就多了一步——用户得装扩展。对于面向内部员工的场景还好,面向外部用户就比较别扭了。四、适用场景分析场景适合度原因SaaS产品AI助手很适合不改后端,前端一行JS接入ERP/CRM表单填写很适合几十个字段一句话搞定无障碍辅助适合语音控制网页,降低使用门槛自动化UI测试适合自然语言写测试用例,维护成本低复杂跨页面工作流勉强需配扩展,长链路不稳定Canvas/WebGL应用不适合DOM文本化方案无法识别画布内容我觉得最甜蜜的场景是老系统改造。那种用了好几年的管理后台,改造成本极高,但用户天天吐槽不好用。现在前端加一行JS,用户就能用自然语言操作了。不用动后端,不用重构前端,投入产出比极高。五、总结PageAgent 做对的地方“Inside-out” 架构,从页面内部而非外部控制DOM 文本化替代截图识别,又快又便宜接入成本极低,一行JS就能跑还需要改进的Shadow DOM 支持长链路任务稳定性跨页面能力目前依赖扩展作为一个 9600 星的早期项目,完成度已经不错了。做 SaaS 或者管理后台的朋友可以先用 Demo 模式试试,看看在你的场景里效果如何。六、参考资料PageAgent 官方文档GitHub: alibaba/page-agent何三笔记 - 一行JS让网页变成AI Agent谷米 - PageAgent 9640星的阿里开源网页GUI Agent你有在自己的项目里试过 PageAgent 吗或者用过其他GUI自动化方案评论区聊聊踩过什么坑觉得有用的话点赞 收藏 关注后面会出更多开源项目的实战分析