阿里巴巴釋出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。