Page-Agent：阿里开源的轻量化浏览器AI自动化框架，纯前端零后端完成网页操作
一、Page Agent是什么
Page-Agent 是由阿里巴巴正式开源的一款前端网页GUI智能操作代理框架，基于原生DOM解析技术打造，属于轻量化网页自动化AI智能体工具。
该项目彻底摒弃传统网页自动化依赖截图视觉识别、图像比对的低效模式，直接读取网页真实DOM节点结构、元素属性、页面层级信息，通过对接主流大语言模型，将人类自然语言指令自动转化为网页可执行操作行为，实现纯前端无侵入式网页智能操控。
项目全程运行在浏览器客户端，无需搭建专属后端服务、无需部署复杂环境，支持开发者快速嵌入自有网站、网页系统、后台管理平台，也可通过浏览器脚本快速调用使用，同时支持私有化部署、自主配置大模型密钥，数据全程由使用者自主掌控，是目前开源领域轻量化网页AI自动化的标杆级项目。
开源协议采用MIT开源协议，商用、个人学习、企业二次开发均无版权限制，社区迭代速度快，功能持续完善，适配国内主流AI大模型与海外通用大模型接口。
二、功能特色
纯前端离线运行，零后端依赖
项目核心逻辑全部基于TypeScript编写，编译后可直接在浏览器运行，不需要服务端中转请求、不需要搭建任务调度服务器，嵌入网页即可启用，大幅降低部署与使用成本。DOM精准解析，告别视觉识图误差
摒弃OCR图像识别、屏幕截图识别方案，直接抓取页面标签、输入框、按钮、下拉菜单等真实DOM元素，定位精度远超传统RPA网页工具，不受页面样式、色彩、弹窗遮挡轻度干扰。自然语言极简操控
使用者仅需输入中文/英文自然语言指令，即可完成网页点击、文字输入、表单填写、页面滚动、选项勾选、弹窗关闭、内容提取等全流程操作，无需编写复杂自动化脚本。自主密钥接入，数据安全可控
支持BYOK自带密钥模式，用户自行配置通义千问、GPT系列、Claude、Gemini等大模型API密钥，所有页面数据、交互指令仅在本地与用户对接大模型之间传输，无第三方数据截留。轻量化嵌入，多接入方式兼容
支持CDN快速引入、NPM项目集成、浏览器控制台临时调用三大接入方式，适配静态网页、Vue、React、原生JS各类前端项目。内置可视化操作面板
自带悬浮交互UI面板，无需自定义开发交互界面，启用后自动在网页右下角弹出操作窗口，直观输入指令、查看执行日志。多语言全局适配
原生支持简体中文、英文双语环境，可自由切换交互语言，满足国内办公场景与海外网页操作需求。低侵入式页面适配
不会篡改网页原有业务逻辑、样式布局、接口请求，仅做页面元素读取与模拟人工操作，适配企业OA系统、电商后台、管理控制台、政务网页等各类正式业务页面。
三、技术细节
3.1 整体技术架构
项目采用Monorepo模块化架构拆分开发，整体划分为多个独立功能包，各司其职耦合度极低，便于开发者按需引入模块：
page-agent 项目目录结构 ├── packages │ ├── page-agent # 完整版主包，包含可视化UI交互面板 │ ├── core # 无UI核心运行内核，纯逻辑自动化能力 │ ├── llms # 各大AI大模型接口适配层，统一请求格式 │ ├── page-controller # DOM元素抓取、页面行为模拟控制器 │ ├── ui # 悬浮操作面板、指令输入弹窗前端组件 │ └── extension # 浏览器扩展程序适配模块（开发迭代中）
3.2 核心执行流程
1. 触发指令 → 2. 采集当前页面完整DOM结构并精简清洗 → 3. 结构化页面信息推送至配置大模型 4. 大模型解析自然语言指令 → 5. 生成标准化网页操作指令队列 6. 前端控制器模拟人工执行点击/输入/选择等行为 → 7. 返回执行结果与页面状态
3.3 关键技术亮点
DOM轻量化裁剪算法：自动过滤页面冗余注释、无效样式节点、广告悬浮元素，精简传输数据体积，大幅降低大模型接口请求消耗与响应时长。
通用AI接口统一适配：遵循OpenAI标准接口格式设计适配层，所有兼容该格式的大模型均可一键接入，无需单独改写请求代码。
原生事件模拟机制：模拟浏览器原生鼠标点击、键盘输入、焦点切换事件，完美规避网页人机行为检测，稳定性高于脚本强制赋值操作。
环境兼容适配：兼容Chrome、Edge、360浏览器等主流Chromium内核浏览器，同时适配PC端全尺寸网页布局。
3.4 技术开发依赖
主体开发语言：TypeScript
运行环境：浏览器端、前端Node项目环境
构建工具：Vite
兼容标准：ES6+、W3C标准DOM规范
四、应用场景
企业后台办公自动化
自动完成OA系统考勤签到、审批流程提交、财务表单填写、数据台账录入，替代重复人工机械操作，提升行政办公效率。网站内置AI智能助手
企业官网、管理后台、SaaS平台嵌入Page-Agent，让用户通过文字指令快速完成功能操作，降低新手用户使用学习成本。网页数据批量采集整理
定向提取网页表格数据、列表信息、公告内容，结合指令完成数据筛选、页面翻页遍历等轻量化采集工作。无障碍网页智能操控
针对行动不便用户，实现语音转文字指令操控网页，打造简易化无障碍上网交互方案。运营批量运维操作
自媒体后台、电商商家后台批量发布内容、修改商品信息、批量勾选操作，解放运营重复劳作。前端项目功能测试
前端开发人员使用自然语言指令快速完成页面功能回归测试，简化自动化测试脚本编写流程。个人日常网页便捷操作
日常网页填表、账号登录、社区签到、资讯浏览等高频简单操作一键自动执行。
五、使用方法
5.1 方式一：浏览器控制台快速体验（零基础即用）
打开任意目标网页，按下键盘 F12 调出开发者工具
切换至 Console 控制台 面板
直接粘贴下方代码并回车执行
const scriptDom = document.createElement('script');
scriptDom.src = 'https://cdn.jsdelivr.net/npm/page-agent@1.x/dist/iife/page-agent.demo.js';
document.body.appendChild(scriptDom);网页右下角自动弹出Page-Agent操作面板，输入自然语言指令即可执行操作。
5.2 方式二：网站HTML页面CDN嵌入（站点集成）
在网页<body>标签内引入官方CDN地址，全站自动挂载智能操控功能
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.x/dist/iife/page-agent.js"></script>
引入完成后无需额外编写代码，页面自动初始化启用全部功能。
5.3 方式三：NPM项目正式集成（Vue/React/前端工程）
执行安装命令
npm install page-agent # 或者使用yarn yarn add page-agent
项目内初始化配置大模型并调用
import { PageAgent } from 'page-agent';
// 初始化智能代理
const webAgent = new PageAgent({
model: "qwen3.5-plus",
baseURL: "你的大模型兼容接口地址",
apiKey: "用户自行填写专属API密钥",
language: "zh-CN"
});
// 执行自然语言操作指令
await webAgent.execute('在页面搜索框输入开源项目并点击搜索按钮');5.4 基础常用操作指令示例
页面操作：向上滑动页面、关闭当前弹窗、点击首页按钮
表单操作：在用户名框输入账号，密码框输入密码，点击登录
选择操作：勾选第一条选项，下拉选择第一个分类
六、竞品产品
| 对比维度 | Page-Agent | BrowserUse | Playwright AI |
|---|---|---|---|
| 开发出品方 | 阿里巴巴开源 | 海外开源社区 | 微软官方开源 |
| 核心原理 | DOM节点直接解析 | 截图视觉识别+DOM结合 | 代码脚本驱动+AI指令转脚本 |
| 运行环境 | 纯前端浏览器运行 | 客户端程序+浏览器 | Node后端驱动浏览器 |
| 部署难度 | 极低，CDN一行引入 | 中等，需安装客户端 | 较高，需搭建运行环境 |
| 数据安全性 | 本地密钥，无第三方中转 | 部分日志上传社区 | 任务日志留存本地服务端 |
| 使用门槛 | 零基础，纯自然语言 | 需简单熟悉页面指令 | 需具备前端脚本基础 |
| 商用授权 | MIT完全免费商用 | 开源免费，部分功能受限 | 开源免费，企业级功能付费 |
| 核心优势 | 轻量化、嵌入站点便捷、国内大模型适配完善 | 跨平台兼容性强、多模态识别精准 | 自动化稳定性强、批量任务能力强 |
| 短板不足 | 暂不支持复杂跨页面跳转 | 体积偏大、响应速度偏慢 | 无法可视化简易指令操控 |
七、常见问题解答
Q1：Page-Agent使用过程中是否会收取任何使用费用？
A：项目本身完全免费开源，无任何功能收费、会员收费、调用收费，仅使用者对接的第三方AI大模型会产生正常接口调用费用，项目本身不产生任何额外成本。
Q2：接入之后无法识别网页内ShadowDOM内部元素怎么办？
A：目前稳定版本暂未全面深度兼容ShadowDOM封闭节点，可等待官方后续版本迭代更新，临时解决方案可将目标元素调整至常规DOM层级内进行操作。
Q3：配置正确API密钥后，指令执行一直提示请求失败？
A：首先检查大模型接口地址是否符合OpenAI兼容格式，其次确认网络环境可正常访问对应大模型接口，最后核对密钥权限与接口调用额度是否充足。
Q4：Page-Agent能否实现自动识别并破解网页验证码？
A：项目本身不具备验证码识别、绕过验证机制相关功能，出于合规与安全原则，官方也不会开发此类违规功能，仅支持正常合规网页日常操作。
Q5：嵌入企业官网之后，会不会影响网站原有访问速度？
A：项目脚本体积轻量化，加载速度极快，且默认懒加载初始化，不会阻塞页面主渲染流程，对网站访问速度几乎无负面影响。
Q6：是否支持手机移动端网页进行智能操控？
A：当前版本优先适配PC端电脑网页，移动端适配功能仍在优化迭代，暂不建议在手机端大规模使用。
Q7：个人修改二次开发之后，是否可以闭源商用发布？
A：项目遵循MIT开源协议，允许二次修改、封装、闭源商用发布，仅需保留原始开源协议声明即可，无额外约束条件。
八、相关链接
GitHub仓库地址：https://github.com/alibaba/page-agent
九、总结
Page-Agent作为阿里巴巴推出的开源前端网页AI智能代理工具，依托原生DOM解析的核心技术优势，打破了传统网页自动化工具依赖视觉识别、部署繁琐、使用门槛高的行业痛点，凭借纯前端运行、零后端搭建、多方式快速接入、自主管控密钥数据安全等核心优势，兼顾个人轻量化日常使用与企业站点功能嵌入两大核心需求。项目技术架构简洁清晰，模块化设计便于开发者灵活拆分复用功能，同时全面兼容市面主流AI大模型接口，适配国内各类办公网页、业务管理系统与日常浏览网页场景，无论是前端开发者丰富网站交互能力，还是普通用户实现网页简易自动化操作，都具备极高的实用价值与落地价值，是当前开源生态中实用性极强的轻量化网页GUI智能体解决方案。
版权及免责申明：本文由@97ai原创发布。该文章观点仅代表作者本人，不代表本站立场。本站不承担任何相关法律责任。
如若转载，请注明出处：https://www.aipuzi.cn/ai-news/page-agent.html
