开源推荐

其他

一行JS代码，让网页变成AI Agent！阿里这个开源项目彻底颠覆了GUI自动化

发表于 2026年04月08日阅读 18 评论 0

大家好，我是何三，独立开发者

最近做 AI Agent 的项目越来越多，各种浏览器自动化工具也卷得飞起。什么 Playwright、Puppeteer、browser-use，搞一套下来光是环境配置就能劝退半个团队。

但前阵子上 HN 首页看到一个阿里开源的项目，直接把"浏览器自动化"这件事给颠覆了——Page Agent。

这个项目的思路很清奇：它不是在你电脑上跑一个独立的 Agent 去控制浏览器，而是把 Agent 直接塞进你的网页里面。对，你没听错，一个纯 JS 库，npm install 完就能让你的 Web 应用拥有 AI 操作能力。

HN 上 147 个赞，76 条讨论，热度相当可以。

先说槽点

在聊 Page Agent 之前，得先吐槽一下现在 GUI Agent 领域的几个老毛病：

1. 搭建环境是个噩梦

你要跑个 browser-use？先装 Python，再装 Playwright，再装一堆浏览器依赖，中间如果版本不兼容还能卡你半天。对于前端开发者来说，这体验简直窒息。

2. 多模态模型又贵又慢

主流 GUI Agent 方案都是"截图 → 发给视觉模型识别 → 返回操作指令"。GPT-4o 那个 token 费用，跑几轮对话钱包就瘪了。而且延迟高得离谱，用户等半天看到 Agent 在屏幕上慢慢挪。

3. 登录态继承是个玄学

外部 Agent 控制浏览器时，怎么处理用户的登录态？Cookie、Token 各种状态管理，稍有不慎就给你踢出来重新登录。

4. SPA 页面经常翻车

单页应用的大量动态渲染、虚拟滚动、懒加载，传统方案经常对着空气点。

Page Agent 恰好瞄准了这些痛点。

Page Agent 是什么

对比图

简单说，Page Agent 是一个运行在浏览器端的 GUI Agent 库，用 TypeScript 写的，MIT 协议开源。

它做了几件很关键的事：

第一，它住在你的网页里。 不需要浏览器插件，不需要 Python，不需要无头浏览器。就一行 JS 代码，Agent 就在你的页面上"活"了过来。

第二，它用文本化 DOM 而不是截图。 这可能是它最大的创新点。它遍历当前页面的 DOM 树，把可交互元素提取成一段精简的文本描述，然后发给 LLM。不需要多模态模型，普通的文本 LLM 就能搞定。

第三，天然继承用户登录态。 因为它本身就是页面上运行的代码，用户已经登录了，它自然也就有了所有权限。不需要折腾 Cookie 同步。

第四，支持自选 LLM。 你可以用阿里通义千问、OpenAI、Gemini，任何兼容 OpenAI API 格式的模型都行。

核心原理

工作原理

Page Agent 的思路和 browser-use 类似，但执行环境完全不同。browser-use 是在服务端用 Python 控制 Playwright 去"远程操作"浏览器，而 Page Agent 直接住在浏览器里面。

它的工作流大致是这样的：

1. 接收自然语言指令

用户说"点击登录按钮，输入用户名 admin"，Agent 收到指令。

2. DOM 文本化

Agent 遍历当前页面的 DOM 树，提取所有可交互的元素（按钮、输入框、链接等），给它们编号，生成一段精简的文本表示。比如：

[1] button "登录"
[2] input "用户名" 
[3] input "密码"
[4] link "忘记密码"

这一步不需要截图，不需要 OCR，纯 DOM 操作，速度极快。

3. LLM 推理

把文本化后的 DOM 信息和用户指令一起发给 LLM，LLM 返回一个操作序列：click([1]) → type([2], "admin") → type([3], "***") → click([1])。

4. 执行操作

Agent 在页面上模拟对应的 DOM 事件，执行点击、输入、滚动等操作。

然后重复 2-4 步，直到任务完成。

整个过程的关键在于：它不需要"看"你的页面，它直接"读"你的页面。 这省掉了多模态模型的调用，成本和延迟都降了一个量级。

快速上手

体验 Page Agent 最快的方式是一行 script 标签：

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

加上这行代码，你的页面右下角就会出现一个对话框，你可以直接用自然语言操控页面。

不过这个 Demo 版用的是项目方提供的免费测试 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: 'YOUR_API_KEY',
    language: 'zh-CN',
})

// 执行一句自然语言指令
await agent.execute('点击登录按钮')

就这么简单。3 行配置，1 行执行。

如果你想接入 OpenAI：

const agent = new PageAgent({
    model: 'gpt-4o-mini',
    baseURL: 'https://api.openai.com/v1',
    apiKey: 'YOUR_OPENAI_KEY',
    language: 'zh-CN',
})

await agent.execute('在搜索框输入"Page Agent"并回车')

任何兼容 OpenAI API 格式的模型都能用。

实际应用场景

Page Agent 作者在文档里列了几个很有想象力的场景，我觉得确实有搞头：

SaaS AI Copilot

给产品加个 AI 副驾驶，用户说一句话就能完成复杂操作。比如"帮我把这个项目的截止日期改成下周五"，Agent 自动找到对应的日期选择器、点击、修改、保存。对产品经理来说简直是需求福音——不用等开发排期加"快捷操作"功能了。

智能表单填写

ERP、CRM、管理后台那些动辄 20 多个字段的表单，用户操作起来头都大了。有了 Page Agent，"把张三的信息填到这个表单里"一句话搞定。这场景我觉得落地价值非常大，企业内部的表单录入场景简直是天然靶场。

无障碍增强

用自然语言操作任何网页，对视障用户或者不熟悉界面的用户来说，这可能是真正的游戏规则改变者。语音说一句"打开设置，把语言切换成英文"，比摸索界面快多了。

跨页面任务

这个比较进阶，需要配合 Page Agent 的 Chrome 扩展。Agent 在你的页面上运行，但通过扩展桥接，可以打开新标签页、在不同网站间跳转操作。比如"去 GitHub 上搜索 page-agent，把 star 数截图发到我的邮箱"——这种跨站任务理论上也能搞定。

跟 browser-use 有啥区别

Page Agent 的作者很诚实，直接在 README 里说项目基于 browser-use 的 DOM 处理思路。但两者的设计哲学截然不同：

维度	browser-use	Page Agent
运行环境	服务端 Python	浏览器端 JS
依赖	Python + Playwright	无（纯 JS）
模型需求	多模态（截图）	文本模型即可
登录态	需要额外处理	天然继承
适用场景	批量自动化	增强用户体验