用 OpenClaw 實現瀏覽器自動化
用 OpenClaw 實現 AI 驅動的瀏覽器自動化：網頁擷取、表單填寫、截圖採集、資料擷取和多步驟 Web 工作流，用自然語言描述即可執行。
最後更新: 2026-03-31
你將建置什麼
一套瀏覽器自動化能力，讓 OpenClaw 能夠：
- 瀏覽網頁 — 開啟頁面、點擊按鈕、填寫表單、捲動瀏覽
- 擷取資料 — 從網頁、表格和儀表板中抓取結構化資料
- 截取截圖 — 全頁或特定元素的截圖，用於報告
- 執行多步驟工作流 — 將瀏覽器操作串聯成複雜的自動化流程
建置完成後，你只需用自然語言描述想做什麼，就能自動化任何瀏覽器操作。
為什麼用 AI 做瀏覽器自動化
傳統瀏覽器自動化工具（Selenium、Puppeteer、Playwright）功能強大，但每個工作流都需要撰寫和維護程式碼。網站改了版面，腳本就掛了。需要新的工作流，就得寫新腳本。
AI 驅動的瀏覽器自動化改變了這一點：
- 自然語言指令 — 描述你要做什麼，而不是寫選擇器和點擊處理器
- 自適應修復 — AI 能適應 UI 變化，不需要更新腳本
- 零程式碼維護 — 工作流由意圖定義，而非實作細節
- 快速建置 — 幾分鐘建好一個新自動化，而不是幾小時
- 視覺理解 — AI 能解讀頁面版面、辨識截圖中的文字、根據所見做決策
前置條件
- OpenClaw 已安裝並設定好（快速上手指南）
- Chrome 或 Chromium 已安裝
- Node.js 18+
第 1 步：安裝所需 Skills
# 1. 瀏覽器控制 npx clawhub@latest install browser-use # 2. 網頁資料擷取 npx clawhub@latest install web-scraper # 3. 截圖採集 npx clawhub@latest install screenshot
第 2 步：驗證瀏覽器環境
browser-use Skill 需要 Chrome/Chromium：
clawhub inspect browser-use
會檢查是否有相容的瀏覽器並顯示偵測到的路徑。如果 Chrome 沒有被自動找到，在 Skill 設定中手動設定路徑。
第 3 步：瀏覽器自動化實戰
範例 1：從資料儀表板擷取指標
假設你每天早上需要從一個 Web 儀表板擷取資料：
Open https://analytics.example.com, log in with my saved credentials, navigate to the Daily Metrics page, and extract the table showing yesterday's KPIs into a Markdown table.
瀏覽器 Skill 處理登入、導覽和資料擷取。結果是一份乾淨的 Markdown 表格，可以直接貼到報告或 Slack 中。
範例 2：監控競品定價頁面
Go to competitor.com/pricing, take a screenshot of the pricing table, and extract all plan names, prices, and feature lists into JSON format.
輸出：
{
"plans": [
{
"name": "Starter",
"price": "$29/month",
"features": ["5 users", "10GB storage", "Email support"]
},
{
"name": "Professional",
"price": "$79/month",
"features": ["25 users", "100GB storage", "Priority support", "API access"]
},
{
"name": "Enterprise",
"price": "Custom",
"features": ["Unlimited users", "Unlimited storage", "24/7 support", "SSO", "Audit logs"]
}
]
}
範例 3：自動填表
Open the internal expense report form at expenses.company.com, fill in: date = today, category = "Software", amount = $49.99, description = "ClawHub Pro subscription", then submit.
範例 4：多步驟研究工作流
1. Search Google for "best CI/CD tools 2026 comparison" 2. Open the top 3 results 3. Extract the main comparison points from each article 4. Compile into a summary table
第 4 步：截圖用於報告
Screenshot Skill 為報告和監控採集視覺證據：
# 全頁截圖 clawhub run screenshot --url "https://status.example.com" --full-page # 特定元素 clawhub run screenshot --url "https://grafana.example.com/d/api-latency" --selector ".panel-container" # 多個頁面 clawhub run screenshot --urls "url1,url2,url3" --output "./screenshots/"
定時視覺監控
配合 Cron 每天採集快照：
clawhub run cron --schedule "0 9 * * *" --task "screenshot --url https://status.example.com --output ~/snapshots/{{date}}.png"
進階：複雜工作流
串聯瀏覽器操作
需要穩定執行的多步驟工作流：
# .openclaw/browser-workflow.yml
workflow:
name: "每日指標採集"
steps:
- action: navigate
url: "https://analytics.example.com"
- action: login
credentials: "analytics_dashboard"
- action: click
target: "Daily Report tab"
- action: wait
condition: "table is fully loaded"
- action: extract
target: "metrics table"
format: "csv"
- action: screenshot
target: "full page"
- action: save
output: "~/reports/{{date}}-metrics.csv"
處理登入驗證
需要登入的網站：
credentials:
analytics_dashboard:
url: "https://analytics.example.com/login"
username_field: "#email"
password_field: "#password"
# 憑證儲存在 OpenClaw 的安全憑證庫中
用 clawhub credentials set analytics_dashboard 安全儲存登入資訊。
處理 SPA 和動態內容
現代單頁應用程式動態載入內容。瀏覽器 Skill 自動處理：
- 等待網路請求完成
- 偵測頁面是否完全渲染
- 內容未載入時自動重試
對於特別慢的頁面，可以設定明確的等待條件：
Navigate to the dashboard and wait until the chart labeled "Revenue" is visible before taking a screenshot.
常見問題排查
瀏覽器啟動失敗
- 確認 Chrome/Chromium 已安裝：
which google-chrome或which chromium - 檢查 Skill 設定中的路徑：
clawhub inspect browser-use - 在無 GUI 伺服器上，確認設定中啟用了
--no-sandbox旗標
頁面內容不載入
- 某些頁面需要 JavaScript——瀏覽器 Skill 執行完整瀏覽器，預設支援
- 檢查是否有 Cookie 同意彈窗擋住了內容
- 確認 URL 從你的機器可以存取（VPN、防火牆）
截圖空白或不完整
- 截圖前加等待時間——頁面可能還在渲染
- 需要捲動的頁面使用
--full-page參數 - 檢查頁面是否需要登入
擷取到錯誤的資料
- 更具體地描述要擷取的元素
- 使用視覺描述：「第二個區域中的表格」或「右邊的定價卡片」
- 對於複雜頁面，先截圖確認頁面狀態，再擷取
常見問題
不一樣。傳統自動化工具需要寫程式碼，用明確的選擇器（如 `document.querySelector('.price-table')`）。OpenClaw 的瀏覽器自動化用 AI 從視覺和語意上理解頁面——你用自然語言描述想做什麼，它自動找到怎麼操作。這讓它對 UI 變化更有韌性，建置速度也快得多。
可以。瀏覽器 Skill 支援憑證管理。用 `clawhub credentials set` 安全儲存憑證，Skill 會自動處理登入流程。支援標準的使用者名稱/密碼表單、OAuth 重新導向和 Basic Auth。
網頁擷取的合法性取決於網站的服務條款、擷取的資料類型和你所在的法律管轄區。一般來說，擷取公開資料供個人使用是可以接受的。務必查看網站的 `robots.txt` 和服務條款。不要未經許可擷取個人資料、受著作權保護的內容或需要登入才能看到的資料。OpenClaw 不會繞過驗證碼或存取限制。
瀏覽器 Skill 不會自動解決驗證碼。如果網站彈出驗證碼，工作流會暫停並通知你。對於經常存取的網站，手動登入一次並儲存階段作業 Cookie，通常可以避免重複觸發驗證碼。
可以。瀏覽器 Skill 支援無頭模式（headless mode），不需要顯示視窗。在沒有圖形介面的伺服器上預設使用無頭模式。在設定中設定 `headless: true` 或傳入 `--headless` 參數。所有功能在無頭模式下完全一致。
每個瀏覽器實例大約佔用 200-500MB 記憶體。如果同時執行多個工作流，按比例規劃記憶體。CPU 在頁面渲染和截圖時會有峰值，等待期間佔用很低。對於定時任務，瀏覽器在每次執行時啟動和關閉，資源只在執行期間佔用。