这次我们来看一个阿里开源的前端 AI 代理项目 Page Agent。它不是一个需要本地部署、消耗显存的 AI 模型，而是一个纯前端的 JavaScript 库，核心目标是让你能用自然语言直接控制网页界面。简单来说，你可以在自己的网页里嵌入一段脚本，用户就能通过聊天框或语音指令，让 AI 自动完成点击、输入、导航等操作，而无需后端重写或复杂的浏览器扩展。这个项目的亮点非常直接：零后端依赖、纯前端集成、支持自带大模型。它不需要你部署 Python 服务、启动无头浏览器，或者要求用户安装 Chrome 插件。所有操作都发生在用户自己的浏览器页面里，通过解析 DOM 和调用大模型 API 来实现。对于开发者而言，这意味着可以快速为 SaaS 产品、内部管理系统或任何 Web 应用添加一个“AI 副驾驶”功能，将复杂的多步点击流程简化为一句话指令。从技术实现看，Page Agent 避开了对多模态大模型（需要截图分析）的依赖，采用纯文本的 DOM 操作，这降低了实现门槛和成本。它提供了两种使用方式：最简单的是通过 CDN 引入一个脚本标签；另一种是通过 NPM 安装，进行更灵活的编程式集成。项目还处于活跃开发中，最新版本是 v1.10.0，在 GitHub 上已经获得了超过 21k 的 Star，社区热度很高。本文将带你快速了解 Page Agent 的核心能力、适用场景，并重点演示两种集成方式：从最简单的 CDN 一键体验，到完整的 NPM 项目集成。我们会测试智能表单填写、页面导航等核心功能，并探讨其 API 调用、扩展能力（如 Chrome 插件和 MCP 服务器）以及在实际开发中需要注意的边界和问题。如果你正在寻找一种轻量、前端优先的方案来为你的 Web 应用注入 AI 自动化能力，这篇文章值得一看。1. 核心能力速览在深入代码之前，我们先通过一个表格快速了解 Page Agent 的关键特性，这有助于判断它是否适合你的项目。能力项说明项目类型前端 JavaScript AI 代理库开源团队阿里巴巴 (Alibaba)核心功能通过自然语言控制网页 GUI（点击、输入、导航、表单填写）运行环境现代浏览器 (Chrome, Edge, Firefox, Safari 等)硬件门槛无特定要求，依赖用户浏览器性能和所连接的大模型 API 速度启动/集成方式1. CDN 脚本引入 (最快体验)2. NPM 包安装 (项目集成)是否支持 API是，提供完整的 JavaScript API 供程序化调用是否支持批量任务支持，可通过编程方式串联多个execute指令实现是否需要后端服务否，所有逻辑在浏览器端执行是否需要浏览器插件否（基础功能），但提供可选 Chrome 扩展用于多页面任务大模型依赖支持自带 LLM API (如通义千问、OpenAI 兼容接口)主要应用场景SaaS AI 副驾驶、智能表单填写、提升 Web 应用可访问性、多页面自动化从表格可以看出，Page Agent 最大的优势在于其轻量化和前端原生的特性。它不关心你的服务器配置，不消耗你的 GPU 显存，其“资源占用”完全取决于用户使用的 LLM API 的响应速度和前端页面的复杂度。对于开发者，集成成本极低；对于最终用户，无需安装任何额外软件。2. 适用场景与使用边界理解一个工具适合做什么、不适合做什么，比盲目尝试更重要。适合谁？能解决什么问题？SaaS 产品开发者：希望为自己的 Web 应用快速添加一个内嵌的 AI 助手，帮助用户完成产品内的操作，无需引导用户安装插件或离开当前页面。企业内部工具/管理系统开发者：面对 ERP、CRM、OA 等具有复杂表单和流程的系统，可以通过 Page Agent 让员工用自然语言快速完成数据录入、查询或审批流程，极大提升效率。无障碍功能开发者：Page Agent 的天然语言交互特性，可以作为一种强大的辅助功能，让视障用户或行动不便的用户通过语音命令控制 Web 应用。自动化测试工程师：可以将其作为一种补充工具，用于生成或执行基于自然语言描述的端到端（E2E）测试用例原型。不适合什么场景？复杂的跨域或跨应用操作：虽然提供了 Chrome 扩展来扩展多页面能力，但其核心设计仍是“单页内”代理。对于需要联动多个独立域名应用或桌面软件的任务，并非最佳选择。高安全要求的自动化：由于操作发生在客户端，且依赖外部 LLM API 解析指令，绝对不适用于涉及敏感数据（如密码、支付信息）的自动填充或操作。开发者必须谨慎设计指令范围，避免暴露敏感字段。完全离线的环境：Page Agent 需要调用 LLM API 来理解自然语言指令。在没有网络或无法连接指定 API 的环境下无法工作。替代专业的 RPA 工具：对于需要高度稳定、可靠、且流程固定的企业级机器人流程自动化（RPA），Page Agent 更偏向于一种“智能增强”而非“完全替代”。版权、隐私与安全边界模型合规性：当你“自带 LLM”时，需确保所使用的 LLM API 服务条款允许此类自动化调用，并遵守其使用政策。用户隐私：Page Agent 会向 LLM 发送当前页面的 DOM 结构（经处理）和用户指令以生成操作。务必向用户明确告知，并获得同意。避免在包含用户个人隐私信息的页面上默认启用。操作安全：必须在代码中设定明确的边界，防止 AI 执行危险操作，例如未经确认的提交、删除重要数据、导航至外部恶意链接等。建议在关键操作前增加用户确认步骤。授权与版权：确保你拥有在目标网页上集成和运行此脚本的权限。在第三方网站上未经授权使用此类自动化工具可能违反其服务条款。3. 环境准备与前置条件开始集成 Page Agent 前，你需要准备好以下环境。由于它是前端库，条件相对简单。现代浏览器：Chrome/Edge 90+、Firefox 88+、Safari 15+ 等支持 ES6 模块和较新 Web API