为什么传统 Web 自动化这么难？
如果你用过 Selenium、Playwright，或者最近流行的 browser-use，一定遇到过这些头疼的问题：
- 环境太重：得装 Python、headless 浏览器、各种依赖，部署复杂，维护成本高；
- 依赖截图 + OCR：很多方案靠多模态模型"看图操作"，慢、贵、还不准；
- 权限门槛高：要控制浏览器，往往需要特殊权限甚至操作系统级别的访问；
- 对现有产品改造成本大：想给自己的 SaaS 产品加个 AI Copilot？对不起，可能要重写后端。
这些问题的根源在于：传统 Web 自动化思路是"从外面控制浏览器"，就像隔着玻璃操作键盘，自然别扭。
阿里巴巴开源的 PageAgent，换了一个思路：让 AI Agent 直接住进网页里面。
核心思路：让 Agent 住进页面
PageAgent（GitHub: alibaba/page-agent）是一个纯前端的 JavaScript GUI 智能体框架。
它的核心理念很简单：
The GUI Agent Living in Your Webpage（住在你网页里的 GUI 智能体）
它能做什么？
用自然语言控制网页界面。你告诉它"点击登录按钮"、"把表单里的公司名改成阿里巴巴"、"帮我找到最近的订单并导出"，它就真的去做。
它有多轻量？
- ✅ 纯 JavaScript，直接嵌入页面
- ✅ 不需要浏览器扩展（有可选插件用于多 Tab 场景）
- ✅ 不需要 Python / headless 浏览器
- ✅ 不需要截图，不需要 OCR，不需要多模态大模型
- ✅ 不需要特殊权限
它通过直接读取和操作页面 DOM 来理解和控制界面，把清理后的 DOM 结构发给 LLM，由 LLM 决策操作步骤，再由 PageAgent 执行。整个过程全在浏览器里完成。
典型应用场景：
- SaaS AI Copilot：几行代码给你的产品加上 AI 副驾，不用改后端
- 智能表单填写：把原本要点 20 下的操作，变成一句话
- 无障碍访问：让任何 Web 应用都能通过自然语言、语音操控
- ERP / CRM 系统提效：这类系统交互复杂，PageAgent 特别适合
架构设计：它是怎么工作的？
PageAgent 是一个组织清晰的 monorepo，核心模块分工明确：
packages/
├── core/ # 核心 Agent 逻辑（无 UI）
├── page-agent/ # 带内置 UI 面板的主入口
├── page-controller/# DOM 操作层（独立于 LLM）
├── ui/ # 面板 UI（与 Agent 解耦）
├── llms/ # LLM 客户端适配层
└── extension/ # Chrome 扩展（多 Tab 支持，WIP）
工作流程大致如下：
- 用户输入自然语言指令（如"帮我搜索最新订单"）
- PageAgent 清理当前页面 DOM，提取语义化结构
- 将简化的 DOM + 指令发送给 LLM（支持 Qwen、OpenAI 等）
- LLM 返回操作步骤（点击哪个元素、输入什么内容）
- page-controller 执行具体 DOM 操作
- 循环直到任务完成
关键亮点：不依赖截图
绝大多数竞品（包括 browser-use 的原始方案）要截图发给视觉模型识别。PageAgent 直接用 DOM 结构，这意味着：
