alibaba/page-agent · 上手攻略
- 仓库：alibaba/page-agent
- 链接：https://github.com/alibaba/page-agent
- 分类：agent
- 作者：Jay
- 更新：2026-07-06
这是什么
page-agent 是阿里巴巴开源的页面内 JavaScript GUI Agent 框架，让你用自然语言直接控制网页界面。它不需要浏览器插件、不需要 Python、不需要无头浏览器——一行 <script> 标签或一个 npm install 即可在任意网页中注入 AI 控制能力。
核心思路：基于文本 DOM 操作（而非截图 + 多模态 LLM），通过解析页面 HTML 结构和元素属性，让 LLM 理解并操控网页。底层借鉴了 browser-use 的 DOM 处理模式。
解决什么问题
传统网页自动化（Selenium / Playwright / Puppeteer）需要开发者精确知道元素选择器，调试成本高。浏览器 Agent 方案（GPT-4V 等）依赖截图，理解慢、成本高。
page-agent 的场景： - SaaS 产品内嵌 AI Copilot：几行代码把你的产品变成可对话的智能助手 - 智能表单填写：把原本 20 次点击的表单流程压缩成一句话 - 无障碍增强：让视力障碍用户通过自然语言操控任意网页 - 多页 Agent：配合 Chrome 扩展可在浏览器 Tab 之间协作 - 外部 Agent 控制：通过 MCP Server 让 VS Code、Cursor 等外部工具远程控制浏览器
快速安装
方式一：CDN 一行引入（最快体验）
<!-- 国内可用 npmmirror -->
<script src="https://registry.npmmirror.com/page-agent/1.11.0/files/dist/iife/page-agent.demo.js" crossorigin="anonymous"></script>
<!-- 全球用 jsDelivr -->
<!-- <script src="https://cdn.jsdelivr.net/npm/page-agent@1.11.0/dist/iife/page-agent.demo.js"></script> -->
⚠️
page-agent.demo.js内置了测试用免费 LLM API，仅供技术评估。使用正式环境请配置自己的 API Key。
方式二：npm 安装（推荐生产使用）
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: process.env.DASHSCOPE_API_KEY, // 请替换为你的密钥
language: 'zh-CN', // 或 'en-US'
})
// 用自然语言让 AI 操作页面
await agent.execute('点击登录按钮，然后填写用户名和密码')
不用自动初始化（手动控制）
<script src="...page-agent.demo.js?autoInit=false"></script>
<script>
const agent = new window.PageAgent({ /* 配置 */ })
await agent.execute('把搜索框里的旧关键词清掉，输入新的')
</script>
MCP Server（Beta）—— 外部 Agent 控制浏览器
文档提到提供 MCP Server 支持（Beta），可让 Cursor、VS Code Agent 等外部工具通过 MCP 协议控制 page-agent，实现"让 AI IDE 直接操作网页"的工作流。具体配置请参阅官方文档 MCP Server 部分。
Chrome 扩展——多页面任务
通过 Chrome 扩展可在多个浏览器 Tab 之间共享 Agent 状态，实现跨页面的复杂自动化流程。详见官方扩展文档。
典型使用场景
| 场景 | 说明 |
|---|---|
| 内嵌 AI 客服/Copilot | 在 SaaS 产品 UI 中直接加一个对话式操作层 |
| CRM/ERP 自动化 | 用自然语言完成审批、录入等重复操作 |
| 网页数据抓取 | 替代传统爬虫，不需要解析器和等待时间 |
| 无障碍语音操控 | 视障用户说"点击红色按钮"即可操作任意页面 |
| AI 测试 | 自动操作网页进行 UI 回归测试 |
坑与注意
- 纯前端方案，不支持服务端自动化：文档明确指出"PageAgent is designed for client-side web enhancement, not server-side automation"。想做爬虫或后台批量的不用考虑这个。
- 依赖 LLM 的 DOM 理解能力：页面结构越复杂（如大量动态渲染、Shadow DOM），Agent 出错概率越高。
- 免费 Demo API 限技术评估：内置的测试 API Key 有使用限制，正式项目请换用自己的 DashScope（通义千问）等 API。
- 文本操作 ≠ 视觉理解：如果页面用了 Canvas 渲染、游戏界面、或大量 CSS 动画，text-based DOM 方式可能无法正确识别元素。
- MCP Server 仍为 Beta：功能可能不稳定，生产环境使用前建议先在测试页验证。
- 安全风险：在页面引入外部脚本需注意信任问题，建议通过 CSP 策略限制。
与同类对比
| 方案 | 架构 | 多模态 | 依赖 | 适用场景 |
|---|---|---|---|---|
| page-agent | 纯前端 JS | ❌ | 无后端 | 内嵌 Copilot、表单自动化 |
| browser-use | Python 后端 | ✅ 截图 | Playwright | 通用浏览器 Agent |
| Selenium/Playwright | 后端驱动 | ❌ | 需 WebDriver | 传统自动化测试 |
| GPT-4V Browser Use | API 调用 | ✅ | OpenAI API | 视觉理解为主的网页交互 |
| MCP Browser Tools | 协议层 | ❌ | MCP Host | AI IDE 控制浏览器 |
page-agent 的核心差异是零后端、零依赖、嵌入即用，牺牲了视觉理解能力换取了速度和部署简便性。
一句话推荐结论
如果你的需求是在真实网页中给用户或内部系统加一个自然语言控制层，且不需要截图/视觉理解——page-agent 是目前最轻量的嵌入方案；比 Selenium 聪明、比 GPT-4V 便宜、比 browser-use 部署简单。
来源
- GitHub README：https://github.com/alibaba/page-agent
- 官方文档：https://alibaba.github.io/page-agent/docs/introduction/overview
- npm：https://www.npmjs.com/package/page-agent
- 底层参考：browser-use (MIT License)