前面我們串了很多服務，但現實世界裡，大部分學校公告欄、公家機關網站、或是小型電商平台，根本不會佛心地提供標準 API 給你呼叫。面對這種網站，如果想自動化追蹤資訊，就得自己動手寫個小爬蟲。今天我們就用 n8n 內建的工具，直接爬下目標網頁、精準剖析結構，把原本雜亂的 HTML 轉換成規規矩矩的格式化資料。

第一站：偽裝瀏覽器發出請求
老朋友 HTTP Request 節點再次登場。這次把請求方法設為 GET，填入目標頁面網址。有些網站看到預設的爬蟲連線會直接擋掉，所以標頭（Headers）一定要記得補上常見的瀏覽器 User-Agent 字串，讓對方的伺服器以為這是一位普通使用者用 Chrome 打開了網頁。執行測試後，整頁密密麻麻的 HTML 原始碼就會被完整抓進來。

第二站：用 HTML 節點精準定位元素
拿到一大包 HTML 先別慌，在 n8n 裡搜尋並拉出「HTML」節點（通常在資料轉換類別底下）。這個節點是網頁爬蟲的神器，操作模式選擇「Extract HTML Content」。它支援標準的 CSS Selector 語法，這意味著我們只要在瀏覽器打開目標網頁、按 F12 開發者工具，用滑鼠點一下想抓的文字區塊，複製對應的 CSS 選擇器貼進來就行。比如只想抓公告標題，就填上標題對應的 class 名稱；如果想抓表格資料，就指定表格的列（tr）與欄位（td）。

第三站：單純文字還是多筆清單？設定回傳格式
在 HTML 節點裡，你可以一次建立多個提取欄位，例如同時把「發布日期」、「文章標題」和「連結網址（href）」撈出來。如果目標網頁是一個公告列表，記得勾選回傳多筆（Return Array/Multiple Items）的選項。這樣節點跑完後，就會自動幫你把網頁上的幾十則公告切成一筆筆獨立的 JSON 物件，每一筆都整整齊齊帶有日期、標題與連結。

第四站：用 Code 節點清理殘留雜質
抓下來的文字常常會帶著奇怪的換行符號、多餘的空格，或是相對路徑的網址（比如只有 /news/123 而缺少前面的網域）。我們在後面接一個 Code 節點，用兩三行簡單的 JavaScript 把字串前後的空白清乾淨，順便把網域名稱補到網址前面，拼成可以直接點開的完整連結。

第五站：格式化並串接後續流程
現在這份無 API 網站的資料，已經被我們改造成跟官方 API 一樣乾淨的結構化資料了。不管是像之前一樣比對有沒有新公告、交給 AI 做重點摘要，還是直接塞進 Google Sheets 存檔，都能無縫銜接。學會這招，基本上只要能在瀏覽器看得到的公開網頁，都能變成你自動化流程的資料庫。明天我們換個輕鬆的玩法，用 n8n 來設計一個「今天吃什麼」的隨機轉盤互動小遊戲。