Page-Agent：让任意网页拥有自然语言控制能力的阿里开源项目

Skill超级捕获手 技术创作者 2026-08-25 15 阅读

让任意网页开口说话：Page-Agent 如何用自然语言接管 Web 界面

总结

Page-Agent 是阿里巴巴开源的「页面级 AI Agent」——一行脚本注入网页，就能让任意 Web 界面拥有自然语言控制能力。无需浏览器扩展、无需后端改造，直接通过 DOM 操作完成任务。目前 GitHub Star 突破 28.8K，8月初多次登上 GitHub Trending，是今年浏览器自动化赛道最值得关注的新晋项目之一。

功能与原则

Page-Agent 定位为「网页内置 GUI Agent」，核心能力是让 AI 直接理解和操作网页 DOM，无需截图、多模态模型或特殊权限。

设计原则：
– 纯前端注入：一行 script 标签搞定，不依赖 Python/Selenium/Playwright
– DOM 原生操作：基于文本的 DOM 遍历与操作，无需视觉模型
– 自带 LLM 路由：支持 Qwen、GPT、Claude 等主流模型，也支持本地部署
– 可选扩展：Chrome 扩展（多页任务）+ MCP Server（外部 Agent 控制浏览器）

认可度

  • GitHub Star：截至 2026-08-25 约 28.8K
  • GitHub Trending：2026年8月初多次登榜，属于当月 AI/Agent 热门项目
  • npm 周下载量：持续增长（具体数值随版本迭代波动）
  • 讨论热度：GitHub Discussions 活跃，HN Discussion 热度高，X（Twitter）上 @simonluvramen 持续更新

链接

GitHub：https://github.com/alibaba/page-agent

原作者

由 Gregor Zunic（GitHub: @gregzuni / X: @simonluvramen）创建，阿里巴巴团队维护。项目受 browser-use 启发，专注客户端 Web 增强而非服务端自动化。

介绍

Page-Agent 的核心理念是「让每一个网页都变成可编程的 AI 接口」。传统浏览器自动化工具（如 Playwright、Puppeteer）需要开发者编写精确的 CSS 选择器或 XPath 来定位元素，而 Page-Agent 只需要你用自然语言描述需求——「点击登录按钮」「填写用户名」「提交表单」——AI 就会理解页面结构并执行对应操作。

它的工作原理是：将 AI 模型接入页面后，模型会解析页面 DOM 树，理解各元素的功能和层级关系，然后用文本指令驱动 DOM 操作。这使得它在 ERP/CRM 等复杂后台系统中尤为实用——那些原本需要 20 次点击的审批流程，可以被一句话替代。

项目支持两种集成方式：一是 CDN 一行引入（适合快速体验），二是 npm 包引入（适合生产环境）。同时提供了可选的 Chrome 扩展（处理多页面任务）和 MCP Server（让外部 Agent 客户端控制你的浏览器）。

特点

  • 零后端改造：在 SaaS 产品中嵌入 AI Copilot，只需几行前端代码，无需修改后端 API
  • 不依赖视觉模型：纯 DOM 文本操作，响应快、成本低
  • 模型无关：Qwen、GPT、Claude、本地模型均可，支持 OpenAI 兼容 API
  • Chrome 扩展支持多页任务：跨 Tab 协作，适合复杂业务流程
  • MCP Server（Beta）：让 Cursor、Claude Code 等外部 Agent 直接控制你的浏览器
  • MIT 许可证：完全开源，可自由集成到商业产品

使用方法

快速体验（CDN 一行引入）：

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.12.2/dist/iife/page-agent.demo.js"></script>

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: 'YOUR_API_KEY',
  language: 'en-US',
})

await agent.execute('Click the login button')
await agent.execute('Fill in the username field with admin')
await agent.execute('Submit the form')

Chrome 扩展：从 Chrome Web Store 安装 Page Agent Extension，可管理多页面任务、查看执行日志。

MCP Server（Beta）：通过 npx page-agent-mcp 启动，让 AI 编码工具直接操控你的浏览器。

使用场景与人群

适用场景：
– 为 SaaS 产品快速添加 AI Copilot（无需后端改造）
– 自动化填写 ERP/CRM/Admin 后台表单（将 20 步点击压缩为 1 句指令）
– 将网页转为准无障碍界面（自然语言 + 屏幕阅读器）
– 让 AI 编码 Agent（Claude Code、Cursor）直接操控真实浏览器完成端到端任务

目标用户：
– SaaS 开发者（想低成本在产品中加入 AI 能力）
– 自动化工程师（处理重复性 Web 操作）
– AI 应用开发者（构建需要浏览器操作的多 Agent 系统）
– 无障碍开发者（用自然语言增强网页可访问性）

输入与输出案例

案例 1：自动化表单填写

Input：

"Fill in the expense report: amount=500, category=travel, submit for approval"

Output：Agent 自动定位「Amount」输入框 → 填入 500 → 定位「Category」下拉 → 选择 Travel → 滚动到「Submit」按钮 → 点击提交。整流程无需任何 CSS 选择器。

案例 2：在 SaaS 产品中嵌入 AI Copilot

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.12.2/dist/iife/page-agent.demo.js"></script>

用户打开页面，右下角自动出现 AI 对话气泡，输入「帮我填这份订单」，Agent 即理解页面结构并完成填写。相比改造后端 API 的方案，这只需要在前端引入一个 script 标签。

GitHub: https://github.com/alibaba/page-agent

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读