Page-agent

Page-agent

https://mp.weixin.qq.com/s/OJrZO6dn87IAm9NsWhX3EA

Page-agent 目前在 GitHub 上已经 19.2k Star（近 2 万），NPM 月下载 4 万多，Hacker News 上也是 Show HN 热门，147 points 加 76 条讨论。一个阿里员工在工作之余搞的项目，MIT 协议开源，纯 TypeScript 写的。

这东西到底是干嘛的
简单说，你往网页里塞一个 script 标签，你的页面就变成了一个 AI Agent。

比如你做了一个 ERP 后台，用户说”帮我查上个月华南区的销售数据，做个图表”，以前你得写一堆点击联动逻辑。现在，PageAgent 帮你理解这句话，然后直接在页面上操作 DOM 元素，找到对应的按钮、输入框、表格，完成整个流程。

传统方案 vs PageAgent
传统方案 vs PageAgent
这个理念叫 “inside-out”——让 AI 活在网页内部，而不是从外部操控。

想想以前那些方案：Python 脚本启动一个无头浏览器，截图发给多模态模型，模型说”这里有点击”，脚本再去找坐标……鬼都知道这玩意儿有多脆弱。截图糊了怎么办？坐标偏移了呢？页面重绘了呢？

PageAgent 的思路完全不一样——它直接读取 活的 DOM 树，拿到的是页面最底层的结构数据，不是一张图片。然后它把 DOM 简化成 LLM 能理解的文本格式（作者管这叫”HTML 脱水”），让模型通过索引去操作具体元素。

说白了，以前是让 AI “看”你的网页，现在是让 AI “读”你的网页。

不用截图，不用多模态，token 消耗直线下降。

说实话，这个脱水逻辑具体怎么实现的，我看了源码也没完全搞懂——涉及到很多 DOM 解析和语义压缩的细节。但核心思路我能讲明白：就是把 、、 这些标签提取出来，去掉样式、脚本、空白，保留结构和交互元素，再给每个可操作元素编个号。LLM 说”点 47 号按钮”，agent 就去执行。

原理大概是这样，细节可能有出入——有懂的大佬欢迎指正。

说到这个”inside-out”，我突然想到一个事儿。以前玩《黑客帝国》的时候，总在想：为什么 AI 要从外部控制世界？后来明白了，因为从内部控制太危险——权限太大了。PageAgent 本质上就是在做这件事：它直接在页面内部运行，拥有当前用户的所有会话权限。所以它才不需要装插件、不需要无头浏览器、不需要重新登录。

但是！这也意味着安全问题确实存在——一个第三方的 script 标签能访问你页面上的一切。不过作者也说了，这跟你引入任何其他第三方 JS 库的风险是一样的，并不是 PageAgent 独有的问题。而且它可以配合 CSP、白名单机制来控制。

上手有多简单
我真的吹爆这个集成体验。

一行 CDN：

就这。你的页面就有 AI 了。

不过这个 Demo 版用的是阿里的免费测试 LLM（Qwen 模型），仅供体验。生产环境你得自己配 LLM：

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: ‘YOUR_API_KEY’,
language: ‘zh-CN’,
})

await agent.execute(‘点击登录按钮’)
看到没？await agent.execute(‘点击登录按钮’)——真的就是一句话。

你还可以把 LLM 换成任何 OpenAI 兼容的 API，甚至本地的 Ollama 都行。作者说测试过 Qwen3.5 4B 的小模型也能跑，不过大模型效果更好就是了。

还提供了一个 Bookmarklet 的方式——你从官网拖一个小书签到书签栏，在任何页面上点击，就能临时注入 PageAgent 试玩。这个设计真的绝，不用装任何东西就能体验。

pageagent_cover
pageagent_cover
能用到哪些场景
说实话，我翻了一遍它的用例文档，脑子里蹦出好几个”卧槽这个可以”的瞬间。

给 SaaS 产品加 AI Copilot——几行代码给你的产品加上”帮我做这个”的功能，不用重写后端。CRM 里说”帮我导出今天所有成交客户的联系方式”，它自己操作页面去完成。

智能表单填充——ERP 系统里 20 步的填表流程，一句话搞定。”帮我创建一个采购订单，供应商是 XXX，金额 5 万以下，走常规审批。”

无障碍增强——让视障用户用语音就能操作网页。PageAgent 在内部跑，语音输入→LLM 理解→操作 DOM，整个链路都在前端完成。

跨页面 Agent——通过可选的 Chrome 扩展，PageAgent 可以跨浏览器标签页工作。比如”从 A 系统的客户列表复制数据，到 B 系统的后台创建订单”这种骚操作也能实现。

还支持 MCP 协议（测试阶段），可以让你自己的 Agent 客户端通过 MCP 控制浏览器。

没懂为什么有人会觉得这玩意儿会被浏览器内置的 Agent 取代——恰恰相反，我觉得这种”可嵌入的 Agent”才是未来。浏览器内置的 Agent 你没法定制，没法控制数据流向，没法跟自己现有的系统打通。

同类项目
PageAgent 的思想基础来自 browser-use（Python 那个很有名的项目），但做了个 180 度大转弯——从 Python 后端自动化变成了前端嵌入式。如果你的场景是服务端爬虫，browser-use 可能更合适；如果你想给自己的 Web 应用加 AI，那 PageAgent 是更好的选择。

另一个方向是 Playwright 和 Puppeteer——它们是浏览器自动化的事实标准，但定位完全不同。它们是为测试和爬虫设计的，不可能嵌入到你的产品里当 AI Copilot。

项目地址
GitHub: https://github.com/alibaba/page-agent

在线 Demo（无需注册就能玩）: https://alibaba.github.io/page-agent/

官方文档: https://alibaba.github.io/page-agent/docs/introduction/overview

一个忠告：不要直接把 API Key 写在前端代码里。老老实实整个代理后端，把 Key 藏好。这跟 PageAgent 无关，是所有前端调用 LLM 的基本常识。

除此之外，这个项目真的值得你去 Star 一下。31.9KB 的 JS，打开了一个全新的设计空间。未来你的每个网页应用里都住着一个 AI Agent，这个想象空间，我觉得挺带感的。