每日开源 · 第 084 期 · 早间篇PageAgent阿里开源的「住在网页里」的 AI 操作员一行 JavaScript让任何网页听懂自然语言零后端零扩展零截图**免责声明**本工具依赖境外公开数据源如 GitHub、npm CDN部分平台在中国大陆需合规网络环境。本文仅供技术学习与交流请勿用于大规模数据抓取等违规场景。 项目速览**项目名称**PageAgent (alibaba/page-agent)**开源协议**MIT**开发语言**TypeScript**最新版本**v1.11.0**GitHub Stars**23,141今日新增742 **出品方**阿里巴巴**核心标签**GUI Agent纯前端JSDOM文本化自然语言操控零后端MCP Server23kGitHub StarsMIT开源协议1行JS接入30支持模型如果你做过企业级后台系统开发一定对这个问题深有体会用户面对一个几十个字段的表单页面、十几步的操作流程培训成本高、操作出错率高、客服工单量居高不下。能不能让用户用自然语言说一句话AI 就帮他操作完所有步骤阿里巴巴最近在 GitHub 开源的PageAgent正是为了解决这个问题而生。它不依赖任何后端服务、浏览器扩展、Python 环境或截图识别——只需要一行 JavaScript 代码嵌入网页用户就能用自然语言操控页面上的任意元素。项目目前在 GitHub 上已斩获 23,141 Stars今日新增 742 Stars位列 GitHub Trending 第 3 名。更重要的是它代表了 GUI Agent 领域一条全新的技术路线「Inside-out」——AI 不站在浏览器外面窥探页面而是直接住在网页里面。它能解决什么问题传统网页交互的痛点做过 B 端产品的朋友都懂 复杂操作门槛高ERP、CRM 等系统动辄几十个字段、十几步操作流程新员工培训成本高老员工也容易出错。 客服成本居高不下客服机器人只能告诉用户点哪里不能帮用户点每次都要人工介入指导操作。️ 老系统改造困难用了多年的管理后台改造成本极高。重构前端风险大、周期长。改后端牵一发而动全身。♿ 无障碍体验缺失视障用户、老年用户面对复杂 Web 应用无从下手语音助手只能念页面不能操作页面。PageAgent 的答案是把 AI 操作员直接嵌入网页。用户说帮我把截止日期改到下周五Agent 就自动找到日期选择器、点击、修改、确认——一气呵成不需要用户知道日期选择器在第三个面板的第二行。核心亮点为什么它跟所有方案都不一样一、「Inside-out」架构从页面内部控制而不是从外部窥探这是 PageAgent 最根本的设计哲学差异。我们看看传统方案和它的对比️ Selenium / Playwright外部控制Python后端无头浏览器需同步Cookie网络开销大速度慢从浏览器外部通过 WebDriver 协议控制页面每次操作都要经过网络传输还需要同步用户登录态。部署一套自动化环境动辄要装 Python 浏览器驱动 依赖包。 浏览器扩展方案如 browser-use需安装扩展Python后端截图多模态LLM成本高browser-use 是目前最流行的 AI 浏览器自动化工具93k Stars但它需要用户安装浏览器扩展、后端跑 Python 进程、依赖截图多模态视觉模型。单次操作成本约 $0.01-0.03耗时 2-5 秒。 RPA / 截图识别方案多模态视觉模型截图OCR不继承登录态速度慢依赖截图和多模态视觉模型看懂页面不继承用户 Cookie每次操作成本高且速度慢。 PageAgent页面内控制⭐ 新范式纯前端JS天然继承CookieDOM文本化零网络开销单次~$0.0010.5-1秒Agent 直接运行在网页的 JavaScript 运行时里天然拥有用户的所有 Cookie 和权限不需要截图、不需要网络传输、不需要多模态模型。单次操作成本约 $0.001-0.003速度 0.5-1 秒成本降低一个数量级速度快 3-5 倍。二、DOM 文本化不截图也能看懂页面这是 PageAgent 最核心的技术创新。它不截图而是遍历 DOM 树提取所有可交互元素生成一份结构化的文本描述。比如面对一个登录表单它会生成这样的内容[1] button “登录” [2] input “用户名” placeholder“请输入用户名” [3] input “密码” type“password” [4] checkbox “记住我” checkedfalse [5] link “忘记密码” [6] button “注册新账号”每个可交互元素都有编号、类型、文字内容和属性。这份文本描述被发送给 LLM模型返回操作指令如click([1])或type([2], admin)Agent 在 DOM 中执行对应操作。为什么不用截图算一笔账截图 多模态模型方案单次成本 ~$0.01-0.03 | 延迟 2-5 秒 | 需要 GPT-4o / Gemini 等视觉模型 | Token 消耗大DOM 文本化 文本模型方案 ⭐单次成本 ~$0.001-0.003 | 延迟 0.5-1 秒 | gpt-4o-mini / 千问即可胜任 | Token 消耗小成本差了一个数量级速度快了 3-5 倍。这就是「不做视觉识别、直接读 DOM」带来的质变。而且因为不依赖截图这个方案天然不受页面主题、字体大小、屏幕分辨率等因素影响。三、零后端零扩展一行代码接入这是 PageAgent 对开发者最友好的地方。要体验它只需要在 HTML 里加一行如果是国内网络环境用 npmmirror 镜像Demo 模式使用的是阿里提供的免费测试 LLM API仅供技术评估。生产环境通过 NPM 安装接入自己的模型// 安装npm install page-agent// 使用通义千问import { PageAgent } from’page-agent’const agent newPageAgent({ model: ‘qwen3.5-plus’, baseURL: ‘https://dashscope.aliyuncs.com/compatible-mode/v1’, apiKey: ‘YOUR_API_KEY’, language: ‘zh-CN’, })await agent.execute(‘把截止日期改到下周五’)四、安全可控企业级特性一个不少PageAgent 不是简单的玩具项目它内置了完善的企业级安全机制️ 操作黑白名单可以限制 Agent 只能操作特定区域或特定类型的元素防止越权操作。比如只允许在表单区域操作不能碰导航栏。 数据脱敏保护敏感字段如密码、身份证号可配置为脱敏传输Agent 读取 DOM 时自动遮盖这些内容。 Human-in-the-Loop 人工审批涉及高风险操作如删除、提交前弹出确认对话框让用户审批后再执行。开启方式设置humanInTheLoop: true。 自定义知识注入可以注入业务规则、操作手册等自定义知识让 AI 按照你设定的规则工作而不是自由发挥。五、模型自由30 LLM 任意切换支持本地部署PageAgent 支持所有兼容 OpenAI API 格式的模型包括// 千问系列qwen3.7-max / qwen3.7-plus / qwen3.5-plus⭐ / qwen3.5-flash⭐// OpenAI 系列gpt-5.5 / gpt-5.4-mini⭐ / gpt-5.4-nano⭐ / gpt-4.1-mini// DeepSeek 系列deepseek-v4-pro / deepseek-v4-flash⭐// Claude 系列claude-sonnet-5 / claude-opus-4-8 / claude-haiku-4-5⭐// Google / xAI / Kimi / GLM 等均支持 // ⭐ 表示推荐的轻量快速模型更值得一提的是本地模型支持。如果你对数据隐私有极高要求可以接入 Ollama 或 LM Studio 运行的本地模型// 接入 Ollama 本地模型const agent newPageAgent({ model: ‘qwen3:14b’, baseURL: ‘http://localhost:11434/v1’, // 本地模型无需 apiKey})// 启动 Ollama 时需开启 CORS 并增大上下文窗口// OLLAMA_CONTEXT_LENGTH64000 OLLAMA_ORIGINS“*” ollama serve注意本地模型建议使用 10B 参数以上的版本且需要支持 tool_call 功能。一个典型页面通常需要约 15k tokens 的上下文窗口。实战场景展示场景一SaaS 产品 AI Copilot最常见的应用场景。在企业管理后台、ERP、CRM 等 B 端产品中嵌入 PageAgent用户可以直接用自然语言完成操作。不需要改造后端逻辑不需要重构前端架构——前端加一行 JS用户就有了 AI 操作员。// 用户说一句话Agent 自动完成多步操作await agent.execute(‘帮我查询最近 7 天的所有订单导出为 Excel’)await agent.execute(‘填写入职申请表部门选技术部职位填高级工程师入职日期选下周一’)await agent.execute(‘在搜索框输入PageAgent打开第一个搜索结果’)场景二老系统智能化改造这是 PageAgent 最甜蜜的应用场景。很多企业有用了 5-10 年的管理后台功能齐全但交互老旧用户天天吐槽难用。重构成本动辄几十上百万风险还大。用 PageAgent一行 JS 代码让老系统秒变 AI 助手。用户不再需要记住先点设置→选系统配置→点新增→填表单→点保存这样的操作路径只需要告诉页面帮我新增一个用户配置Agent 自动完成全部操作。不动后端、不重构前端投入产出比极高。场景三无障碍增强PageAgent 为视障用户和老年用户提供了全新的交互方式。结合屏幕阅读器或语音助手用户可以用自然语言操控任何 Web 应用// 语音指令 → Agent 自动操作// “帮我把购物车里的商品结算”// “查看我这个月的消费明细”// “帮我在日历上预约明天下午3点的会议室”这不仅仅是语音朗读页面内容而是真正的**“语音驱动页面操作”**——从听到做的质变。场景四多页面跨标签工作流Chrome 扩展 MCP ServerPageAgent 核心库只能操作当前页面。对于需要跨多个标签页的复杂任务官方提供了可选的 Chrome 扩展和 MCP ServerBeta// 配合 Chrome 扩展跨标签页执行任务await agent.execute(‘先在淘宝搜索机械键盘再打开价格最低的商品页面记录商品名称和价格’)MCP Server 更是让外部 AI Agent如 Claude Code、Cursor能够直接控制浏览器将 PageAgent 的能力融入到更大的 AI 工作流中。上手指南从零到用起来1****快速体验30秒在任意网页的 HTML 中插入 Demo CDN 脚本页面右下角出现 AI 对话框直接用自然语言下指令。Demo 使用阿里提供的免费测试 API仅供技术评估。2****NPM 集成生产环境npm install page-agent然后 import PageAgent配置你自己的 LLM API Key。支持千问、OpenAI、DeepSeek、Claude 等所有兼容 OpenAI API 的模型。3****配置安全策略根据业务需求开启 Human-in-the-Loop 审批、操作白名单、数据脱敏等功能。对于面向外部用户的产品建议通过后端代理转发 LLM 请求不要在前端代码中硬编码 API Keyconst agent newPageAgent({ baseURL: ‘/api/llm-proxy’, model: ‘gpt-5.4-mini’, customFetch: (url, init) fetch(url, { …init, credentials: ‘include’ }), })4****监听事件与日志PageAgent 提供完整的事件回调方便记录操作日志和接入自定义 UIagent.on(‘action’, (action) { console.log(‘Agent 正在执行’, action) }) agent.on(‘complete’, (result) { console.log(‘执行完成’, result) }) agent.on(‘error’, (err) { console.error(‘执行出错’, err) })5****可选Chrome 扩展 MCP Server安装官方 Chrome 扩展实现跨标签页操作启动 MCP Server 让外部 AI Agent 控制浏览器。详见官方文档。 踩坑提醒来自社区实战经验**Shadow DOM**Web Components 中的 Shadow DOM 元素目前无法操作等待官方支持。**CSP 限制**部分公司项目 CSP 策略严格核心库可能加载失败可改用 Chrome 扩展模式。**长链路任务**10 步以上的复杂流程中间容易出错建议拆成多个短指令分步执行。**模型幻觉**偶尔点错元素建议使用更强的模型或添加重试逻辑。**Canvas/WebGL 应用**DOM 文本化方案无法识别画布内容不适用于这类场景。技术架构一瞥PageAgent 采用 Monorepo 架构核心分为三层 page-agentAI 核心代理层代理主循环协调 LLM 推理和工具调用。包含 UI 组件交互面板、Tools 工具定义、LLM 集成层。 page-controllerDOM 操作层负责 DOM 解析、元素提取、事件模拟。将 AI 决策与页面操作分离可独立复用。 website文档与 Demo 站点官方文档、在线 Demo、使用指南。核心工作流非常清晰用户自然语言指令 │ ▼ ┌─────────────┐ │ DOM 文本化 │ 遍历 DOM 树提取可交互元素编号 └──────┬──────┘ │ ▼ 文本描述 用户指令 ┌─────────────┐ │ LLM 推理 │ 返回操作序列: click([3]), type([5], “hello”) └──────┬──────┘ │ ▼ ┌─────────────┐ │ DOM 操作执行 │ 模拟点击、输入、滚动等事件 └──────┬──────┘ │ ▼ 任务完成 or 继续循环值得注意的是PageAgent 的 DOM 处理组件和 prompt 设计源自 browser-use 项目93k Stars 的 AI 浏览器自动化工具但它将这套逻辑从 Python 后端搬到了浏览器 JavaScript 运行时中实现了架构层面的范式转移。项目 README 中也明确致谢了 browser-use 的作者 Gregor Zunic。今日总结PageAgent 代表的是一种全新的网页交互范式——从人适应机器到机器适应人从编写代码到表达意图从后端自动化到前端智能化。它的核心价值在于 Inside-out 架构Agent 住在页面里天然拥有用户权限不需要从外部窥探。这是与传统方案最根本的区别。 DOM 文本化替代截图成本降低一个数量级$0.001 vs $0.01-0.03速度快 3-5 倍0.5s vs 2-5s不需要多模态视觉模型。⚡ 零后端零扩展一行 JS 代码接入不需要安装 Python、浏览器驱动、浏览器扩展用户零安装成本。 企业级安全操作白名单、数据脱敏、人工审批、自定义知识注入让 AI 在安全边界内工作。当然作为一个活跃开发中的项目v1.11.0它还有一些需要改进的地方Shadow DOM 支持、长链路任务稳定性、跨页面能力的原生支持等。但考虑到其 MIT 开源、阿里出品、社区活跃1,085 commits这些问题都有望在后续版本中解决。对于正在做 SaaS 产品、企业管理后台、或者任何需要降低用户操作门槛的 Web 应用的朋友PageAgent 值得你花 30 秒用 Demo 模式体验一下。 互动话题你在自己的项目中遇到过哪些用户操作太复杂的痛点有没有尝试过用 AI 来解决欢迎在评论区分享你的经验和想法 项目地址github.com/alibaba/page-agent 官方文档alibaba.github.io/page-agent 在线 Demoalibaba.github.io/page-agent每日开源 · 第 084 期 · 早间篇2026 年 7 月 5 日关注「每日开源」每天一个值得深读的开源项目本工具依赖境外公开数据源GitHub、npm CDN部分平台在中国大陆需合规网络环境。本文仅供技术学习与交流。
