教程 04 — 瀏覽器自動化：讓 AI 幫你操控網頁

目標：使用 OpenClaw 內建的瀏覽器工具，讓 AI 自動瀏覽網頁、截圖、提取資訊、填寫表單。

原理

OpenClaw 整合了一個專用的 Chrome/Chromium 實例，AI 可以通過工具調用來：

• 導航到指定 URL
• 截圖並分析頁面
• 點擊元素、填寫表單
• 提取結構化資料

你的指令 → AI → browser_navigate / browser_action → Chrome → 截圖/結果 → AI 分析 → 回覆

前置條件

確保 Chrome 或 Chromium 已安裝：

# macOS
brew install --cask google-chrome
 
# 或者使用 Chromium
brew install --cask chromium

基礎用法：讓 AI 抓取網頁資訊

在 WebChat 或 Telegram 中直接描述任務：

示例 1：查看天氣

幫我打開 https://wttr.in/Shanghai 截圖，告訴我上海今天天氣

示例 2：抓取 GitHub 倉庫資訊

幫我打開 https://github.com/trending，列出今天 GitHub 上最熱門的 5 個專案，包括語言和 star 數

示例 3：讀取線上文件

打開 https://docs.python.org/3/library/asyncio.html，給我總結 asyncio 最常用的 5 個函數

進階：表單自動填寫

幫我打開 https://httpbin.org/forms/post
填寫以下資訊：
- custname: 張三
- custtel: 13800138000
- custemail: zhangsan@example.com
- comments: 這是一個測試訂單

然後截圖給我看結果

進階：批量資料提取

結合自定義 Skill，建立一個資料採集技能：

~/.openclaw/workspace/skills/數據採集/SKILL.md:

# 網頁資料採集專家
 
使用者會提供一個網址和需要提取的資料欄位。你需要：
 
1. 使用 browser_navigate 打開頁面
2. 使用 browser_snapshot 取得頁面內容
3. 按使用者要求提取結構化資料
4. 以 JSON 或 Markdown 表格格式輸出
 
注意：
- 如果頁面需要滾動，分多次截圖
- 如果有分頁，詢問使用者是否需要翻頁採集
- 遇到登入牆時告知使用者

使用：

/數據採集

網址：https://news.ycombinator.com
需要提取：標題、連結、分數、評論數（前 10 條）

進階：監控網頁變化

結合 Cron 定時任務（需配置 cron 頻道），可以定期檢查網頁：

{
  "channels": {
    "cron": {
      "enabled": true,
      "jobs": [
        {
          "cron": "0 9 * * 1-5",
          "message": "打開 https://github.com/trending 截圖，總結今日熱門專案並發給我",
          "channel": "telegram"
        }
      ]
    }
  }
}

這樣每個工作日早上 9 點，AI 會自動爬取 GitHub Trending 並通過 Telegram 發給你。

工具一覽

AI 在瀏覽器任務中可以使用的工具：

注意事項

• 瀏覽器工具在沙盒模式下運行，不會影響你日常使用的瀏覽器
• 不要用於登入涉及敏感帳號的網站（AI 會看到截圖內容）
• 複雜 SPA 頁面（如 React/Vue 應用）可能需要等待載入，可以在指令裡說明

常見問題

需要額外安裝 ChromeDriver 或 Selenium 嗎？

不需要。OpenClaw 使用 Playwright 內核直接控制 Chrome/Chromium，無需手動安裝 ChromeDriver。你只需確保 Chrome 或 Chromium 已安裝在系統中即可，其他都由 OpenClaw 自動處理。

瀏覽器任務失敗了怎麼調試？

在指令中加上「截圖給我看」，AI 會在關鍵步驟截圖彙報進度，方便你判斷卡在哪裡。也可以查看網關日誌：tail -f /tmp/openclaw/openclaw-$(date +%Y-%m-%d).log | grep browser，查看詳細的工具調用記錄。

能訪問需要登入的網站嗎？

可以，但需要注意安全：AI 會看到頁面截圖中的所有內容，包括帳號密碼輸入框和隱私資料。建議只在自己控制的網站上做登入自動化，不要用於銀行、支付等敏感帳號。

能處理 React/Vue 等動態載入的 SPA 頁面嗎？

可以，但需要在指令中說明等待時機，例如：「打開頁面後等待 3 秒再截圖」，或「等到頁面載入完成再提取資料」。AI 會使用 browser_action 執行等待操作。對於需要滾動載入的頁面，可以告訴 AI 「向下滾動 3 次後截圖」。

瀏覽器自動化會影響我正在用的 Chrome 嗎？

不會。OpenClaw 啟動的是一個獨立的 Chromium 實例（無頭模式），和你日常使用的瀏覽器完全隔離，Cookie、帳號狀態互不影響。

下一步

• 教程 05 — 配置多個模型，Claude 貴了自動切 MiniMax