爬蟲實戰：讓 ChatGPT 操作你的瀏覽器

CatDesk 的目標使用者有兩類，README 講得很直接：把 Codex 額度用光的人，以及做網頁開發與爬蟲（web development and crawlers）的人。後者靠的就是瀏覽器模式：CatDesk 透過 chrome-devtools-mcp 讓 ChatGPT 讀取頁面元素、控制你的瀏覽器分頁。

爬靜態 HTML 用腳本就夠了，瀏覽器模式的價值在於「要登入的頁面」「要捲動才載入的內容」，你的瀏覽器裡已經有現成的登入態，ChatGPT 直接操作你這個分頁就好。

情境

你要整理一份內部採購平台上的報價清單。這個平台要 SSO 登入、列表靠捲動分頁載入、HTML 是前端框架渲染出來的。寫爬蟲腳本要處理登入與等待，直接讓 ChatGPT 開你已登入的瀏覽器去讀，一步到位。

目標

把前 30 筆商品的名稱、單價、供應商讀出來，存成 JSON 檔放進工作區。

步驟一：以瀏覽器模式啟動 CatDesk

終端機執行 catdesk，模式選單選 Control Browser（或 Both），選一個支援的 Chromium 瀏覽器。之後 ChatGPT 就會多拿到一批瀏覽器工具，這些工具由瀏覽器橋接（browser bridge）提供，實際清單依環境而定。

步驟二：給 ChatGPT 的 prompt

Use the browser tools to work with my procurement platform tab.

1. Open https://procurement.internal.example/items in a new tab.
   I am already logged in via SSO in this browser profile.
2. Scroll until 30 item cards have loaded.
3. Read the rendered elements: for each card extract
   name, unit price, and supplier name.
4. Write the results as a JSON array to
   data/procurement/quotes-2026-09.json in the workspace.
5. Summarize: total items, min price, max price, top supplier.

CatDesk 工具呼叫序列

1. catdesk_instruction
2. <browser bridge tool: open tab
      https://procurement.internal.example/items>
3. <browser bridge tool: scroll, wait for cards to load>
4. <browser bridge tool: read elements of item cards 1..30>
5. write(path: "data/procurement/quotes-2026-09.json",
        content: "[{\"name\": \"USB-C Hub\", ...}, ...]")

ChatGPT 看到什麼、寫出什麼

第 4 步讀到的是渲染後的 DOM，不是原始 HTML。框架動態掛上去的屬性、跑完 JavaScript 之後的實際文字，ChatGPT 都看得到。它把 30 張卡片整理成結構化資料後，用 write 落成檔案：

[
  {
    "name": "USB-C Hub 7-in-1",
    "unitPrice": 890,
    "supplier": "Acme Parts"
  }
]

兩個邊界要注意：

write 只能寫工作區內的路徑。想讓 ChatGPT 把資料存進 data/，啟動 CatDesk 時的工作目錄就要包含它（或用 WORKSPACE_ROOT 指定）。
MCP Server URL 等於你電腦的遙控器，絕對不要外流；瀏覽器模式等於多給對方一雙手，分享截圖或網址前先想一遍。

結果與重點

30 筆報價存成 quotes-2026-09.json，ChatGPT 附上摘要：最低 210 元、最高 4,500 元、Acme Parts 佔 11 筆。你沒寫任何一行爬蟲程式。

三個重點帶走：

已登入、要渲染、要捲動的頁面，瀏覽器模式比傳統爬蟲腳本省一整個工程量。
讀到的是渲染後元素，資料乾淨，整理成本幾乎為零。
瀏覽器工具的確切清單依環境而定，能力核心是：開分頁、讀元素、控制分頁。