/ 目錄 / 演練場 / browser-act skills
● 社群 browser-act ⚡ 即開即用

browser-act skills

作者 browser-act · browser-act/skills

瀏覽、抓取並從複雜網站擷取結構化資料——比驅動完整無頭瀏覽器更快、更便宜。

browser-act 是一個用於網路自動化的 Claude skill,優先考慮結構化擷取,而非截圖後再思考的迴圈。訪問頁面、導覽流程,並以明確的選擇器或 schema 引導的 prompt 擷取型別化資料。適用於 DDG 風格擷取什麼都拿不到的 JavaScript 密集型網站,但對許多任務而言比完整的 Playwright MCP 更便宜。

為什麼要用

核心特性

即時演示

實際使用效果

就緒

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "browser-act-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "browser-act-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/browser-act/skills",
          "~/.claude/skills/browser-act"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add browser-act-skill -- git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: browser-act skills

從 JavaScript 密集的 SPA 擷取型別化清單

👤 需要從沒有 API 的網站進行一次性資料擷取的開發者 ⏱ ~25 min intermediate

何時使用: 網站只在 JavaScript 執行後才渲染你需要的資料;純 fetch 什麼都拿不到。

前置條件
  • Skill 已安裝 — git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act
步驟
  1. 定義 schema
    Use browser-act. Schema: items[]{title:str, price:number, available:bool}.✓ 已複製
    → Schema 已接受
  2. 訪問並擷取
    Open <url>; wait for the product grid; extract matching the schema.✓ 已複製
    → 型別化的 JSON 清單
  3. 驗證異常值
    Spot-check 3 random rows by re-fetching their detail page; check parsing is correct.✓ 已複製
    → 抽查通過;或發現需要修正的解析錯誤

結果: 可靠的型別化資料;無需手動點擊。

注意事項
  • 網站在 50 次請求後的機器人偵測封鎖 — 降低並發數;輪換使用者代理;遵守 robots.txt,否則放棄此任務
搭配使用: filesystem

走過多步驟表單流程以存取背後的資料

👤 需要抓取登入後或精靈流程背後資料的開發者 ⏱ ~40 min intermediate

何時使用: 公開資料集隱藏在「選擇國家 → 選擇年份 → 點擊查看」的流程後方。

步驟
  1. 規劃流程
    Use browser-act. Steps: pick country=US, year=2025, click 'View'. Then extract the table.✓ 已複製
    → 流程計畫已接受
  2. 執行
    Run the flow for 50 country/year combinations.✓ 已複製
    → 所有 50 個組合的型別化資料列
  3. 持久化
    Write each combo to /data/<country>-<year>.json.✓ 已複製
    → 檔案已存至 /data/

結果: 批次取得需要大量點擊的介面後的資料,無需手動勞動。

注意事項
  • 當網站新增步驟或重新標記按鈕時流程中斷 — Skill 會注意到並暫停;你重新錄製一次流程,而非 50 次
搭配使用: filesystem

監控頁面變化並發出警報

👤 監看狀態頁面或可用性追蹤器的任何人 ⏱ ~15 min beginner

何時使用: 你想在名額釋放、價格下降或文件更新時收到通知。

步驟
  1. 定義監控
    Use browser-act. Watch <url> selector '.availability-banner' every 10 minutes. Alert if text changes.✓ 已複製
    → 監控已啟動
  2. 定義警報路徑
    Alert via: write to ~/inbox/alerts.txt + notify webhook https://<my-webhook>.✓ 已複製
    → 有變化時兩者都會觸發

結果: 對特定訊號進行免人工監控。

注意事項
  • 監控過於積極 = 被封鎖 — 在大多數網站保持 ≥5 分鐘的間隔;遵守 429 回應

組合

與其他 MCP 搭配,撬動十倍槓桿

browser-act-skill + filesystem

將擷取的資料持久化至結構化路徑

Save extraction outputs to /data/<source>/<date>.json with provenance metadata.✓ 已複製
browser-act-skill + duckduckgo-mcp

先透過搜尋找到頁面,再進行結構化擷取

Search via duckduckgo-mcp for the data source; pass the URL into browser-act for typed extraction.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
extract_typed url, schema, wait_for? 從頁面拉取結構化資料 瀏覽器執行 + LLM token
run_flow steps[], schema? 多步驟導覽 多步驟瀏覽器費用
watch url, selector, interval, action 長時間執行的變化偵測 每次輪詢費用
screenshot url, full_page? 視覺化偵錯 瀏覽器執行

成本與限制

運行它的成本

API 配額
取決於供應商;部分流程搭配內建瀏覽器免費
每次呼叫 Token 數
Schema 引導擷取比截圖後思考的方式更便宜
費用
skill 免費;擷取需要 LLM token
提示
務必傳入 schema——無方向的擷取會在雜訊上浪費 token

安全

權限、密鑰、影響範圍

最小權限: 出站 HTTPS
憑證儲存: 若需登入網站,透過環境變數傳入機密;一次性抓取後輪換
資料出站: 目標網站 + LLM 供應商
切勿授予: 將持久的登入 token 儲存在 skill 的工作區

故障排查

常見錯誤與修復

擷取回傳空結果

等待選擇器更長時間;網站可能在點擊後透過 XHR 延遲載入資料

驗證: 使用截圖工具確認頁面狀態
網站偵測到機器人

降低並發數;輪換使用者代理;確認網站是否允許抓取

Schema 不匹配

放寬類型(string vs number);網站的格式可能會破壞嚴格類型

監控在外觀變化上重複觸發

更精確地固定選擇器;或切換至文字差異而非 HTML 差異

替代方案

browser-act skills 對比其他方案

替代方案何時用它替代權衡
Playwright MCP / chrome-devtools-mcp你需要完整的瀏覽器控制以及所有 DevTools 功能更重量級;每次呼叫費用更高
Firecrawl MCP需要全站爬取,而非各頁面的型別化擷取不同的形式;大量使用需付費
duckduckgo-mcp fetch_content頁面是純 HTML;不需要 JavaScript無法在 SPA 上使用

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills