讓 Hermes Agent、Claude Code、Codex App 使用 camofox-browser 爬取 X.com (Twitter)

[Aiko]

讓 Hermes Agent、Claude Code、Codex App 使用 camofox-browser 爬取 X.com (Twitter)

---

架構總覽

┌─────────────────────────────────────────────────────────────┐
│                    camofox-browser 伺服器                     │
│  http://localhost:9377  (REST API)                           │
│  基於 Camoufox (C++ 層級指紋偽裝 Firefox)                     │
└─────────────────────────────────────────────────────────────┘
           ▲                    ▲                    ▲
           │ MCP (stdio)        │ MCP (stdio)        │ MCP / Chrome Extension
           │                    │                    │
┌──────────┴──────────┐ ┌──────┴──────┐ ┌──────────┴──────────┐
│    Hermes Agent     │ │  Claude Code  │ │     Codex App       │
│  (內建 Camofox 整合) │ │  (via MCP)    │ │  (內建瀏覽器 + MCP)  │
└─────────────────────┘ └───────────────┘ └─────────────────────┘

---

共同前置：啟動 camofox-browser 伺服器

方式 A：Docker（推薦，生產環境穩定）

# 使用官方 Makefile（自動偵測 M1/M2 aarch64 或 Intel x86_64）
git clone https://github.com/jo-inc/camofox-browser
cd camofox-browser
make up

# 或手動 Docker（需持久化、VNC 觀看）
mkdir -p ~/.camofox-docker
docker run -d \
  --name camofox-browser \
  --restart unless-stopped \
  -p 9377:9377 \
  -p 6080:6080 \
  -p 5901:5900 \
  -e CAMOFOX_PORT=9377 \
  -e ENABLE_VNC=1 \
  -e VNC_BIND=0.0.0.0 \
  -e VNC_RESOLUTION=1920x1080 \
  -e MAX_OLD_SPACE_SIZE=2048 \
  -v ~/.camofox-docker:/root/.camofox \
  camofox-browser:135.0.1-aarch64

方式 B：本地 npm（開發測試快速）

git clone https://github.com/jo-inc/camofox-browser
cd camofox-browser
npm install && npm start

驗證：curl http://localhost:9377/health 應回傳 {"ok":true,"running":true}

---

1. Hermes Agent 設定

1.1 環境變數

編輯 ~/.hermes/.env：

CAMOFOX_URL=http://localhost:9377

1.2 關鍵：啟用持久化會話（保留 X.com 登入狀態）

編輯 ~/.hermes/config.yaml，路徑必須精確：

browser:
  camofox:
    managed_persistence: true
    # Docker 部署時需加上循環網址重寫
    rewrite_loopback_urls: true
    loopback_host_alias: host.docker.internal

常見錯誤：寫成頂層 managed_persistence: true 會被靜默忽略，導致每次都是臨時會話。

1.3 完全重啟 Hermes

# 確保進程完全結束後再啟動
pkill -f hermes
hermes

1.4 手動登入 X.com 建立持久化身份

1. 在 Hermes CLI 中：

   Navigate to https://x.com
   

2. 如有 VNC（http://localhost:6080），用瀏覽器觀看並手動登入
3. 正常結束任務
4. 重新啟動新任務，再次開啟 X.com —— 若仍保持登入，持久化成功

1.5 爬取 X.com 範例提示詞

Navigate to https://x.com/elonmusk
Get page snapshot
Scroll down to see more tweets
Get page snapshot (full=true)
Click @e5 to open the tweet
Get page snapshot

---

2. Claude Code 設定（透過 MCP）

2.1 安裝 camofox-mcp

# 方式 A：npx 直連（最簡單）
claude mcp add camofox -- npx -y camofox-mcp@latest --env CAMOFOX_URL=http://localhost:9377

# 方式 B：Docker（若 camofox-browser 也在 Docker）
docker run -d -p 9377:9377 --name camofox-browser ghcr.io/redf0x1/camofox-browser:latest
claude mcp add camofox -- docker run -i --rm \
  -e CAMOFOX_URL=http://host.docker.internal:9377 \
  ghcr.io/redf0x1/camofox-mcp:latest

2.2 驗證連線

# 在 Claude Code 中測試
/mcp
# 應顯示 camofox: connected (47 tools)

2.3 登入 X.com（三種方式）

方式一：VNC 手動登入（推薦首次）

# 1. 建立分頁
curl -X POST http://localhost:9377/tabs \
  -H "Content-Type: application/json" \
  -d '{"userId": "x-user", "url": "https://x.com/"}'

# 2. 開啟 http://localhost:6080 手動登入
# 3. 登入成功後自動持久化到 ~/.camofox/profiles/x-user/

方式二：Cookie 匯入

# 1. 產生 API Key
export CAMOFOX_API_KEY=$(openssl rand -hex 32)
# 重啟 camofox-browser 使生效

# 2. 瀏覽器安裝 "cookies.txt" 擴充功能，匯出 x.com cookie 存為 x_cookies.txt

# 3. 匯入
curl -X POST http://localhost:9377/sessions/x-user/cookies \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $CAMOFOX_API_KEY" \
  -d '{"file": "x_cookies.txt"}'

方式三：API 自動化登入

# 取得快照找元素引用
curl "http://localhost:9377/tabs/{tabId}/snapshot?userId=x-user"
# → [textbox e1] Phone or email
# → [textbox e2] Password
# → [button e3] Log in

# 輸入帳密
curl -X POST http://localhost:9377/tabs/{tabId}/type \
  -H "Content-Type: application/json" \
  -d '{"userId": "x-user", "ref": "e1", "text": "your_email"}'
curl -X POST http://localhost:9377/tabs/{tabId}/type \
  -H "Content-Type: application/json" \
  -d '{"userId": "x-user", "ref": "e2", "text": "your_password"}'
curl -X POST http://localhost:9377/tabs/{tabId}/click \
  -H "Content-Type: application/json" \
  -d '{"userId": "x-user", "ref": "e3"}'

2.4 在 Claude Code 中爬取 X.com

使用 camofox 瀏覽器導航到 https://x.com/elonmusk
取得頁面快照並解析推文內容
向下滾動載入更多推文
點擊特定推文查看詳細內容

可用工具（47 個）：

• browser_create_tab、browser_navigate、browser_snapshot
• browser_click、browser_type、browser_scroll
• browser_screenshot、browser_get_html、browser_extract_links
• browser_search（支援 @google_search、@twitter_search 等宏）
• browser_import_cookies、browser_export_cookies
• session_persist、session_list、session_delete

---

3. Codex App 設定

Codex 有 三層瀏覽器策略，依任務切換：

層級	用途	適用 X.com
內建瀏覽器	localhost、靜態頁、無需登入公開頁	X.com 需登入
Chrome 擴充功能	需登入狀態的網站（Gmail、Salesforce、X.com 等）	推薦
MCP 外部伺服器	反偵測、自動化、無頭環境	可配合 camofox-mcp

3.1 方式一：Chrome 擴充功能（最簡單，利用你已登入的 Chrome）

1. 打開 Codex App → Plugins → 新增 Chrome 外掛
2. 依引導安裝 Chrome 擴充功能，授權「讀取並更改所有網站資料」
3. 確認擴充功能顯示 Connected
4. 新對話中直接呼叫：

   @Chrome open https://x.com/elonmusk and extract the latest 10 tweets
   

優點：直接用你已登入的 Chrome profile，無需額外登入
缺點：會佔用你的 Chrome 視窗，權限較高（讀取所有網站資料）

3.2 方式二：MCP 接入 camofox-browser（反偵測、無頭、適合自動化）

步驟 1：啟動 camofox-browser（同上）

步驟 2：安裝 camofox-mcp

# 本地安裝
npm install -g camofox-mcp@latest
# 或 uvx（推薦隔離環境）
uvx camofox-mcp

步驟 3：設定 Codex MCP（TOML 格式）

編輯 ~/.codex/config.toml：

[mcp_servers.camofox]
command = "npx"
args = ["-y", "camofox-mcp@latest"]
env = { CAMOFOX_URL = "http://localhost:9377" }

或使用 Docker：

[mcp_servers.camofox]
command = "docker"
args = ["run", "-i", "--rm", "-e", "CAMOFOX_URL=http://host.docker.internal:9377", "ghcr.io/redf0x1/camofox-mcp:latest"]

步驟 4：重啟 Codex App，驗證

@camofox navigate to https://x.com/elonmusk
@camofox get page snapshot
@camofox scroll down
@camofox extract tweets

步驟 5：登入 X.com（同 Claude Code 方式）

• VNC 手動登入：http://localhost:6080
• Cookie 匯入：需先設定 CAMOFOX_API_KEY
• API 自動化登入

---

X.com 爬蟲專用最佳實踐

反偵測優勢

特性	一般 Playwright/Chrome	camofox-browser
指紋偽裝層級	JS shim（易被檢測）	C++ 引擎層級（WebGL、AudioContext、WebRTC、Canvas 等）
Cloudflare 繞過	困難	原生支援
Token 效率	完整 HTML	Accessibility tree（省 90% token）
元素引用穩定度	CSS selector 易失效	e1/e2/e3 稳定引用

爬取 X.com 常見流程

# 概念流程（實際在 Agent 對話中用自然語言指示）
1. 建立/復用持久化 session (userId: "x-crawler")
2. 導航到目標 URL (https://x.com/username 或 https://x.com/search?q=keyword)
3. 等待載入 → 取得 snapshot (full=true)
4. 解析 accessibility tree 中的推文元素 (article[data-testid="tweet"])
5. 循環：scroll_down → snapshot → 解析新推文 → 去重
6. 遇到「Show more」按鈕 → click ref → 繼續
7. 需要圖片/影片 → browser_get_images / 解析 video 標籤
8. 遇到 CAPTCHA → browser_vision 截圖分析或 VNC 人工介入

關鍵選擇器參考（X.com 2026 版本）

<!-- 推文容器 -->
<article data-testid="tweet" ...>

<!-- 推文文字 -->
<div data-testid="tweetText">...</div>

<!-- 作者資訊 -->
<div data-testid="User-Name">...</div>

<!-- 互動按鈕 -->
<button data-testid="like">...</button>
<button data-testid="retweet">...</button>
<button data-testid="reply">...</button>

<!-- 時間戳 -->
<time datetime="2026-06-07T...">...</time>

---

三工具對照表

項目	Hermes Agent	Claude Code	Codex App
整合方式	內建 browser.camofox 設定	MCP (stdio)	Chrome Extension / MCP
持久化登入	managed_persistence: true (config.yaml)	camofox-browser 端自動持久化	Chrome Extension 直接用你的 Chrome；MCP 同 Claude Code
反偵測能力	完整	完整 (via camofox-mcp)	Chrome Extension: 真實 Chrome；MCP: 完整
適用場景	長期運行 Agent、多任務	開發流程中爬蟲、測試	Chrome Ext: 快速登入操作；MCP: 自動化腳本
設定複雜度	低 (修改 config.yaml)	中 (claude mcp add)	Chrome Ext: 低；MCP: 中
VNC 觀看	支援	支援	支援
Proxy + GeoIP	環境變數	環境變數	環境變數

---

常見問題排查

現象	可能原因	解決方案
每次都要重新登入 X.com	Hermes managed_persistence 路徑錯誤 / 未完全重啟	檢查 browser.camofox.managed_persistence: true 縮排、完整重啟 Hermes
Connection refused	埠號錯誤、服務未啟動	curl localhost:9377/health 驗證、檢查 Docker port mapping
X.com 顯示「Something went wrong」	指紋/Proxy/GeoIP 不一致	開啟 VNC 觀看、啟用 Proxy + GeoIP 對齊、嘗試匯入乾淨 Cookie
記憶體暴增	並發過多、未關閉分頁	調整 MAX_OLD_SPACE_SIZE、減少 MAX_SESSIONS/MAX_TABS_PER_SESSION
Codex MCP 連不上	TOML 格式錯誤、command 路徑	檢查 ~/.codex/config.toml 語法、which npx 確認路徑
Chrome Extension 權限過高	預設要求「所有網站資料」	在 Codex 設定中管理允許/阻止網站清單

---

完整部署腳本（一鍵啟動三工具共用環境）

#!/bin/bash
# startup_camofox.sh - 一鍵啟動 camofox-browser 供三工具共用

set -e

# 1. 啟動 camofox-browser (Docker)
mkdir -p ~/.camofox-docker
docker run -d \
  --name camofox-browser \
  --restart unless-stopped \
  -p 9377:9377 \
  -p 6080:6080 \
  -e CAMOFOX_PORT=9377 \
  -e ENABLE_VNC=1 \
  -e VNC_BIND=0.0.0.0 \
  -e MAX_OLD_SPACE_SIZE=2048 \
  -v ~/.camofox-docker:/root/.camofox \
  camofox-browser:135.0.1-aarch64

# 2. 等待就緒
echo "等待 camofox-browser 就緒..."
for i in {1..30}; do
  if curl -sf http://localhost:9377/health | grep -q '"ok":true'; then
    echo "✅ camofox-browser 已就緒"
    break
  fi
  sleep 2
done

# 3. 設定 Hermes (若存在)
if [ -f ~/.hermes/config.yaml ]; then
  if ! grep -q "managed_persistence: true" ~/.hermes/config.yaml; then
    echo "⚠️ 請手動在 ~/.hermes/config.yaml 的 browser.camofox 下添加 managed_persistence: true"
  fi
fi

# 4. 設定 Claude Code MCP (若未設定)
if ! claude mcp list 2>/dev/null | grep -q camofox; then
  claude mcp add camofox -- npx -y camofox-mcp@latest --env CAMOFOX_URL=http://localhost:9377
  echo "✅ Claude Code MCP 已設定"
fi

# 5. 設定 Codex MCP (若未設定)
if [ ! -f ~/.codex/config.toml ] || ! grep -q "camofox" ~/.codex/config.toml; then
  cat >> ~/.codex/config.toml << 'EOF'

[mcp_servers.camofox]
command = "npx"
args = ["-y", "camofox-mcp@latest"]
env = { CAMOFOX_URL = "http://localhost:9377" }
EOF
  echo "✅ Codex MCP 已設定 (需重啟 Codex App)"
fi

echo "
🎉 所有服務已就緒！

下一步：
1. Hermes: 重啟 hermes，然後 'Navigate to https://x.com' 手動登入一次
2. Claude Code: 重啟 claude，測試 '/mcp' 應顯示 camofox connected
3. Codex App: 重啟 Codex，或用 Chrome Extension 直接 @Chrome 登入 X.com

VNC 觀看: http://localhost:6080
健康檢查: curl http://localhost:9377/health
"