嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！
我解放啦，网页终于能自己干活了！阿里 2 万 Star 开源 Page Agent，20 次点击变一句话
先说结论：
Page Agent 最值得看的地方，不是“AI 能点按钮”，而是它把 Agent 直接放进网页里。
如果你做过后台系统、SaaS、CRM、ERP 或管理平台，就会知道：真正劝退用户的，往往不是功能少，而是按钮太多、路径太深、流程太绕。
这篇文章不做源码长拆，只用 3 分钟讲清楚：它为什么火、和传统浏览器自动化有什么不同、以及你自己的产品能不能借这个思路做 AI Copilot。
官方还放了一个 Demo 视频，想先看效果的可以打开：
https://github.com/user-attachments/assets/a1f2eae2-13fb-4aae-98cf-a3fc1620a6c2
你有没有发现，现在很多 AI Agent 都在“控制浏览器”：
用截图识别页面，用 Playwright 点按钮，或者让一个外部自动化程序远程操作网页。
但阿里开源的 Page Agent 换了一个思路：
不是让 AI 从外面操控浏览器，而是让 Agent 直接住进你的网页里。
上面这张图，就是这篇文章最核心的反差：
传统浏览器自动化更像“外部脚本控制页面”，Page Agent 更像“网页自己长出一个 AI 操作员”。
截至 2026-06-27，我查到这个项目已经有 20.2k+ Star、1.7k+ Fork，MIT 协议，主语言是 TypeScript，最新版本是 v1.10.0。
一句话概括：
Page Agent 是一个运行在网页里的 GUI Agent，可以让用户用自然语言控制 Web 页面。
比如你对后台说：
“帮我把今天新增的客户筛出来，导出销售线索。”
它要做的事情不是回复一段操作教程，而是直接理解页面、点击按钮、填写表单、切换选项，把流程跑起来。
30 秒看懂它
| 你遇到的问题 | Page Agent 的思路 |
|---|---|
| 后台系统按钮太多，新人不会用 | 用自然语言直接描述目标 |
| 一个流程要点 20 次 | 变成一句话执行 |
| 想给 SaaS 产品加 AI Copilot | 前端接入 JavaScript，不必重写后端 |
| 不想用截图和多模态模型 | 基于 DOM 文本理解页面 |
| 想接自己的模型 | 支持自备 LLM |
| 想做多页面任务 | 可选 Chrome 扩展和 MCP Server |
最吸引我的地方，不是“它能点按钮”。
真正有价值的是：它把网页从“只能被人操作的界面”，变成了“可以被 AI 理解和执行的工作台”。
它和传统浏览器自动化有什么不一样？
很多人一听“AI 操作网页”，第一反应是：
Playwright？Selenium？browser-use？浏览器扩展？
这些当然都很强，但 Page Agent 的定位不完全一样。
| 对比点 | Page Agent | 传统浏览器自动化 |
|---|---|---|
| 运行位置 | 页面内 JavaScript | 页面外的脚本或客户端 |
| 面向对象 | Web 应用开发者、SaaS 产品 | 测试、爬虫、自动化脚本 |
| 典型用途 | 给产品加 AI 操作员 | 自动执行任务 |
| 页面理解 | DOM 文本和语义结构 | 截图、选择器、浏览器控制 |
| 集成方式 | CDN / npm 接入 | 单独启动自动化环境 |
简单说：
它更像是给你的 Web 产品加一个“内置 AI 操作员”，而不是写一个外部机器人。
这对 B 端系统尤其有想象力。
ERP、CRM、管理后台、数据平台、客服后台，很多产品不是功能不够，而是路径太深、表单太多、操作太绕。
如果用户能直接说目标，系统自己完成一串点击和填写，这就是非常典型的 AI Copilot 场景。
它主要能做什么？
Page Agent 官方给的几个应用场景，我觉得都挺实用：
| 场景 | 可以怎么用 |
|---|---|
| SaaS AI Copilot | 给现有产品加自然语言操作入口 |
| 智能表单填写 | 把复杂表单、审批、配置流程自动跑完 |
| 产品教学 | 让 AI 一边操作一边演示流程 |
| 无障碍增强 | 用语音或自然语言辅助操作页面 |
| 多页面 Agent | 通过扩展跨标签页执行任务 |
| MCP 接入 | 让本地 Agent 客户端控制浏览器 |
它的核心特点也比较明确：
- 轻集成：无需 Python、无头浏览器，页面里引入 JS 即可。
- 文本 DOM 操作：不截图，不依赖多模态模型。
- 自备 LLM：可以接 OpenAI-compatible API、Ollama 等模型服务。
- 可扩展：有 Chrome 扩展，也有 Beta 版 MCP Server。
怎么接入？
最简单的体验方式，是直接用 CDN：
<script src="{URL}" crossorigin="true"></script>
如果在项目里使用，可以通过 npm：
npm install page-agent
然后初始化一个 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('点击登录按钮')
官方也提醒了：免费 Demo LLM 仅用于技术评估，长期使用建议配置自己的模型服务。
但它不是万能的
这点一定要说清楚，不然很容易把它理解成“网页自动化银弹”。
Page Agent 是基于 DOM 理解页面的，所以它更适合语义化较好的 Web 应用。
它目前更擅长：
- 点击
- 文本输入
- 下拉选择
- 表单提交
- 页面滚动
- 单层同源 iframe
- 可选执行 JavaScript
但它不适合这类场景：
- 复杂拖拽
- 右键菜单
- 纯视觉识别
- Canvas / WebGL / 图片内容理解
- 跨域 iframe
- Monaco、CodeMirror 这类复杂编辑器的细粒度操作
所以我的判断是：
它不是替代所有浏览器自动化工具，而是给“你自己控制的 Web 产品”增加 AI 操作能力。
这个定位反而更清晰，也更适合落地。
为什么值得关注？
我觉得 Page Agent 值得技术人关注，原因有三个。
第一，它站在了一个非常热的方向上：AI Agent + 浏览器操作 + MCP + SaaS Copilot。
第二，它选了一个很巧的切入点：不从外部控制浏览器，而是让 Web 应用自己拥有 Agent 能力。
第三，它已经不是概念项目：GitHub 2 万 Star、npm 版本到 1.10.0、文档里有扩展、MCP、数据脱敏、自定义工具等工程化能力。
如果你正在做后台系统、低代码平台、CRM、ERP、数据分析平台，或者想给自己的产品加一个 AI 操作入口，这个项目非常值得看看。
最后
以前我们总说：
AI 会帮用户看懂页面。
但 Page Agent 给我的感觉是：
下一步，网页本身就要开始听懂人话了。
这才是它真正有意思的地方。
后面我准备继续拆它的源码结构，包括 DOM 是怎么“脱水”给 LLM 的、Page Agent 和 browser-use 的关系、MCP Server 怎么接本地 Agent。感兴趣的话，可以先收藏这篇。
