阿里巴巴發佈Page Agent：一款通過DOM用自然語言控制網頁界面的JavaScript頁面內GUI代理

大多數瀏覽器自動化工具都是從外部運行的。Playwright、Puppeteer、Selenium和browser-use都通過外部進程驅動瀏覽器，它們通過截圖或Chrome DevTools協議來讀取頁面。

阿里巴巴的Page Agent採取了相反的路徑。該代理作為純JavaScript代碼存在於網頁內部。它讀取實時的DOM文本，並像真實用户一樣操作。無需無頭瀏覽器、無需截圖、無需多模態模型。

該項目採用MIT許可證開源。代碼庫以TypeScript為首選語言。它構建在browser-use的基礎上，其DOM處理和提示詞也源自該項目。

簡明總結

• Page Agent在頁面內部作為JavaScript運行，讀取實時DOM文本而非截圖。
• DOM脱水將頁面壓縮為FlatDomTree，使得較小的文本模型也能精確操作。
• 模型無關，可通過任何兼容OpenAI的端點使用，並以MIT許可證發佈。
• 提示詞級別的安全性和單頁面範圍是實際限制；對於風險操作請保留服務端驗證。
• 最佳適用場景：自有應用內的智能助手和表單填寫，不適用於外部或受限網站。

什麼是Page Agent？

Page Agent是一個客户端庫，用於為Web應用添加代理行為。你將嵌入它，然後通過自然語言發出命令。代理會從頁面內部查找元素、點擊按鈕和填寫表單。

由於它在瀏覽器會話中運行，因此繼承了用户的Cookie、會話和身份驗證。無需編寫單獨的後端。現有的UI驗證和安全規則保持不變。

設計是模型無關的。你可以通過任何兼容OpenAI的端點使用自己的大型語言模型。只有文本會被髮送給模型，因此一個強大的文本模型就足夠了。

DOM脱水的工作原理

核心技術被稱為DOM脱水。一個現代頁面可能包含數千個節點。將原始HTML發送給模型會很慢且昂貴。

當命令到達時，代理掃描文檔對象模型（DOM）。它識別出每一個交互元素，例如按鈕、鏈接和輸入字段。每個元素都會獲得一個索引以及角色和標籤。

實時DOM被轉換為FlatDomTree——一個關於重要元素的乾淨文本映射。冗餘標記被剝離。模型讀取這個緊湊的表示形式，而不是像素。

本頁上的交互式演示直觀地展示了這一過程。當命令運行時，可以觀察到“Dehydrated DOM”和“Action trace”面板的更新。

在底層，代理將工作委託給PageController：

await this.pageController.updateTree()
await this.pageController.clickElement(index)
await this.pageController.inputText(index, text)
await this.pageController.scroll({ down: true, numPages: 1 })

單體倉庫將這些關注點拆分為小型包。@page-agent/core包含無頭代理邏輯，page-agent是包含UI面板的完整入口類，@page-agent/page-controller處理DOM提取和元素索引，並通過SimulatorMask提供可選的視覺反饋。

開發者可以控制範圍。操作允許列表限制了代理可以運行的操作。數據掩碼可以隱藏敏感字段（如密碼）不被模型看到。可以注入自定義知識，使代理遵循你的領域規則。

對比

| 方法 | 運行位置 | 通過什麼讀取頁面 | 設置 | 最佳適用場景 | | --- | --- | --- | --- | --- | | Page Agent | 頁面內部（客户端JS） | 脱水的文本DOM | 一個script標籤或npm | 自有應用內的智能助手 | | Selenium / Playwright / Puppeteer | 外部進程 | 通過驅動（WebDriver/CDP）的DOM | 驅動加運行時或服務器 | 腳本化的端到端測試 | | browser-use | 外部進程 | DOM加可選視覺 | Python加瀏覽器 | 自主多站點代理 | | WebMCP | 服務端工具 | 結構化函數調用 | 需要標準化採用 | 原生代理工具訪問 |

關鍵在於範圍而非速度。Page Agent適用於你可以控制並添加代碼的產品。對於跨站抓取和受限環境，外部驅動仍然更勝一籌。

用例及示例

• SaaS AI智能助手：提供一個能操作產品的助手，而非僅僅提供指令。支持機器人可以替用户執行步驟，而不是描述它們。
• 智能表單填寫：將多步驟的ERP或CRM表單摺疊成一條指令。用户輸入“提交一筆50美元的午餐差旅費”，代理處理導航和數據輸入。
• 無障礙訪問：與Web Speech API配合實現語音控制。任何Web應用都可以通過自然語言訪問，並附帶屏幕閲讀器友好的通知。
• 遺留應用現代化：可以包裹一個沒有API的遺留內部工具。無需修改原有代碼即可添加一個命令欄。

快速開始

用於評估時，一個script標籤即可加載帶有免費測試LLM的Page Agent。

<script src="https://cdn.jsdelivr.net/npm/page-agent/dist/page-agent.umd.js"></script>
<script>
  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');
</script>

該演示端點僅用於技術評估。生產環境需要你自己的模型憑證。

對於構建，安裝包並配置端點：

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')

model和baseURL字段接受任何兼容OpenAI的提供商。切換模型基本上只需更改baseURL和密鑰。

注意：傳遞給new PageAgent的密鑰會包含在你的客户端包中。對於生產環境，應通過你自己的後端代理請求。代理還可以在運行每個關鍵操作前顯示審批提示。

優點與侷限

• 強大的集成能力：只需幾行代碼即可部署一個智能助手。無需重寫後端，也無需分發擴展。
• 較低的模型成本：由於只傳輸文本，避免了多模態模型及其高昂費用。精確性來自對結構的讀取，而非從像素中猜測。
• 基於提示的安全性有限：像“永遠不要自動提交支付表單”這樣的規則存在於系統提示中。它們是説服性的指導，而非硬性保證。對於敏感或破壞性操作，請保留服務端驗證。提示指令不應是唯一的控制手段。
• 單頁面聚焦：核心庫僅針對單一視圖內的交互。它無法自行跨標籤頁或窗口移動。多頁面自動化需要可選的Chrome擴展，這需要額外安裝和權限。還有一個Beta MCP服務器，允許外部代理（如Claude Desktop或Copilot）驅動它。

查看GitHub倉庫。另外，可以關注Twitter，加入150k+的ML SubReddit，訂閲我們的Newsletter。Telegram用户現在也可以加入我們。

如需合作推廣你的GitHub倉庫、Hugging Face頁面、產品發佈或網絡研討會等，請聯繫我們。

本文首發於MarkTechPost。