阿里开源Page-Agent：自然语言操控网页的Web智能体

让网页听懂人话：Page-Agent 是什么？

近日，阿里巴巴在 GitHub 上开源了一个备受关注的项目——Page-Agent。这是一个运行在网页内部的 JavaScript GUI 智能体，允许用户通过自然语言指令直接操控 Web 界面。项目发布后迅速走红，目前已收获超过 2.3 万 Stars、2000+ Forks，单日新增 Star 数高达 742，成为近期开源社区的热门焦点。

与传统浏览器自动化工具不同，Page-Agent 采用纯前端、页面内嵌（in-page）的技术路线，以 TypeScript 编写，直接在页面上下文中运行。这一设计让它在 Web Agent 赛道中显得格外独特，也预示着人机交互方式的一次潜在变革。值得关注的是，Web 浏览器是当今数字世界覆盖最广的应用载体——全球超过 50 亿互联网用户的大多数日常任务，无论是信息检索、网购、填写表单还是办公协作，几乎都以网页为入口完成。这意味着「让 AI 真正读懂并操控网页」，在技术上是打通 AI 与现实世界的一条最短路径，其战略价值远超单纯的自动化工具层面。

github source: alibaba/page-agent: JavaScript in-page GUI agent. Control web interfaces with natural language.

什么是「页面内 GUI 智能体」

核心定位

Page-Agent 的官方描述言简意赅：「JavaScript in-page GUI agent. Control web interfaces with natural language.」——用 JavaScript 实现的页面内 GUI 智能体，以自然语言控制 Web 界面。

几个关键概念值得拆解：

in-page（页面内）：智能体直接嵌入网页内部运行，而非像 Selenium、Playwright 那样通过外部驱动浏览器。它能实时访问 DOM 结构、监听页面状态，操作更贴近页面本身。DOM（Document Object Model，文档对象模型）是浏览器将 HTML 文档解析后在内存中构建的树形结构，每个 HTML 标签对应树中的一个节点，父子关系、属性值、文本内容均完整保留。页面内脚本可通过 document API 同步读写这棵树，而外部驱动程序则需要跨越进程边界、经由 WebDriver 协议序列化为 HTTP 请求后才能触达，天然存在通信延迟与信息损耗。正是这一底层架构差异，奠定了 in-page 方案在响应速度和状态感知完整性上的先天优势。
GUI Agent（图形界面智能体）：面向图形用户界面，能识别按钮、输入框、链接等可视化元素，并模拟点击、填写等真实交互行为。GUI Agent 是当前 AI 领域的重要研究方向，其核心挑战在于让 AI 系统能够像人类一样「看懂」并操作图形界面。学术界通常将 GUI Agent 的感知方式分为两大流派：一是视觉感知派，以截图或屏幕录制作为输入，借助多模态大模型（如 GPT-4V、Claude 3）进行像素级理解；二是结构感知派，直接解析 DOM 树或 Accessibility Tree（无障碍树）等结构化数据。前者泛化能力强但延迟高、坐标定位易偏移；后者速度快、定位精准，但依赖页面本身的语义标注质量。

值得一提的是，近期还涌现出一种融合两派优势的前沿方法——SoM（Set-of-Mark），由微软研究院于 2023 年提出。SoM 在截图上为每个可交互元素叠加数字编号标记，模型在视觉上「看到」这些编号后直接输出「点击元素 #5」这样的结构化指令，既保留了视觉理解的泛化能力，又通过离散编号规避了像素坐标定位不稳定的问题。这一方法已被 Claude Computer Use 等商业产品借鉴，代表了 GUI Agent 感知方式的最新演进方向。Page-Agent 选择直接解析 DOM 树的路线，本质上是以结构化数据替代视觉感知，在准确性和效率上具有天然优势。
自然语言控制：用户无需编写脚本或 XPath 选择器，只需用日常语言描述意图——例如「帮我搜索最新的 AI 新闻并点击第一条」——智能体便会自行解析并执行。这背后依赖的是大语言模型（LLM）强大的指令跟随（Instruction Following）与上下文推理能力：模型接收「当前页面结构描述 + 用户意图」后，输出具体的操作序列，再由 JavaScript 运行时付诸执行。现代 LLM 还引入了 Function Calling（函数调用） 机制——模型不再输出自由文本，而是输出结构化的 JSON 格式动作描述（如 {"action": "click", "element_id": "btn_submit"}），由宿主程序精确解析后执行，大幅降低了「模型输出 → 页面操作」这一翻译环节的出错率。Function Calling 最初由 OpenAI 在 2023 年 6 月引入 GPT 系列，随后成为主流模型 API 的标配能力，其本质是在预训练阶段通过大量工具调用样本微调，使模型学会在合适时机输出符合预定义 schema 的结构化响应，从而将模型的「软」输出与下游系统的「硬」执行可靠衔接。

与传统自动化工具的本质区别

传统网页自动化主要依赖 RPA（机器人流程自动化）工具或浏览器测试框架，需要开发者精确定位每个元素、编写固定执行流程。页面结构一旦变动，脚本往往随之失效，维护成本居高不下。RPA 工具的核心逻辑是录制-回放：将人工操作的每一步精确记录（元素坐标、XPath 路径、CSS 选择器），然后以程序方式重放。XPath 是 W3C 制定的 XML 路径语言，在 Web 自动化中用于精确定位 DOM 节点（如 //div[@class='btn-primary']/span[1]），其刚性结构决定了只要开发者调整了 class 名称或 HTML 层级，对应的 XPath 表达式就会立即失效。这种方式在页面结构稳定时效率极高，但脆弱性也随之而来——前端工程师一次 UI 重构，往往就能让数百条自动化脚本批量失效。

Selenium 和 Playwright 等工具通过 WebDriver 协议从浏览器外部发送指令，需要维护独立的驱动进程，存在跨进程通信开销。具体而言，WebDriver 协议是 W3C 标准化的远程控制接口，测试脚本通过 HTTP 请求向驱动程序发送 JSON 格式的命令，驱动程序再将其翻译为浏览器内部调用。这一链路在单次操作中可能引入数十毫秒的额外延迟，在需要频繁交互的复杂任务中累积效应尤为明显。Page-Agent 以 JavaScript 直接运行于页面沙箱内，可同步访问 document 对象、监听 MutationObserver 变化（一种浏览器原生的 DOM 变化监听 API，能以极低开销实时感知元素的增删改，相比轮询方式 CPU 占用降低约 90%），响应速度更快，无需处理跨进程序列化的复杂性。

Page-Agent 的思路截然不同：借助大语言模型的语义理解能力，将自然语言意图转化为对页面元素的实际操作，具备一定的自适应性。这种范式更接近人类使用网页的方式——看到界面，理解含义，然后行动——而不是硬记每个按钮的坐标。

技术架构：纯前端轻量方案

部署简便，上下文丰富

Page-Agent 以 TypeScript 开发，作为可注入的 JavaScript 库在页面中运行。TypeScript 是 JavaScript 的强类型超集，由微软开发维护，能在编译阶段捕获类型错误，在工程规模较大的 Agent 系统中尤其有助于提升代码的可维护性与可靠性。TypeScript 引入的静态类型系统对 Agent 工程尤为重要：动作类型定义（如 ClickAction | InputAction | ScrollAction 这样的联合类型）能够在编译期防止非法操作指令被构造出来，比运行时错误捕获更安全也更高效。这一架构带来两项核心优势：

部署轻便：无需额外的浏览器驱动或服务端环境，理论上可作为脚本片段注入任意网页，也可通过浏览器扩展的形式集成到日常使用中。浏览器扩展（Browser Extension）基于 WebExtensions API 标准，允许在浏览器层面注入内容脚本（Content Script）到任意页面，是将页面内 Agent 分发给普通用户的最自然载体，Chrome、Firefox、Edge 均已支持该标准。内容脚本运行在与页面 JavaScript 隔离的独立沙箱环境中，可通过 chrome.runtime 消息机制与扩展后台页面通信，这一架构设计同时也为权限边界管理提供了天然的隔离层，使扩展能够声明式地限定自身可访问的 API 范围，符合最小权限原则。值得关注的是，Chrome 已在 M127 版本引入实验性的 Prompt API，允许网页 JavaScript 直接调用内置的 Gemini Nano 模型进行本地推理，无需网络请求。这意味着未来浏览器可能原生支持轻量级 Agent 能力，Page-Agent 这类注入式方案与浏览器原生 AI API 的融合，或将成为下一阶段 Web Agent 架构演进的重要方向，二者的边界也将随浏览器标准的制定而逐步明晰。
上下文丰富：运行于页面内部，能实时获取完整的 DOM 信息、页面文本与元素可见性等状态，为大模型决策提供充分依据。

感知—决策—执行闭环

一个典型的页面内 GUI 智能体工作流如下：感知页面状态 → 理解用户意图 → 规划操作步骤 → 执行 DOM 交互 → 观察结果反馈 → 迭代修正。Page-Agent 正是围绕这一闭环构建：将页面可交互元素结构化后交由大模型推理，再将模型输出的动作映射回实际的页面操作。

这一闭环在 AI 领域有一个更正式的术语框架——ReAct（Reasoning + Acting），由 Google 研究团队于 2022 年提出。ReAct 范式要求 Agent 在每一步交替进行「思考（Thought）」和「行动（Action）」，并将环境反馈（Observation）纳入下一轮推理上下文，形成真正意义上的多步骤自主决策。Web Agent 是 ReAct 的天然应用场景：页面状态构成观察空间，点击/填写/滚动构成动作空间，大模型充当策略网络。在 ReAct 基础上，学术界和工业界还发展出了多种变体架构——例如 Plan-and-Execute（先由规划模型生成高层任务分解，再由执行模型逐步落地），以及引入「反思（Reflexion）」机制的架构（模型在任务失败后主动生成失败原因分析并写入记忆，指导后续尝试），这些方法共同构成了当前 Agentic AI 的主流技术图谱。

进一步地，当单一 Agent 处理复杂 Web 任务时，还面临上下文长度、推理深度的双重瓶颈，这催生了多智能体（Multi-Agent）协作架构的研究热潮。在该范式中，一个「编排者（Orchestrator）」Agent 负责任务分解与调度，多个「执行者（Executor）」Agent 并行或串行处理子任务，彼此通过共享内存或消息队列交换中间状态。AutoGen（微软）、CrewAI、LangGraph 等框架已将这一架构产品化，Page-Agent 所代表的页面内执行层，天然可以作为多智能体系统中专注于 Web 操作的「手」，与负责规划的「脑」解耦协作，为 Web Agent 接入更宏观的 AI 工作流提供了清晰的接口。

这里有一个关键的工程挑战值得关注：将网页 DOM 直接喂给大语言模型可能面临 token 爆炸问题——一个复杂页面的完整 HTML 可能超过数万 token，远超模型上下文窗口或造成推理成本剧增。Token 是大语言模型处理文本的基本单位，大致对应英文中 3/4 个单词或中文中 1-2 个汉字，由 BPE（字节对编码）等子词分词算法在预训练语料上统计学习得到。主流模型的上下文窗口从早期 GPT-3 的 4K token 已扩展至 Claude 3 的 200K token，但 token 消耗直接对应 API 调用成本，且过长的上下文也会稀释模型对关键信息的注意力（即「lost in the middle」现象——斯坦福大学 2023 年的研究表明，当关键信息位于长上下文的中间位置时，模型的检索准确率相比位于首尾时下降可达 20% 以上）。Page-Agent 的处理思路在于对 DOM 进行裁剪与结构化：提取可交互元素（按钮、输入框、链接）、保留语义文本、过滤样式噪声，将页面状态压缩为模型可高效推理的紧凑表示。这与学术界 WebArena、Mind2Web 等 benchmark 中广泛采用的「元素集合（element set）」方法思路一脉相承。

WebArena 是卡内基梅隆大学发布的 Web Agent 评测基准，涵盖购物、论坛、代码托管等真实网站场景；Mind2Web 则由俄亥俄州立大学构建，包含跨越 137 个真实网站的 2000+ 任务标注，二者共同构成了当前 Web Agent 研究的核心评测体系。值得注意的是，Web Agent 评测基准本身也在快速演进：早期的 MiniWoB++ 仅包含简化的模拟网页环境，任务形式单一；2024 年发布的 WorkArena 和 AssistGUI 进一步引入了企业级 SaaS 软件（如 ServiceNow）和本地桌面应用场景，任务复杂度与现实业务流程高度对齐。目前最顶尖的 Web Agent 在 WebArena 上的任务完成率仍徘徊在 40-50% 区间，距离人类水平（约 78%）仍有显著差距，凸显了该领域的巨大发展空间，也为 Page-Agent 这类开源方案的持续迭代提供了明确的技术坐标。

三大核心应用场景

无障碍访问

对视障用户或操作不便的群体而言，自然语言控制网页是实质性的体验提升。用户只需说出意图，智能体即可代为完成复杂的界面操作，显著降低使用门槛。现有的 Web 无障碍标准（如 WCAG 2.1）主要依赖开发者手动添加 ARIA 标签和语义化 HTML，执行成本高且覆盖率参差不齐。WCAG（Web Content Accessibility Guidelines）由 W3C 的 WAI 工作组制定，其 2.1 版本于 2018 年发布，从可感知性（Perceivable）、可操作性（Operable）、可理解性（Understandable）、鲁棒性（Robust）四个维度提出了无障碍设计要求，是欧盟《无障碍法案》、美国《康复法案》第 508 条等多项法规的技术依据。然而现实中，据 WebAIM 的年度调查，全球 top 100 万网页中仍有超过 96% 存在 WCAG 违规项——最常见的问题包括图片缺少 alt 文本、表单控件缺少标签、颜色对比度不足等，这意味着即便法规推动下无障碍建设持续改善，依然有大量页面对辅助技术不友好。Page-Agent 这类语义感知智能体提供了另一种思路：即使页面本身的无障碍标注不完整，模型也能借助上下文理解推断元素的功能，为辅助技术提供更具鲁棒性的底层支撑，在某种程度上成为 WCAG 之外的「AI 无障碍兜底层」。

自动化测试与流程编排

对开发者和企业用户，Page-Agent 可用更自然的方式描述测试用例或业务流程，减少维护脆弱脚本的成本。基于语义理解的智能体在页面改版后也更有可能自适应地完成任务，而非直接报错。在企业自动化场景中，这一特性对应的是 RPA 领域长期存在的「Last Mile Problem」——即自动化脚本在真实业务环境中频繁因页面细微变化而中断。Gartner 的研究数据显示，企业 RPA 项目中约 30-50% 的维护成本来自于应对 UI 变更引发的脚本失效，这一痛点也催生了以 UiPath、Automation Anywhere 为代表的 RPA 厂商转型探索「AI-augmented RPA」的浪潮——将计算机视觉与 NLP 能力嵌入传统 RPA 平台，以提升跨版本鲁棒性。以 LLM 为核心的语义智能体通过理解任务意图而非记忆操作路径，理论上能大幅提升跨版本的鲁棒性，尽管在实践中仍需应对模型幻觉（Hallucination）带来的误操作风险——例如模型可能「自信地」点击一个实际上并不存在的按钮，或将页面上相似但功能不同的元素混淆，因此在高风险业务流程中引入人工确认节点仍然必要。

AI Agent 生态的关键拼图

在当下 AI Agent 浪潮中，「让 AI 操控浏览器」已成为各大厂商的重要战场，并形成了多条技术路线并行的格局：

OpenAI Operator：基于云端截图推理，模型在服务器端接收浏览器快照，通过视觉理解输出操作指令，属于典型的视觉感知派。优势在于模型能力强、无需侵入页面代码，劣势是网络往返延迟较高，且截图传输涉及用户数据隐私。
Anthropic Computer Use：采用全屏视觉方案，不局限于浏览器，可操控整个操作系统桌面，技术边界更宽，但落地成本与安全风险也相应更高。Computer Use 在 2024 年发布时引发广泛关注，但 Anthropic 自身也在文档中明确警告其仍处于 beta 阶段，在处理敏感操作（如金融交易）时需格外谨慎。
Google Project Mariner：作为 Chrome 扩展运行，结合 Gemini 模型的多模态能力，在浏览器侧完成推理，一定程度上兼顾了响应速度与隐私保护。
微软 Copilot + Edge：将 AI 助手深度集成进浏览器原生能力，通过访问浏览器内部 API（而非公开的 WebDriver）实现更低层次的页面控制，生态整合度最高但平台绑定也最强。

这些方案大多依赖闭源云服务，开发者难以自由集成或二次开发。阿里 Page-Agent 聚焦于 Web 这一最主流的应用载体，以开源、轻量、页面内的形态切入，填补了「开发者可自由集成、无需依赖闭源云服务」的生态空白——这也是它在开源社区迅速获得关注的重要原因，为整个 Web Agent 生态提供了一块有价值的拼图。

开源价值与挑战并存

Page-Agent 快速积累的 Star 数——超过 2.3 万且单日新增 742——直观反映出开发者社区对「自然语言操控网页」这一方向的浓厚兴趣。作为阿里巴巴的开源项目，它也体现了国内大厂在 AI Agent 领域的持续投入与探索。值得关注的是，阿里在 Agent 基础设施层面已有多个开源布局，Page-Agent 与其通义系列模型在技术栈上具备天然的协同潜力，未来与 Qwen 等本地化模型的深度集成或将是其相对于纯云端方案的差异化竞争点之一。将推理能力下沉到端侧或本地服务器，不仅能大幅降低 API 调用成本和网络延迟，还能从根本上解决用户数据出境的隐私顾虑，这对金融、医疗等数据敏感行业的企业客户而言尤为关键。Qwen 系列模型已开源从 0.5B 到 72B 参数的多个量级，其中 Qwen2.5-7B-Instruct 等指令微调版本在工具调用任务上表现优异，为本地化 Web Agent 部署提供了可行的模型底座。

当然，页面内 GUI 智能体仍面临现实挑战：如何在复杂动态页面中保持稳定性、如何处理涉及登录鉴权或隐私的敏感操作、如何控制大模型调用的成本与延迟，都是需要在实践中持续打磨的问题。

安全边界尤为值得审视：一个能够自主操作页面的 JavaScript 智能体，理论上可以读取表单内容、触发支付流程、提交敏感数据。更隐蔽的安全威胁来自 Prompt Injection（提示注入）攻击——恶意网页可以在不可见的 HTML 元素中嵌入伪装成「系统指令」的文本（如 ），诱导 Agent 执行用户未授权的操作。提示注入本质上利用了 LLM 无法从语义上严格区分「数据」和「指令」的固有缺陷——模型在预训练阶段学习了服从指令的行为模式，却没有学习判断指令来源合法性的机制，这使其在面对混合了恶意指令的页面内容时天然脆弱。这一攻击向量已被多项学术研究证实具有较高成功率，是当前 Web Agent 安全领域最受关注的课题之一。如何在开放的能力边界与用户授权机制之间建立清晰的信任模型，将是这类工具走向大规模部署前必须解答的问题。业界目前探索的防御方向包括：对页面内容与系统指令进行严格的 token 级隔离（如通过特殊分隔符或独立上下文窗口区分来源）、引入操作确认（Human-in-the-loop）机制要求用户对高风险操作二次确认，以及建立细粒度的能力权限白名单（如允许读取内容但禁止触发支付）。

尤其是大模型的推理延迟，在需要多步骤操作的复杂任务中可能造成明显的响应卡顿，如何在模型能力与响应速度之间取得平衡，将是决定 Web Agent 产品体验的核心变量之一。业界目前的探索方向包括：使用更小的专用微调模型替代通用大模型以降低延迟（如基于 Qwen-7B 微调的领域专用 Web Agent 模型，推理耗时可比 GPT-4 降低 80% 以上）、引入预测性缓存减少重复推理、以及采用「快慢思考」的混合架构——简单操作由轻量模型即时响应，复杂任务才调用大模型深度推理。这一混合架构在认知科学上与心理学家丹尼尔·卡尼曼提出的「系统1/系统2」双过程理论异曲同工，或许也正是 AI Agent 工程化演进的必经之路。

对关注 AI 应用落地的开发者而言，Page-Agent 值得上手试用。它不仅是一个实用工具，更是观察「Web Agent」这一新兴范式如何演进的绝佳窗口。随着大模型能力的持续提升，用自然语言操控整个数字世界，或许将从愿景逐步走向日常。