Page-Agent 實測：阿里開源純前端 GUI Agent，一行程式碼讓網站變身 AI 原生應用

給一個 SaaS 產品加上「AI 副駕駛」有多麻煩？傳統方案基本兩條路：要嘛重寫後端做一套 Agent 編排邏輯，要嘛裝個瀏覽器擴充功能或無頭瀏覽器在外部控制頁面。兩條路都不輕量。

阿里巴巴開源的 Page-Agent（GitHub 18.7K Star，MIT 授權）給出了第三條路：一個純頁內的 JavaScript GUI Agent，住在你的網頁裡，用自然語言操作介面。

不需要瀏覽器擴充功能、不需要 Python、不需要無頭瀏覽器——一段 <script> 引入，頁面就能聽懂自然語言指令。

Page-Agent 是什麼

Page-Agent 是阿里巴巴開源的純前端 GUI Agent，用 TypeScript 編寫，執行在瀏覽器頁面的 JavaScript 執行時中。它透過讀取頁面 DOM 的文字描述來理解介面結構，然後由 LLM 決策執行什麼操作（點擊、填寫、捲動等），最終翻譯為實際的 DOM 操作。

核心定位非常明確：用戶端 Web 增強（Client-side Web Enhancement），不是伺服器端自動化工具。它的目標使用者是產品開發者——讓你用幾行程式碼給自己的 SaaS 產品、ERP/CRM 系統、管理後台加上 AI 操作能力。

與傳統瀏覽器自動化的本質區別

市面多數網頁自動化方案走「外部控制」路線——啟動一個瀏覽器處理程序，透過 CDP 協定操作頁面。Page-Agent 完全反過來：它跑在頁面自己的 JS 執行時裡，跟你的業務程式碼同處理程序。

維度	Page-Agent	Playwright / Browser Use	Selenium
執行位置	頁面內 JS，同處理程序	外部處理程序控制瀏覽器	外部處理程序 + WebDriver
依賴	一個 <script> 標籤	Python + 瀏覽器二進位	Java/Python + 驅動程式
使用者安裝	零安裝，網頁自帶	需裝擴充功能或 Agent 用戶端	需設定驅動程式
感知方式	文字 DOM（無截圖）	截圖 + 多模態 LLM / DOM	DOM via WebDriver
模型要求	文字模型即可	多模態或文字	無需 LLM
適合場景	產品內 AI 副駕駛	跨站自動化 / RPA	E2E 測試
定位	用戶端 Web 增強	伺服器端自動化	測試框架

一句話總結：Playwright 是 QA 和資料團隊用的工具，Page-Agent 是產品開發者嵌進自己產品的能力。你不會用 Page-Agent 做迴歸測試，但你會用它讓 ERP 系統的使用者一句話填完一張複雜表單。

核心技術架構：DOM 脫水（DOM Dehydration）

Page-Agent 最聰明的設計決策是不截圖。多數 GUI Agent 靠「截圖 + 多模態 LLM 看圖操作」，但這套方案在頁內純 JS 環境根本玩不轉——截圖要走 GPU 渲染、圖像 token 成本高、延遲大、還要特殊權限。

Page-Agent 採用了一種叫**「DOM 脫水」（DOM Dehydration）**的技術：

1. 掃描 DOM：走訪頁面的 Document Object Model，識別所有可互動元素
2. 元素索引：為每個可互動元素分配一個索引號，附帶角色和標籤
3. 生成 FlatDomTree：將活體 DOM 轉換為緊湊的文字樹結構
4. LLM 決策：文字 LLM 讀取這個緊湊表示，輸出操作指令
5. 執行操作：Agent 將指令翻譯為實際的 DOM 操作

一行程式碼整合

最快體驗（免費測試 LLM）

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

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: 'zh-TW',
})

await agent.execute('點擊登入按鈕')

與主流 GUI Agent 方案全面對比

維度	Page-Agent	Browser Use	UI-TARS	Playwright MCP
開發者	阿里巴巴	社群開源	字節跳動	Microsoft
執行位置	頁面內 JS	外部 Python 處理程序	外部處理程序	外部 Node 處理程序
感知方式	文字 DOM	DOM + 可選截圖	截圖 + 多模態	DOM via CDP
模型要求	文字模型	文字或多模態	專用視覺模型	文字模型
跨頁面	需 Chrome 擴充功能	原生支援	原生支援	原生支援
整合難度	⭐ 極低	⭐⭐⭐ 中等	⭐⭐⭐⭐ 較高	⭐⭐⭐ 中等
核心場景	產品內副駕駛	通用自動化	視覺複雜任務	Agent 瀏覽器控制

總結評價

優點

✅ 零安裝整合：一行 <script> 標籤，使用者無感知 ✅ 輕量高效：純文字 DOM，無需多模態模型，成本低 ✅ 模型無關：支援任何 OpenAI 相容 API，包括本機模型 ✅ 安全可控：操作白名單、資料脫敏、知識注入 ✅ 開源免費：MIT 授權，可商用

缺點

❌ 單頁限制：跨頁面需要額外安裝 Chrome 擴充功能 ❌ 視覺資訊丟失：不適合 Canvas/WebGL 等視覺密集型頁面 ❌ 依賴 LLM：每次操作有網路延遲和 API 成本 ❌ API Key 安全：前端暴露風險，需要後端代理

誰該用，誰別用

該用：

• SaaS 開發者：給產品加 AI 副駕駛
• 企業 IT：最佳化內部系統（ERP/CRM/OA）
• 無障礙開發者：讓網頁對殘障使用者更友好

別用：

• 測試工程師：用 Playwright 更合適
• 爬蟲開發者：用 Puppeteer/Cheerio 更合適
• 跨站自動化：用 Browser Use 更合適

希望這篇部落格文章對您有所幫助！