[Open Source] **Page Agent 即將來臨，輕鬆上手 AI 網頁助手倒數！**

讓網頁聽你指揮！Page Agent：你的網頁AI小幫手，初學者也能輕鬆上手！

嘿，各位台灣的網頁愛好者們！今天我們要介紹一個超酷的工具，叫做 Page Agent。想像一下，你可以用自然語言（就像平常跟人聊天一樣）來控制網頁，讓它幫你完成各種任務，例如填寫表格、點擊按鈕，甚至是自動化複雜的工作流程！是不是很神奇？

這篇文章將帶你深入了解 Page Agent，從它的核心概念、如何快速上手，到實際應用案例，以及我個人在使用上的經驗分享。無論你是程式新手，還是想提升工作效率的老手，都能從中找到樂趣和價值！

什麼是 Page Agent？ 它能幹嘛？

簡單來說，Page Agent 就像一個住在你網頁裡面的AI小幫手。 你可以用文字指令來告訴它要做什麼，而它就會幫你操作網頁，就像你親手操作一樣。

它能做的事情非常廣泛，例如：

• 自動填寫表格： 想像一下，每次要填寫報名表單時，Page Agent 都能幫你自動輸入資料，省下你寶貴的時間！
• 點擊按鈕和連結： 想快速瀏覽網頁內容？Page Agent 可以幫你點擊導航，讓你輕鬆找到所需資訊。
• 自動化複雜流程： 不管是訂票、訂房，或是管理客戶資料，Page Agent 都能將多步驟的流程自動化，提高工作效率。
• 讓網站更易於使用： 對於身障人士，Page Agent 可以讓他們透過語音指令操作網頁，打破資訊獲取的障礙。

總之，Page Agent 的核心功能就是透過自然語言，讓你更容易、更有效率地與網頁互動。

Page Agent 的獨特之處：為何值得一試？

市面上也有其他類似的工具，但 Page Agent 有一些特別的優點：

• 易於整合，不需要瀏覽器擴充功能： Page Agent 只需要在你的網頁中加入一段 JavaScript 程式碼，不需要額外的瀏覽器擴充功能或複雜的設定。
• 純文字操作DOM： Page Agent 不像某些工具需要擷取螢幕截圖，而是直接操作網頁的 DOM (Document Object Model)，也就是網頁的結構。 這樣的好處是，它更輕量、更快速，也更穩定。
• 彈性選擇AI模型： 你可以選擇自己喜歡的 LLM (大型語言模型) 來驅動 Page Agent，例如 OpenAI 的 GPT 系列，或是阿里雲的通義千問。
• 可選的 Chrome 擴充功能： 針對需要跨多個頁面的任務，Page Agent 提供了 Chrome 擴充功能，讓你的 AI 助手可以更廣泛地執行任務。

快速入門：如何使用 Page Agent？

現在，讓我們來看看如何開始使用 Page Agent。

1. 快速整合（使用官方提供的免費Demo）

這是最簡單的入門方式，只需要在你的網頁中加入一行程式碼即可。

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

請注意： 這個方法使用了官方提供的免費 Demo LLM，僅供測試和評估。 使用此 API 即表示您同意其 條款。

2. NPM 安裝 (進階)

如果你想更深入地控制 Page Agent，或是使用自己的 API Key，那麼你需要使用 NPM (Node Package Manager) 來安裝 Page Agent。

• 安裝：

  在你的專案資料夾中，打開終端機 (Terminal) 或命令提示字元 (Command Prompt)，輸入以下指令：

  npm install page-agent
  

• 引入並使用：

  在你的 JavaScript 程式碼中，引入 Page Agent 並創建一個新的實例：

  import { PageAgent } from 'page-agent';
  
  const agent = new PageAgent({
      model: 'qwen3.5-plus',  // 選擇你想要使用的 LLM
      baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', // 阿里雲 API 的 base URL
      apiKey: 'YOUR_API_KEY', // 你的 API Key
      language: 'zh-TW', // 設置語言為繁體中文
  });
  

  請注意： 你需要將 YOUR_API_KEY 替換成你自己的 API Key。

• 執行指令：

  使用 agent.execute() 方法來告訴 Page Agent 做什麼：

  await agent.execute('點擊登入按鈕'); // 用中文指令
  

實際應用：初學者範例

為了讓你更容易理解，我們來舉個簡單的例子。 假設你想要自動化一個簡單的網頁表單，這個表單有三個欄位：姓名、Email 和訊息。

HTML 表單 (範例):

<form id="myForm">
  <label for="name">姓名:</label><br>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>
  <label for="message">訊息:</label><br>
  <textarea id="message" name="message"></textarea><br><br>
  <button type="button" onclick="submitForm()">提交</button>
</form>

JavaScript程式碼:

import { PageAgent } from 'page-agent';

async function autoFillForm() {
    const agent = new PageAgent({
        model: 'qwen3.5-plus', // 你的 LLM
        baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
        apiKey: 'YOUR_API_KEY', // 你的 API Key
        language: 'zh-TW',
    });

    await agent.execute('在姓名欄位填入 "王小明"');
    await agent.execute('在 Email 欄位填入 "xiaoming.wang@example.com"');
    await agent.execute('在訊息欄位填入 "您好，這是一個測試訊息！"');
    await agent.execute('點擊提交按鈕');
}

// 在網頁載入後執行
window.onload = function() {
    autoFillForm();
};

這個例子中，我們做了幾件事：

1. 引入了 page-agent 模組。
2. 創建了一個 PageAgent 的實例，並設定了 LLM、API Key 和語言。
3. 使用 agent.execute() 方法，告訴 Page Agent 填寫表單欄位，並點擊提交按鈕。
4. 將 autoFillForm() 函數在頁面載入後執行。

執行結果： 當你的網頁載入後，Page Agent 就會自動填寫表單，並提交資料。 整個過程就像你親手操作一樣！

錯誤排除指南：常見問題與解決方案

在使用 Page Agent 的過程中，你可能會遇到一些問題。以下是一些常見問題和解決方案：

• 問題一： 網頁沒有反應，或是指令無法執行
  • 可能原因：
    • API Key 錯誤。
    • LLM 設定錯誤。
    • 網頁元素（例如按鈕）的選擇器有誤。
  • 解決方案：
    • 檢查你的 API Key 是否正確，並且確保你有足夠的額度。
    • 檢查你選擇的 LLM 是否可用，並且確認 baseURL 和其他相關設定正確。
    • 使用瀏覽器的開發者工具（通常按 F12 打開）來檢查是否有錯誤訊息。 檢查網頁元素的 ID、class 或其他屬性，確保你的指令可以正確地找到它們。
    • 嘗試使用更明確的指令，例如 “點擊 ID 為 ‘loginButton’ 的按鈕”。
• 問題二： 網頁出現 CORS 錯誤
  • 可能原因：
    • 你的網頁嘗試訪問其他網域的資源，但伺服器沒有允許 CORS (Cross-Origin Resource Sharing) 請求。
  • 解決方案：
    • 如果你控制著伺服器，可以設定 CORS 標頭來允許你的網頁訪問。
    • 如果無法修改伺服器，可以嘗試使用代理伺服器或後端伺服器來處理請求。
• 問題三： Page Agent 無法找到網頁元素
  • 可能原因：
    • 網頁元素可能使用了動態 ID 或 class，導致 Page Agent 無法準確定位。
    • 頁面載入速度慢，Page Agent 在元素尚未載入完成時就開始執行指令。
  • 解決方案：
    • 盡量使用穩定的選擇器，例如唯一的 ID。
    • 可以使用 agent.waitForElement() 方法，等待特定元素出現後再執行其他指令。
    • 增加指令之間的延遲時間，讓 Page Agent 有時間處理頁面。

個人實作心得與進階技巧

我在使用 Page Agent 的過程中，也積累了一些經驗：

• 善用開發者工具： 瀏覽器的開發者工具是你的好幫手。 可以用來檢查網頁的結構、元素選擇器，以及錯誤訊息。
• 指令越明確越好： 盡量使用明確的指令，避免模糊不清的表達方式。 例如，與其說 “點擊按鈕”，不如說 “點擊 ID 為 ‘submitButton’ 的按鈕”。
• 利用 waitForElement() 方法： 這個方法可以確保你的指令在網頁元素出現後才執行，避免因為頁面載入速度問題而導致錯誤。
• 建立函式庫： 如果你需要經常使用 Page Agent，可以將常用的指令和操作封裝成函式，方便重複使用，並提高程式碼的可維護性。
• 多加練習： 熟能生巧！ 透過不斷的嘗試和練習，你會越來越熟悉 Page Agent，也能更有效地利用它來完成任務。
• 探索 Chrome 擴充功能： 對於需要跨多個頁面的任務，可以考慮使用 Chrome 擴充功能，擴展 Page Agent 的能力。

結論：Page Agent 的未來與你的想像力

Page Agent 是一個功能強大、易於使用的工具，可以讓你在網頁自動化的世界裡如魚得水。 無論你是程式新手，還是經驗豐富的開發者，都可以透過 Page Agent 提升工作效率，並探索更多可能性。

Page Agent 的未來充滿潛力。 隨著 AI 技術的不斷發展，我們可以期待 Page Agent 能夠支援更多功能，並更智能地與網頁互動。 只要你敢於想像，就能利用 Page Agent 創造出令人驚豔的應用！

現在就開始嘗試吧！ 按照上面的步驟，開始體驗 Page Agent 的魅力，讓你的網頁聽你指揮，一起擁抱更有效率、更便捷的數位生活！

如果你有任何問題或心得，歡迎在下方留言區分享！ 也別忘了幫這篇文章點個讚，分享給更多朋友！

參考閱讀

https://github.com/alibaba/page-agent

About the Author

n8n n8n

Administrator

View All Posts