我們開源了 CF Browser：9 個瀏覽器工具讓 Claude Code 看懂整個網路

Claude Code 內建的 WebFetch 只回傳原始 HTML。靜態頁面沒問題，但現代網頁大部分靠 JavaScript 渲染 — React 文件站、動態定價頁、SPA 應用，WebFetch 拿到的就是一個空的 <div id="root"></div>。

我們做了 CF Browser 來解決這個問題。今天正式開源。

GitHub：github.com/claude-world/cf-browser（MIT License）

問題：Claude Code 看不懂 JavaScript

叫 Claude Code 去讀一個 React 文件頁面，WebFetch 給你的是空殼。沒內容、沒渲染後的文字。

這種情況不斷發生：

SPA 技術文件站（Next.js、Nuxt、Svelte）
動態定價和產品頁面
JavaScript 渲染的 Dashboard
任何需要瀏覽器才能顯示的頁面

解法：9 個 MCP 工具

CF Browser 把 Cloudflare Browser Rendering API（雲端 headless Chrome）包裝成 9 個 MCP 工具，Claude Code 可以直接使用：

工具	功能
`browser_markdown`	讀取任何網頁，回傳乾淨的 Markdown（JS 已渲染）
`browser_content`	取得完整渲染後的 HTML
`browser_screenshot`	截圖為 PNG（可設定任何 viewport 尺寸）
`browser_pdf`	生成 PDF 報告（A4、Letter 等）
`browser_scrape`	用 CSS selector 擷取特定元素
`browser_json`	AI 驅動的結構化資料擷取
`browser_links`	發現頁面上所有超連結
`browser_crawl`	啟動非同步多頁爬取
`browser_crawl_status`	輪詢或等待爬取結果

裝好之後，直接用自然語言跟 Claude Code 說：

「讀 Next.js 15 的 migration guide」 → 渲染 JS，回傳 Markdown
「手機版首頁截圖」 → 375×667 PNG
「擷取這個頁面所有產品名稱和價格」 → 結構化 JSON
「爬我們的文件站，找斷掉的連結」 → 多頁爬取

架構

三個獨立套件，鬆耦合：

Claude Code
  ↓ MCP (stdio)
MCP Server（Python, FastMCP）
  ↓ HTTP
Python SDK（httpx, async）
  ↓ HTTPS + Bearer token
Cloudflare Worker（TypeScript, Hono）
  ├── 認證（timing-safe SHA-256）
  ├── 限速（KV, 60 req/min）
  └── 快取（KV 文字, R2 二進位）
  ↓ REST API
Cloudflare Browser Rendering（headless Chrome）

每層都可以獨立使用：

只用 Worker — 從任何語言呼叫 REST API
只用 SDK — 在 Python 腳本中使用
MCP Server — Claude Code 完整整合

安裝：3 步驟

1. 部署 Worker

git clone https://github.com/claude-world/cf-browser.git
cd cf-browser/worker

# 建立 Cloudflare 資源
wrangler kv namespace create CACHE
wrangler kv namespace create RATE_LIMIT
wrangler r2 bucket create cf-browser-storage

# 設定密鑰
wrangler secret put CF_ACCOUNT_ID
wrangler secret put CF_API_TOKEN
echo "$(openssl rand -hex 32)" | wrangler secret put API_KEYS

# 部署
cp wrangler.toml.example wrangler.toml
# （貼上 KV namespace IDs）
wrangler deploy

2. 安裝 Python 套件

pip install "cf-browser @ git+https://github.com/claude-world/cf-browser.git#subdirectory=sdk"
pip install "cf-browser-mcp @ git+https://github.com/claude-world/cf-browser.git#subdirectory=mcp-server"

3. 加到 `.mcp.json`

{
  "mcpServers": {
    "cf-browser": {
      "type": "stdio",
      "command": "python",
      "args": ["-m", "cf_browser_mcp.server"],
      "env": {
        "CF_BROWSER_URL": "https://cf-browser.your-subdomain.workers.dev",
        "CF_BROWSER_API_KEY": "your-api-key"
      }
    }
  }
}

重啟 Claude Code，就會看到 9 個 browser_* 工具。

跟其他方案的差異

vs. Playwright MCP：CF Browser 的 headless Chrome 跑在 Cloudflare 的邊緣網路上，不是本機。沒有本地瀏覽器進程、不吃記憶體。在 CI/CD 和無法跑本地瀏覽器的遠端環境也能用。

vs. 原生 WebFetch：完整 JavaScript 渲染。頁面完全載入後才擷取內容。動態內容、SPA、客戶端渲染的頁面全部支援。

vs. 自己搭：認證、限速、快取、SSRF 防護、錯誤處理都做好了。Worker 處理基礎設施，你只要呼叫 MCP 工具。

成本：Cloudflare 免費方案包含 Browser Rendering（每天 10 分鐘）、KV（每天 100K 讀取）、R2（10GB）、Workers（每天 100K 請求）。一般開發用完全免費。

安全性

Timing-safe 認證：API key 驗證用 Web Crypto API 的 SHA-256 雜湊，防止 timing attack
限速：每個 key 的限制值用雜湊儲存在 KV
SSRF 防護：只允許 http:// 和 https:// URL
密鑰不進代碼：所有憑證透過 wrangler secret put

我們自己怎麼用

部署 CF Browser 後我們的工作流程：

內容管線：抓取任何網頁 → 乾淨 Markdown → 餵給 Claude 寫文章
視覺 QA：每次部署後，多種 viewport 截圖檢查
競品分析：從競爭對手頁面擷取結構化資料
連結審計：爬 100+ 頁面，找斷掉的連結和缺少的 meta tag
文件索引：爬整個文件站，轉成 Markdown 給 RAG 用

參與貢獻

CF Browser 使用 MIT 授權。歡迎貢獻：

Worker（worker/）：TypeScript, Hono
SDK（sdk/）：Python, httpx, Pydantic
MCP Server（mcp-server/）：Python, FastMCP

cd worker && npm install && npm run dev    # Worker 在 :8787
cd sdk && pip install -e ".[dev]" && pytest
cd mcp-server && pip install -e ".[dev]"

Claude Code 寫代碼很強。但代碼活在網路上 — 文件、API、Dashboard、競品網站。CF Browser 補上了這塊缺口。

GitHub：github.com/claude-world/cf-browser