企业官网建设流程全解析

每日开源 · 第 084 期 · 早间篇

PageAgent：阿里开源的「住在网页里」的 AI 操作员

一行 JavaScript，让任何网页听懂自然语言，零后端零扩展零截图

**免责声明：**本工具依赖境外公开数据源（如 GitHub、npm CDN），部分平台在中国大陆需合规网络环境。本文仅供技术学习与交流，请勿用于大规模数据抓取等违规场景。

📋 项目速览

**项目名称：**PageAgent (alibaba/page-agent)
**开源协议：**MIT
**开发语言：**TypeScript
**最新版本：**v1.11.0
**GitHub Stars：**23,141+
今日新增：+742 🔥
**出品方：**阿里巴巴
**核心标签：**GUI Agent纯前端JSDOM文本化自然语言操控零后端MCP Server

23k+

GitHub Stars

MIT

开源协议

1行

JS接入

30+

支持模型

如果你做过企业级后台系统开发，一定对这个问题深有体会：用户面对一个几十个字段的表单页面、十几步的操作流程，培训成本高、操作出错率高、客服工单量居高不下。能不能让用户用自然语言说一句话，AI 就帮他操作完所有步骤？

阿里巴巴最近在 GitHub 开源的PageAgent，正是为了解决这个问题而生。它不依赖任何后端服务、浏览器扩展、Python 环境或截图识别——只需要一行 JavaScript 代码嵌入网页，用户就能用自然语言操控页面上的任意元素。

项目目前在 GitHub 上已斩获 23,141+ Stars，今日新增 742 Stars，位列 GitHub Trending 第 3 名。更重要的是，它代表了 GUI Agent 领域一条全新的技术路线：「Inside-out」——AI 不站在浏览器外面窥探页面，而是直接住在网页里面。

它能解决什么问题？

传统网页交互的痛点，做过 B 端产品的朋友都懂：

😫 复杂操作门槛高

ERP、CRM 等系统动辄几十个字段、十几步操作流程，新员工培训成本高，老员工也容易出错。

📞 客服成本居高不下

客服机器人只能"告诉用户点哪里"，不能"帮用户点"，每次都要人工介入指导操作。

🏗️ 老系统改造困难

用了多年的管理后台，改造成本极高。重构前端？风险大、周期长。改后端？牵一发而动全身。

♿ 无障碍体验缺失

视障用户、老年用户面对复杂 Web 应用无从下手，语音助手只能"念"页面，不能"操作"页面。

PageAgent 的答案是：把 AI 操作员直接嵌入网页。用户说"帮我把截止日期改到下周五"，Agent 就自动找到日期选择器、点击、修改、确认——一气呵成，不需要用户知道"日期选择器在第三个面板的第二行"。

核心亮点：为什么它跟所有方案都不一样？

一、「Inside-out」架构：从页面内部控制，而不是从外部窥探

这是 PageAgent 最根本的设计哲学差异。我们看看传统方案和它的对比：

🖥️ Selenium / Playwright（外部控制）

Python后端无头浏览器需同步Cookie网络开销大速度慢
从浏览器外部通过 WebDriver 协议控制页面，每次操作都要经过网络传输，还需要同步用户登录态。部署一套自动化环境动辄要装 Python + 浏览器驱动 + 依赖包。

🔌 浏览器扩展方案（如 browser-use）

需安装扩展Python后端截图+多模态LLM成本高
browser-use 是目前最流行的 AI 浏览器自动化工具（93k+ Stars），但它需要用户安装浏览器扩展、后端跑 Python 进程、依赖截图+多模态视觉模型。单次操作成本约 $0.01-0.03，耗时 2-5 秒。

📸 RPA / 截图识别方案

多模态视觉模型截图+OCR不继承登录态速度慢
依赖截图和多模态视觉模型"看懂"页面，不继承用户 Cookie，每次操作成本高且速度慢。

🏠 PageAgent（页面内控制）⭐ 新范式

纯前端JS天然继承CookieDOM文本化零网络开销单次~$0.0010.5-1秒
Agent 直接运行在网页的 JavaScript 运行时里，天然拥有用户的所有 Cookie 和权限，不需要截图、不需要网络传输、不需要多模态模型。单次操作成本约 $0.001-0.003，速度 0.5-1 秒，成本降低一个数量级，速度快 3-5 倍。

二、DOM 文本化：不截图，也能"看懂"页面

这是 PageAgent 最核心的技术创新。它不截图，而是遍历 DOM 树，提取所有可交互元素，生成一份结构化的文本描述。比如面对一个登录表单，它会生成这样的内容：

[1] button “登录” [2] input “用户名” placeholder=“请输入用户名” [3] input “密码” type=“password” [4] checkbox “记住我” checked=false [5] link “忘记密码” [6] button “注册新账号”

每个可交互元素都有编号、类型、文字内容和属性。这份文本描述被发送给 LLM，模型返回操作指令如click([1])或type([2], "admin")，Agent 在 DOM 中执行对应操作。

为什么不用截图？算一笔账：

截图 + 多模态模型方案

单次成本 ~$0.01-0.03 | 延迟 2-5 秒 | 需要 GPT-4o / Gemini 等视觉模型 | Token 消耗大

DOM 文本化 + 文本模型方案 ⭐

单次成本 ~$0.001-0.003 | 延迟 0.5-1 秒 | gpt-4o-mini / 千问即可胜任 | Token 消耗小

成本差了一个数量级，速度快了 3-5 倍。

这就是「不做视觉识别、直接读 DOM」带来的质变。而且因为不依赖截图，这个方案天然不受页面主题、字体大小、屏幕分辨率等因素影响。

三、零后端，零扩展，一行代码接入

这是 PageAgent 对开发者最友好的地方。要体验它，只需要在 HTML 里加一行：

如果是国内网络环境，用 npmmirror 镜像：

Demo 模式使用的是阿里提供的免费测试 LLM API（仅供技术评估）。生产环境通过 NPM 安装，接入自己的模型：

// 安装npm install page-agent// 使用通义千问import { PageAgent } from’page-agent’const agent = newPageAgent({ model: ‘qwen3.5-plus’, baseURL: ‘https://dashscope.aliyuncs.com/compatible-mode/v1’, apiKey: ‘YOUR_API_KEY’, language: ‘zh-CN’, })await agent.execute(‘把截止日期改到下周五’)

四、安全可控：企业级特性一个不少

PageAgent 不是简单的"玩具项目"，它内置了完善的企业级安全机制：

🛡️ 操作黑白名单

可以限制 Agent 只能操作特定区域或特定类型的元素，防止越权操作。比如只允许在表单区域操作，不能碰导航栏。

🔒 数据脱敏保护

敏感字段（如密码、身份证号）可配置为脱敏传输，Agent 读取 DOM 时自动遮盖这些内容。

👤 Human-in-the-Loop 人工审批

涉及高风险操作（如删除、提交）前，弹出确认对话框让用户审批后再执行。开启方式：设置humanInTheLoop: true。

📚 自定义知识注入

可以注入业务规则、操作手册等自定义知识，让 AI 按照你设定的规则工作，而不是自由发挥。

五、模型自由：30+ LLM 任意切换，支持本地部署

PageAgent 支持所有兼容 OpenAI API 格式的模型，包括：

// 千问系列qwen3.7-max / qwen3.7-plus / qwen3.5-plus⭐ / qwen3.5-flash⭐// OpenAI 系列gpt-5.5 / gpt-5.4-mini⭐ / gpt-5.4-nano⭐ / gpt-4.1-mini// DeepSeek 系列deepseek-v4-pro / deepseek-v4-flash⭐// Claude 系列claude-sonnet-5 / claude-opus-4-8 / claude-haiku-4-5⭐// Google / xAI / Kimi / GLM 等均支持 // ⭐ 表示推荐的轻量快速模型

更值得一提的是本地模型支持。如果你对数据隐私有极高要求，可以接入 Ollama 或 LM Studio 运行的本地模型：

// 接入 Ollama 本地模型const agent = newPageAgent({ model: ‘qwen3:14b’, baseURL: ‘http://localhost:11434/v1’, // 本地模型无需 apiKey})// 启动 Ollama 时需开启 CORS 并增大上下文窗口：// OLLAMA_CONTEXT_LENGTH=64000 OLLAMA_ORIGINS=“*” ollama serve

注意：本地模型建议使用 10B 参数以上的版本，且需要支持 tool_call 功能。一个典型页面通常需要约 15k tokens 的上下文窗口。

实战场景展示

场景一：SaaS 产品 AI Copilot

最常见的应用场景。在企业管理后台、ERP、CRM 等 B 端产品中嵌入 PageAgent，用户可以直接用自然语言完成操作。不需要改造后端逻辑，不需要重构前端架构——前端加一行 JS，用户就有了 AI 操作员。

// 用户说一句话，Agent 自动完成多步操作await agent.execute(‘帮我查询最近 7 天的所有订单，导出为 Excel’)await agent.execute(‘填写入职申请表：部门选技术部，职位填高级工程师，入职日期选下周一’)await agent.execute(‘在搜索框输入"PageAgent"，打开第一个搜索结果’)

场景二：老系统智能化改造

这是 PageAgent 最甜蜜的应用场景。很多企业有用了 5-10 年的管理后台，功能齐全但交互老旧，用户天天吐槽难用。重构成本动辄几十上百万，风险还大。

用 PageAgent，一行 JS 代码让老系统秒变 AI 助手。用户不再需要记住"先点设置→选系统配置→点新增→填表单→点保存"这样的操作路径，只需要告诉页面"帮我新增一个用户配置"，Agent 自动完成全部操作。不动后端、不重构前端，投入产出比极高。

场景三：无障碍增强

PageAgent 为视障用户和老年用户提供了全新的交互方式。结合屏幕阅读器或语音助手，用户可以用自然语言操控任何 Web 应用：

// 语音指令 → Agent 自动操作// “帮我把购物车里的商品结算”// “查看我这个月的消费明细”// “帮我在日历上预约明天下午3点的会议室”

这不仅仅是"语音朗读页面内容"，而是真正的**“语音驱动页面操作”**——从"听"到"做"的质变。

场景四：多页面跨标签工作流（Chrome 扩展 + MCP Server）

PageAgent 核心库只能操作当前页面。对于需要跨多个标签页的复杂任务，官方提供了可选的 Chrome 扩展和 MCP Server（Beta）：

// 配合 Chrome 扩展，跨标签页执行任务await agent.execute(‘先在淘宝搜索"机械键盘"，再打开价格最低的商品页面，记录商品名称和价格’)

MCP Server 更是让外部 AI Agent（如 Claude Code、Cursor）能够直接控制浏览器，将 PageAgent 的能力融入到更大的 AI 工作流中。

上手指南：从零到用起来

1****快速体验（30秒）

在任意网页的 HTML 中插入 Demo CDN 脚本，页面右下角出现 AI 对话框，直接用自然语言下指令。Demo 使用阿里提供的免费测试 API，仅供技术评估。

2****NPM 集成（生产环境）

npm install page-agent

然后 import PageAgent，配置你自己的 LLM API Key。支持千问、OpenAI、DeepSeek、Claude 等所有兼容 OpenAI API 的模型。

3****配置安全策略

根据业务需求开启 Human-in-the-Loop 审批、操作白名单、数据脱敏等功能。对于面向外部用户的产品，建议通过后端代理转发 LLM 请求，不要在前端代码中硬编码 API Key：

const agent = newPageAgent({ baseURL: ‘/api/llm-proxy’, model: ‘gpt-5.4-mini’, customFetch: (url, init) => fetch(url, { …init, credentials: ‘include’ }), })

4****监听事件与日志

PageAgent 提供完整的事件回调，方便记录操作日志和接入自定义 UI：

agent.on(‘action’, (action) => { console.log(‘Agent 正在执行：’, action) }) agent.on(‘complete’, (result) => { console.log(‘执行完成：’, result) }) agent.on(‘error’, (err) => { console.error(‘执行出错：’, err) })

5****可选：Chrome 扩展 + MCP Server

安装官方 Chrome 扩展实现跨标签页操作；启动 MCP Server 让外部 AI Agent 控制浏览器。详见官方文档。

💡 踩坑提醒（来自社区实战经验）

**Shadow DOM：**Web Components 中的 Shadow DOM 元素目前无法操作，等待官方支持。
**CSP 限制：**部分公司项目 CSP 策略严格，核心库可能加载失败，可改用 Chrome 扩展模式。
**长链路任务：**10 步以上的复杂流程中间容易出错，建议拆成多个短指令分步执行。
**模型幻觉：**偶尔点错元素，建议使用更强的模型或添加重试逻辑。
**Canvas/WebGL 应用：**DOM 文本化方案无法识别画布内容，不适用于这类场景。

技术架构一瞥

PageAgent 采用 Monorepo 架构，核心分为三层：

📦 page-agent（AI 核心代理层）

代理主循环，协调 LLM 推理和工具调用。包含 UI 组件（交互面板）、Tools 工具定义、LLM 集成层。

🔧 page-controller（DOM 操作层）

负责 DOM 解析、元素提取、事件模拟。将 AI 决策与页面操作分离，可独立复用。

🌐 website（文档与 Demo 站点）

官方文档、在线 Demo、使用指南。

核心工作流非常清晰：

用户自然语言指令 │ ▼ ┌─────────────┐ │ DOM 文本化 │ 遍历 DOM 树，提取可交互元素编号 └──────┬──────┘ │ ▼ 文本描述 + 用户指令 ┌─────────────┐ │ LLM 推理 │ 返回操作序列: click([3]), type([5], “hello”) └──────┬──────┘ │ ▼ ┌─────────────┐ │ DOM 操作执行 │ 模拟点击、输入、滚动等事件 └──────┬──────┘ │ ▼ 任务完成 or 继续循环

值得注意的是，PageAgent 的 DOM 处理组件和 prompt 设计源自 browser-use 项目（93k+ Stars 的 AI 浏览器自动化工具），但它将这套逻辑从 Python 后端搬到了浏览器 JavaScript 运行时中，实现了架构层面的范式转移。项目 README 中也明确致谢了 browser-use 的作者 Gregor Zunic。

今日总结

PageAgent 代表的是一种全新的网页交互范式——从"人适应机器"到"机器适应人"，从"编写代码"到"表达意图"，从"后端自动化"到"前端智能化"。

它的核心价值在于：

🏠 Inside-out 架构

Agent 住在页面里，天然拥有用户权限，不需要从外部窥探。这是与传统方案最根本的区别。

📖 DOM 文本化替代截图

成本降低一个数量级（$0.001 vs $0.01-0.03），速度快 3-5 倍（0.5s vs 2-5s），不需要多模态视觉模型。

⚡ 零后端零扩展

一行 JS 代码接入，不需要安装 Python、浏览器驱动、浏览器扩展，用户零安装成本。

🔒 企业级安全

操作白名单、数据脱敏、人工审批、自定义知识注入，让 AI 在安全边界内工作。

当然，作为一个活跃开发中的项目（v1.11.0），它还有一些需要改进的地方：Shadow DOM 支持、长链路任务稳定性、跨页面能力的原生支持等。但考虑到其 MIT 开源、阿里出品、社区活跃（1,085 commits），这些问题都有望在后续版本中解决。

对于正在做 SaaS 产品、企业管理后台、或者任何需要降低用户操作门槛的 Web 应用的朋友，PageAgent 值得你花 30 秒用 Demo 模式体验一下。

💬 互动话题

你在自己的项目中遇到过哪些"用户操作太复杂"的痛点？有没有尝试过用 AI 来解决？欢迎在评论区分享你的经验和想法！

📂 项目地址：github.com/alibaba/page-agent
📖 官方文档：alibaba.github.io/page-agent
🚀 在线 Demo：alibaba.github.io/page-agent

每日开源 · 第 084 期 · 早间篇
2026 年 7 月 5 日

关注「每日开源」，每天一个值得深读的开源项目

本工具依赖境外公开数据源（GitHub、npm CDN），部分平台在中国大陆需合规网络环境。本文仅供技术学习与交流。