name: browser-mcp description: 使用 Chrome DevTools MCP 協議遠端控制 Chrome 瀏覽器執行網頁任務。當用戶說"開啟網站"、"幫我搜索"、"點進去看看"、"檢視詳情"、"操作網頁"、"開啟 ChatGPT/Gemini"等任何需要瀏覽器自動化執行的任務時觸發。支援網站導航、元素互動、表單填寫、多步驟跳轉、資訊提取、SSRF 白名單配置等完整功能。

Chrome DevTools MCP Browser Skill

通過 Chrome DevTools MCP 協議連線瀏覽器，實現遠端網頁控制。

執行環境

當前配置

架構示意

┌─────────────────────────────────────────────────────────┐
│  QClaw / OpenClaw (本機 Windows 11)                     │
│                                                         │
│  browser(action="navigate", profile="user", ...)         │
│           ↓                                            │
│  Chrome DevTools MCP (CDP)                              │
│           ↓                                            │
│  ws://127.0.0.1:9222 (Chrome Remote Debugging)          │
│           ↓                                            │
│  Chrome Browser (老闆的 Chrome) ← 直接操控已登入狀態     │
└─────────────────────────────────────────────────────────┘

快速入門

1. 啟動瀏覽器

browser(action="start", profile="user")

2. 開啟網站

browser(action="navigate", profile="user", url="https://example.com")

3. 獲取頁面快照

browser(action="snapshot", profile="user", refs="aria")

4. 操作元素

browser(action="act", profile="user", ref="ref_id", kind="click")   // 點選
browser(action="act", profile="user", ref="ref_id", kind="type", text="內容")  // 輸入

核心工作流

標準流程

啟動瀏覽器 → 導航網址 → 獲取快照 → 分析內容 → 操作元素 → 等待載入 → 迴圈重複

多步驟任務流程

1. browser(action="navigate", url="目標網址")
2. browser(action="snapshot", refs="aria")  ← 每次操作前必做
3. 分析快照中的 ref，找到目標元素
4. browser(action="act", kind="click/type/press", ref="xxx", ...)
5. browser(action="act", kind="wait", timeMs=2000)  // 等待載入
6. 返回步驟2，迴圈直到任務完成

完整 Action 速查

導航與控制

元素操作

特殊操作

常用 ref 模式

實戰模板

模板1：搜尋任務

1. navigate → 開啟搜尋引擎（百度/Google）
2. snapshot → 找到搜尋框 ref
3. type → 輸入搜尋關鍵詞
4. press Enter → 提交搜尋
5. wait 2s → 等待結果載入
6. snapshot → 檢視搜尋結果
7. click → 點選目標連結

模板2：登入後操作

1. navigate → 開啟目標網站（已登入狀態）
2. snapshot → 確認已登入
3. 執行後續操作...

模板3：多頁面深入

1. navigate → 開啟列表頁
2. snapshot → 找到目標條目
3. click → 點進詳情
4. wait → 等待載入
5. snapshot → 檢視詳情內容
6. 重複深入或返回繼續

模板4：表單填寫提交

1. navigate → 開啟表單頁
2. snapshot → 獲取所有表單項 ref
3. type → 逐項填寫（姓名、郵箱等）
4. select → 選擇下拉選項
5. click → 提交按鈕
6. wait → 等待響應
7. snapshot → 確認提交結果

執行環境配置

Windows 11 + QClaw（當前）

配置檔案路徑

C:\Users\<your-username>\.qclaw\openclaw.json

Chrome 遠端除錯配置

"browser": {
  "ssrfPolicy": {
    "dangerouslyAllowPrivateNetwork": false,
    "allowedHostnames": [ ... ]
  },
  "profiles": {
    "user": {
      "driver": "existing-session",
      "attachOnly": true,
      "cdpPort": 9222,
      "cdpUrl": "http://127.0.0.1:9222",  // 本地除錯埠，不要暴露
      "color": "#00AA00"
    }
  }
}

Chrome 啟動方式

老闆的 Chrome 需要開啟遠端除錯： 1. 位址列輸入 chrome://inspect/#remote-debugging 2. 勾選 "Discover network targets" 3. 確認顯示 localhost:9222

啟動 Chrome 命令（可選）

如果需要手動啟動帶除錯埠的 Chrome：

start chrome.exe --remote-debugging-port=9222

Linux/Mac 遠端連線 Windows Chrome（未來支援 🚧）

場景說明

當 Agent 執行在 Linux 或 Mac 系統時，需要遠端連線到 Windows 11 老闆電腦上的 Chrome 瀏覽器。

架構示意

┌──────────────────────────────┐      ┌──────────────────────────────┐
│  Linux / Mac (Agent)         │      │  Windows 11 (老闆電腦)        │
│                              │      │                              │
│  QClaw / OpenClaw            │ ←──→ │  Chrome + 遠端除錯埠        │
│  browser(action=...,          │ CDP  │  chrome.exe --remote-        │
│    cdpUrl="ws://WIN_IP:9222")│      │    debugging-port=9222        │
└──────────────────────────────┘      └──────────────────────────────┘
想要更強大的技能外掛，就來小蔥技能站7w4.net看看吧。

Windows 端配置

1. 允許 Chrome 接受外部連線： powershell chrome.exe --remote-debugging-port=9222 --remote-allow-origins=*

2. 防火牆配置（允許 9222 埠入站）

3. 獲取 Windows 電腦的區域網 IP（如 192.168.1.100）

Agent 端配置

"browser": {
  "profiles": {
    "user": {
      "driver": "remote",
      "cdpUrl": "ws://<your-windows-ip>:9222",  // 替換為實際 IP
      "attachOnly": false,
      "color": "#00AA00"
    }
  }
}

注意事項

• ⚠️ 僅在可信網路中使用
• ⚠️ 遠端連線時老闆的 Chrome 需要保持執行
• ⚠️ 老闆電腦需要保持開機狀態

SSRF 白名單配置

問題現象

Blocked: resolves to private/internal/special-use IP address

解決方案

1. 編輯 C:\Users\<your-username>\.qclaw\openclaw.json
2. 找到 browser.ssrfPolicy.allowedHostnames
3. 新增目標域名（支援泛域名 *.example.com）
4. 重啟 OpenClaw：gateway(action=restart)

當前白名單

"allowedHostnames": [
  "*.chatgpt.com", "*.openai.com", "*.oaistatic.com",
  "*.gemini.google.com", "*.google.com",
  "*.twitter.com", "*.x.com",
  "*.facebook.com", "*.fbcdn.net",
  "*.github.com", "*.githubusercontent.com", "*.githubassets.com",
  "*.npmjs.org", "*.pypi.org", "*.pythonhosted.org",
  "*.cloudflare.com", "*.workers.dev", "*.vercel.app",
  "*.googleapis.com", "*.gstatic.com",
  "*.stackoverflow.com", "*.stackexchange.com"
]

注意事項

必須遵守

• 使用 profile=user：連線老闆的 Chrome，不是預設 profile
• 操作前先 snapshot：每次頁面變化後都要重新獲取快照
• 操作後等待 1-2 秒：讓頁面/內容完全載入
• SSRF 白名單修改後重啟：配置不會自動生效

常見問題

ref 失效規律

• 頁面重新整理/導航後 ref 全部失效
• 點選連結跳轉後 ref 全部失效
• 滾動不會導致 ref 失效
• 每次操作前都重新 snapshot 是最穩妥的

Chrome 配置檢查清單

老闆的 Chrome 需開啟遠端除錯才能連線： 1. 位址列輸入 chrome://inspect/#remote-debugging 2. 勾選 "Discover network targets" 3. 確認顯示 localhost:9222

最後更新：2026-03-25

這個 Skill 整體質量不錯，文件寫得清楚明白，小白也能看懂怎麼用。優點是功能覆蓋全面，搜尋、操作網頁、表單填寫這些常用場景都有對應的操作指南，還貼心地提供了 SSRF 白名單配置說明。不足的是部分高階功能還不完善，另外文件有點囉嗦，有些內容重複。總體而言是個好用的瀏覽器自動化工具。