Page Agent 是阿里巴巴开源的 JavaScript 网页自动化工具，无需浏览器扩展或 Python 环境，仅需几行代码即可用自然语言控制任意网页界面。支持文本化 DOM 操作、自带 LLM 接入、人机协作 UI，让网页自动化像聊天一样简单，适合快速集成 AI Copilot 能力。

🎤 引言

你有没有遇到过这种情况：需要反复在网页上执行相同的操作流程——批量填写表单、自动化测试、数据抓取，或者帮长辈远程操作某个网站？传统的自动化方案要么需要安装浏览器扩展，要么得配置复杂的 Python 环境，门槛都不低。

最近阿里巴巴开源了一个叫 Page Agent 的项目，思路很清奇：它不需要任何浏览器扩展，也不依赖 Python，就是一段纯粹的 JavaScript 代码，直接嵌入到你的网页里，然后用自然语言告诉它"点一下登录按钮"、"把表格里的数据复制下来"，它就能自动帮你完成。

目前 GitHub 上已经收获了 5.2k+ Stars，今天来聊聊这个工具到底能干什么。

⭐ 核心亮点

Page Agent 的设计理念是"轻量、无侵入、易集成"。它区别于传统自动化工具的几个特点：

纯前端实现

不需要浏览器扩展、不需要 Python、不需要无头浏览器。就是一段 JavaScript，通过 CDN 引入或者 npm 安装，直接跑在网页里。所有操作都在当前页面完成，不涉及跨域或额外的系统权限。

文本化 DOM 操作

不搞截图、不需要多模态大模型。Page Agent 将网页结构转化为文本描述，让 LLM 理解页面元素的位置、类型和功能，然后生成精确的操作指令。这种方式响应更快，也更省 token。

自带 LLM 接入

支持接入各种大模型，包括通义千问、OpenAI、Claude 等。你只需要配置 API Key，剩下的交给它。官方还提供了一个免费的测试 API，方便快速体验。

人机协作 UI

操作过程可视化，每一步执行了什么、为什么要这么做，用户都能看到。遇到不确定的操作，还可以人工介入确认，避免误操作。

Chrome 扩展（可选）

虽然核心功能不需要扩展，但如果你想让 Agent 跨页面执行任务（比如从 A 网站复制数据到 B 网站），可以安装官方提供的 Chrome 扩展来实现多页签协作。

🚀 快速上手

Page Agent 的使用非常简单，最快的方式是通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js" crossorigin="true"></script>

然后初始化 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: 'zh-CN',
})

// 用自然语言执行操作
await agent.execute('点击登录按钮')
await agent.execute('在搜索框输入"OpenClaw"')
await agent.execute('把表格第一列的数据复制到剪贴板')

如果你有自己的 LLM 服务，也可以直接配置：

const agent = new PageAgent({
  model: 'gpt-4',
  baseURL: 'https://api.openai.com/v1',
  apiKey: 'sk-xxx',
  language: 'en-US',
})

💡 典型应用场景

根据官方文档和社区反馈，Page Agent 适合这几类场景：

SaaS 产品 AI Copilot

如果你的产品是一个复杂的 B 端系统，用户经常抱怨"这个功能在哪"、"怎么操作"，可以集成 Page Agent 作为智能助手。用户直接用自然语言提问，Agent 自动帮他们找到功能入口并执行操作。

智能表单填写

ERP、CRM 这些系统往往有大量表单要填。Page Agent 可以把"帮我填写客户信息"这种自然语言指令，自动转化为点击输入框、填写数据、提交表单的一系列操作。

无障碍访问

对于视障用户或老年用户，传统的鼠标键盘操作可能有门槛。Page Agent 支持语音指令转自然语言，让任何网页应用都能通过语音控制。

自动化测试

相比传统的 Selenium 或 Playwright，Page Agent 的测试脚本可以用自然语言描述，维护成本更低。测试人员不需要写代码，直接描述测试步骤即可。

多页面任务

配合 Chrome 扩展，Page Agent 可以跨页面执行任务。比如"去 GitHub 把这个项目的 Stars 数记下来，然后写到我的 Notion 里"，这种跨站点的自动化也能实现。

🔧 技术原理

Page Agent 的核心思路是"把视觉问题转化为文本问题"。

传统的网页自动化（比如 Selenium）需要开发者精确指定元素的选择器（CSS Selector 或 XPath），一旦页面结构变化就会失效。而 Page Agent 的做法是：

  1. DOM 文本化：将页面上的按钮、输入框、链接等元素提取出来，生成结构化的文本描述（类似"页面上有一个叫'登录'的按钮，位于导航栏右侧"）
  2. LLM 决策：把这个文本描述传给大模型，让模型理解用户的自然语言指令，然后决定应该点击哪个元素、输入什么内容
  3. 执行反馈：执行操作后，把结果反馈给模型，进入下一轮决策

这种方式的好处是鲁棒性更强——即使页面样式变了，只要元素的文本标签还在，Agent 就能找到它。

⚠️ 已知限制

GitHub Issues 里用户反馈的一些问题：

  1. 复杂交互支持有限：对于拖拽、画布绘制、富文本编辑器等复杂交互，目前的支持还不够完善
  2. 依赖 LLM 质量：如果 LLM 理解错了页面结构，可能会点错按钮。建议配合人机协作模式使用
  3. 跨域限制：由于浏览器的安全策略，Page Agent 无法直接操作 iframe 里的跨域内容
  4. 性能开销：每次操作都需要调用 LLM API，对于高频自动化场景成本需要考虑

✅ 总结

Page Agent 的定位很清晰：不是取代 Selenium/Playwright 这些专业自动化工具，而是降低网页自动化的门槛。它让没有编程背景的用户也能通过自然语言实现简单的自动化任务，让开发者能更快地为产品接入 AI Copilot 能力。

如果你有以下需求，可以试试 Page Agent：

  • 想给产品快速加一个 AI 助手，但不想改动后端
  • 需要帮非技术人员实现简单的网页自动化
  • 做无障碍功能，让网页支持语音/自然语言控制
  • 厌倦了维护脆弱的 CSS Selector，想要更鲁棒的自动化方案

项目地址：https://github.com/alibaba/page-agent

在线 Demo：https://alibaba.github.io/page-agent/

免责声明：本文基于 GitHub 公开信息整理，功能描述以官方文档为准。使用第三方 API 请注意数据安全。