### [Page Agent：阿里巴巴开源的“住在网页里的”GUI 智能体，一行脚本让网页自己动起来](https://www.willai.cc/article/3708)

**Published:** 2026-07-12T05:54:53

**Author:** hiyoho

**Excerpt:** 项目简介 Page Agent 是阿里巴巴开源的一个运行在网页内部的 JavaScript GUI 智能体。只需一行脚本，就能让任意网页拥有自己的 AI 代理，用自然语言直接控制 Web 界面——点击按钮、填写表单、跳转页面，全部交给 AI

![Page Agent 项目横幅](https://page-agent.github.io/assets/readme/banner-light.png)

## 项目简介

**Page Agent** 是阿里巴巴开源的一个**运行在网页内部的 JavaScript GUI 智能体**。只需一行脚本，就能让任意网页拥有自己的 AI 代理，用自然语言直接控制 Web 界面——点击按钮、填写表单、跳转页面，全部交给 AI 完成。项目当前已收获约 **2.6 万 Star**，采用 MIT 协议，主要使用 TypeScript 编写，运行时以纯前端 JavaScript 注入。

> “The GUI Agent Living in Your Webpage. One script gives any web page its own AI agent.”

## 安装要求和过程

### 环境要求

-   任意支持 `<script>` 标签或 npm 的网页环境即可；
-   **无需**浏览器扩展、Python 或无头浏览器，纯前端运行；
-   如需自托管大模型，需一个可访问的模型 API（如通义千问 Qwen、本地模型等）；
-   使用 npm 安装 / 二次构建时需要 Node.js 环境。

### 快速安装（三种方式）

**方式一：CDN 一行接入**

```
<script
    src="https://cdn.jsdelivr.net/npm/page-agent@1.12.1/dist/iife/page-agent.demo.js"
    crossorigin="anonymous"
></script>
```

国内镜像：`https://registry.npmmirror.com/page-agent/1.12.1/files/dist/iife/page-agent.demo.js`

**方式二：NPM 安装**

```
npm install page-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: 'en-US',
})

await agent.execute('Click the login button')
```

**方式三：Chrome 扩展** —— 从 Chrome 网上应用店安装 Page Agent 扩展，用于跨多标签页的多页面任务。

## 核心功能

-   **🎯 极简集成**：纯页面内 JavaScript，不需要浏览器扩展、Python 或无头浏览器，几行代码即可嵌入。
-   **📖 基于文本的 DOM 操作**：无需截图、不依赖多模态大模型或特殊权限，通过结构化 DOM 文本理解页面并执行操作。
-   **🧠 自带 LLM（BYO）**：支持绝大多数主流模型（含本地部署），模型选择完全自由。
-   **🐙 可选 Chrome 扩展**：支持跨标签页的多页面任务编排。
-   **🔌 MCP Server（Beta）**：允许外部 Agent 客户端（如 Claude Code / Cursor）从外部控制你的浏览器。

## 典型使用场景

-   **SaaS AI Copilot**：几行代码为自家产品嵌入 AI 助手，无需重写后端，立刻获得“对话式操作界面”能力。
-   **智能表单填充**：把原本需要 20 步点击的流程压缩成一句话，特别适合 ERP / CRM / 后台管理系统等高频重复操作。
-   **无障碍访问**：通过自然语言让任何 Web 应用变得可操作，配合语音 / 读屏为行动不便的用户打开大门。
-   **多页面自动化 / MCP 控制**：借助 Chrome 扩展或 MCP Server，让 AI 跨页面完成复杂工作流（如比价、数据搬运）。

## 推荐理由

我第一次看到 Page Agent 时最直接的感受是：**它把“浏览器自动化”这件事做得太轻了**。传统方案（如 Playwright / Puppeteer 脚本、或无头浏览器方案）要么要写一堆选择器、要么要吃截图走多模态，门槛和成本都不低。Page Agent 反其道而行——它就活在页面里，用文本化的 DOM 理解来“读懂”界面，再用自然语言驱动操作，心智负担几乎为零。

对前端 / 产品同学尤其友好：你想给后台加个“AI 帮我导这份报表”的入口，挂一段脚本就行，不用动架构。再加上它支持 BYO 模型、可接本地大模型，**数据不出内网也能玩**。如果你正琢磨怎么给产品接一个“会自己点页面”的 AI，Page Agent 是目前最省心、最贴近生产的选择之一。

## 下载地址

-   GitHub 仓库：[github.com/alibaba/page-agent](https://github.com/alibaba/page-agent)
-   npm 包：[npmjs.com/package/page-agent](https://www.npmjs.com/package/page-agent)
-   在线 Demo：[alibaba.github.io/page-agent](https://alibaba.github.io/page-agent/)
-   官方文档：[alibaba.github.io/page-agent/docs](https://alibaba.github.io/page-agent/docs/introduction/overview)
-   Chrome 扩展：[Chrome 网上应用店](https://chromewebstore.google.com/detail/page-agent-ext/akldabonmimlicnjlflnapfeklbfemhj)

**Tags:** AI, AI Agent, AI开源项目, AI编程, Alibaba, Chrome, GUI Agent, JavaScript, MCP, MIT许可

**Categories:** 开源项目

---