夜雨聆风
阿里开源神器 PageAgent:一行代码让网页听懂人话,自动帮用户填表点按钮
PageAgent 是个页面内嵌的 AI 操作员。
把它集成到网页里，用户说一句”帮我填报销单”，AI 真的能把表单填好，还能自动点击提交。
纯前端方案，只需要一个JS。
不用装 Python，不用配服务器，不用折腾无头浏览器，一行 script 标签就能跑起来。
PageAgent 是什么
概括一下 PageAgent 的工作流程：
1. 网页内容文本化 → 2. 大模型理解 + 规划 → 3. 执行操作和传统方案比，省了多少事？
以前要给网站加自动化能力，你得：
# 1. 装环境pip install browser-use playwright# 2. 起服务docker run 各种容器# 3. 写后端代码# 然后祈祷别出内存泄漏PageAgent 的做法是：
<script src="page-agent.js"></script>完事。
快速开始
环境准备
-
• 浏览器：Chrome 90+ / Edge 90+ / Firefox 88+ -
• 无需 Node.js，无需 Python -
• 一个能访问的网页（本地 file://或线上均可）
示例
创建一个 demo.html 文件：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>PageAgent Demo</title></head><body> <h1>测试页面</h1> <button id="greet-btn">点击问候</button> <p id="message"></p> <script> document.getElementById('greet-btn').addEventListener('click', () => { document.getElementById('message').textContent = '你好，世界！'; });</script> <!-- 引入 PageAgent Demo 版本（含免费 LLM） --> <script src="https://cdn.jsdelivr.net/npm/page-agent@1.5.6/dist/iife/page-agent.demo.js" crossorigin="true" ></script></body></html>用浏览器打开这个文件，页面右下角会出现 PageAgent 的悬浮按钮。
点击后输入：
点击"点击问候"按钮PageAgent 会自动找到按钮并点击，页面上会显示”你好，世界！”。
预期输出（浏览器控制台）
PageAgent 启动成功理解指令：点击"点击问候"按钮找到元素：button#greet-btn执行操作：click能用在哪？2 个真实场景
场景 1：智能表单填写
ERP/财务系统经常有几十个字段的表单。PageAgent 可以：
await agent.execute(` 填写采购申请单： - 金额：50000 - 事由：购买服务器 - 紧急程度：高 然后提交审批`);场景 2：产品教学
让 AI 现场演示”怎么提交报销申请”，边做边教，比看文档直观多了。
用户不再需要问”那个按钮在哪”——AI 直接点给他们看。
支持哪些 AI 模型？
基本覆盖主流选择：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
性能与成本：跑一次多少钱？
Token 消耗估算
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
响应时间
-
• 简单操作（单步）：2-5 秒 -
• 复杂任务（多步）：10-30 秒
项目信息
-
• 开源协议：MIT -
• GitHub：https://github.com/alibaba/page-agent -
• 官方文档：https://alibaba.github.io/page-agent/docs/introduction/overview -
• Demo 页面：https://alibaba.github.io/page-agent/
你对这种”网页内置 AI 操作员”怎么看？欢迎评论区聊聊