🌐 Page-Agent：阿里 AI 浏览器助手 DOM 操控自然语言控制网页

Page-Agent 是阿里巴巴开源的网页内置 AI 代理，一行 script 标签注入网页，用自然语言控制任意 Web 界面。无需浏览器扩展、无需 Puppeteer，直接读 DOM 文本执行操作，支持 MCP 协议和 Chrome 扩展，23.3k Stars。

🎤 引言

传统浏览器自动化是什么流程？装 Python、装 Puppeteer 或 Playwright、写一堆 await page.click()、配 headless Chrome 环境——好不容易跑起来，代码比业务逻辑还长。

AI 浏览器自动化呢？Claude/MCP 架构一顿操作，又是 browser-use 又是截图解析又是多模态模型——效果不错但资源消耗感人。

Page-Agent 换了个思路：把 AI 代理直接注入到网页内部，让它从里面操控 DOM，而不是从外面控制浏览器。23.3k Stars，1,085 Commits，MIT 协议——这就是阿里巴巴开源的 Page-Agent。

⭐ 核心功能

1. 一行代码集成

最震撼的其实是集成门槛——只需要一行 script 标签：

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

不需要浏览器扩展、不需要 Python 环境、不需要 headless Chrome，不依赖 Puppeteer。CDN 加载完，页面上就多了一个 AI 代理，直接用自然语言操控界面。

2. 基于 DOM 文本的操控（无截图）

这是 Page-Agent 和其他 AI 浏览器工具的本质区别。它读取 DOM 树结构作为文本，不需要截图、不需要多模态大模型、不需要视觉理解。

传统 screenshot-based 方法：截图 → 发送给 GPT-4V → 解析 → 返回指令 → 控制浏览器
Page-Agent 方法：读取 DOM 文本 → 发送给普通 LLM → 返回指令 → 直接操作 DOM

DOM 文本 vs 截图：延迟更低、成本更低、不依赖昂贵的视觉模型。

3. 自带 LLM（BYOLLM 架构）

不绑死模型，可以接任何 OpenAI 兼容端点：

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')

支持：通义千问（qwen）、OpenAI、Claude（通过 OpenRouter）、本地 Ollama——完全自己掌控数据流向。

4. Chrome 扩展 + MCP Server

Chrome 扩展：用于多标签页任务，让 AI 代理跨浏览器标签工作
MCP Server（Beta）：把浏览器控制能力暴露给外部 AI 系统（如 Claude Desktop），让高级 AI Agent 可以操控你的浏览器

5. 企业级安全特性

数据脱敏（DOM dehydration）
代理授权
Zod 验证
人工审批工作流
敏感字段过滤

📥 安装与使用

方式一：CDN 一行引入（最快）

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js" crossorigin="true"></script>
</head>
<body>
  <button id="myBtn">Click me</button>
  <script>
    new window.PageAgent().execute('Click the button with id myBtn')
  </script>
</body>
</html>

⚠️ Demo CDN 使用的是阿里免费测试 LLM API，仅供技术评估使用。

方式二：NPM 引入（生产环境）

npm install page-agent

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    model: 'qwen-plus',
    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
    apiKey: process.env.DASHSCOPE_API_KEY,
})

// SaaS 产品内嵌 AI Copilot
await agent.execute('Fill in the username field with John')

方式三：Chrome 扩展（多标签页任务）

访问 [Chrome Web Store] 或 GitHub releases 下载扩展
安装后打开扩展，配置 LLM 端点
在任意标签页激活 Page-Agent，用自然语言操控

技术架构

组件	技术
语言	TypeScript
核心依赖	browser-use DOM 处理组件
包管理	npm/pnpm
LLM 接口	OpenAI 兼容（/v1/chat/completions）
部署方式	CDN / npm / Chrome 扩展

🎯 适用场景

1. SaaS 产品内嵌 AI Copilot

想象一个复杂的 ERP 系统，用户可以说「帮我把这张订单的发货地址改成上海浦东」——不需要记住操作路径，不需要在菜单里翻找，Page-Agent 直接帮用户操作。这是目前 Page-Agent 最成熟的应用场景。

2. 表单填写自动化

20 步点击变成一句话：「帮我填好这份供应商申请表，公司名填 ABC公司，联系人填张三」。适合 B2B 平台、CRM、admin 后台系统。

3. 无障碍辅助

让任何网页都能用自然语言操控，配合语音输入可以让视障用户「用嘴浏览网页」。Page-Agent 直接操作 DOM，不需要依赖网页本身的 accessibility 支持。

4. 跨标签页 AI 工作流

Chrome 扩展让 AI 同时操控多个标签页——一个标签打开竞品官网，一个标签更新内部 CMS，自动完成竞品分析和数据录入。

5. AI Agent 的「浏览器手」

通过 MCP Server，Page-Agent 成为高级 AI Agent（如 Claude）的执行终端。外部 Agent 负责规划，Page-Agent 负责操控浏览器执行。

🔍 对比/替代方案

工具	架构	操控方式	LLM	集成方式	适用场景
Page-Agent	内嵌网页	DOM 文本	BYOLLM	script/npm	SaaS Copilot
browser-use	服务端	截图+DOM	多模态	Python	通用自动化
Nanobrowser	Chrome 扩展	外部控制	多模态	扩展	跨站自动化
Puppeteer	服务端	API	无	Node.js	程序员工具
Playwright	服务端	API	无	多语言	QA/测试

Page-Agent 的核心差异：

唯一「从网页内部操控」的工具，不是从外部控制浏览器
不需要截图和多模态模型，成本和延迟都更低
集成门槛最低，一行 HTML 即可

不擅长的事：

不做代码补全（不是 Cursor/Copilot 替代品）
客户端执行，无法后台运行定时任务
跨站自动化不如 Nanobrowser 灵活

⚠️ 注意事项

1. Demo CDN 不能用于生产

README 明确写了：「Demo CDN 使用的是阿里免费测试 LLM API，仅供技术评估」。生产环境必须用自己的 API Key。

2. 不能替代代码编辑器工具

Page-Agent 控制的是网页 UI，不是代码。如果需要 AI 辅助写代码，用 Cursor/GitHub Copilot；Page-Agent 是互补工具，不是替代品。

3. 仅支持客户端执行

没有用户在场就无法运行——不能用来做后台爬虫、定时任务、无人值守自动化。这些场景还是得靠 Playwright/Puppeteer。

4. LLM 成本取决于你选什么模型

用 GPT-4o 成本高，用本地 Ollama 免费但需要自己维护。通义千问性价比不错，是国内用户的合理选择。

5. 需要目标页面 DOM 结构可读

SPA 页面如果大量使用 Web Components 或 Shadow DOM，Page-Agent 的 DOM 读取能力可能受限。

✅ 总结

Page-Agent 是浏览器自动化的新范式——不再「从外部控制浏览器」，而是「从内部操控网页」。一行 script 标签让任何网页获得 AI 操控能力，23.3k Stars 说明社区对这条路线的认可。

优点：

一行代码集成，门槛极低
DOM 文本操控，无需截图和多模态模型
BYOLLM，数据流向完全可控
MCP Server 支持，成为 AI Agent 的浏览器手
Chrome 扩展支持多标签页任务
MIT 协议，完全开源

缺点：

不支持代码补全（不是 IDE 工具）
客户端执行，无法后台运行
跨站自动化不如专门的扩展方案

推荐指数：⭐⭐⭐⭐（4/5）

适合所有需要给 Web 产品增加 AI 操控能力的开发者，以及需要用自然语言操控复杂网页的用户。传统浏览器自动化太重，Page-Agent 把这个问题简化到了一个 script 标签的级别。

GitHub 仓库：alibaba/page-agent
NPM 包：npmjs.com/package/page-agent
文档：github.com/alibaba/page-agent#readme