AGENT SKILL 一日工作坊 · 階梯 8

讓 AI 直接
開你的瀏覽器辦事

瀏覽器自己打開、自己點、自己抓資料。但真正有價值的，是把它腳本化，下次一句話重跑。瀏覽器是工具，腳本化才是目的。

9 頁 · 由連接到應用免裝 Playwright MCP

學習目標

這 22 分鐘，你帶走一個真實能力

今天的目標

不是概念，是你親手跑一次。

開啟指定網址
讀取頁面標題與內容
截圖回傳

你帶走什麼

一個能抓網頁資料、可重跑的腳本。

親眼看瀏覽器自動執行
一句話觸發同樣操作的腳本
應用到 SEO 競品分析

這一段是視覺衝擊最強的環節。但操作完的腳本化，才是真正的收穫。

講師帶做 · 10 分鐘

瀏覽器自動化要先裝一次：兩個工具都要裝瀏覽器外掛

Claude Code

到 Chrome 裝官方的「Claude in Chrome」擴充外掛，連上你的 Chrome。裝一次、授權一次就好。

codex

codex 一樣要裝瀏覽器擴充外掛（Extension），裝好連上你的 Chrome。操作方式跟 Claude Code 完全相同。

不裝 Playwright MCP，它要弄環境、容易卡。兩邊都走官方的瀏覽器外掛，裝一次、授權一次，之後一句話就能叫它開瀏覽器。

這一段我要先把醜話說在前面：瀏覽器自動化還是得先裝一個外掛，不是手邊工具打開就有。今天不裝 Playwright MCP，網路上很多教學要你裝 Playwright，那會多一道環境設定、多一個卡關機會。我們改走官方的瀏覽器外掛，裝一次就好。

這裡講清楚，兩個工具都要先裝瀏覽器擴充外掛，不是只有其中一個要：如果你用的是 Claude Code（桌面 App），到 Chrome 裝上官方的「Claude in Chrome」擴充外掛，連上你的 Chrome 就能操作。如果你用的是 codex，它一樣要裝瀏覽器擴充外掛（Extension），裝好之後連上你的 Chrome。兩邊都只裝、授權一次，操作方式也一樣。

兩條路的操作方式大同小異。等等帶做的範例，不管你走哪條路都能跑。好，我們來連上去。

底層原理 + 核心精神

AI 怎麼遙控 Chrome，還有開完要做什麼

CDP 是什麼

Chrome DevTools Protocol，Chrome 給程式用的遙控入口。AI 透過它點按鈕、讀內容、截圖。你不用懂它怎麼運作。

這段的核心精神

操作完，叫它把剛剛的步驟存成可重跑的腳本。最有價值的不是看它點一次，是下次一句話重跑。

記住這句話：「你學會的不是開一次瀏覽器，是把這個操作變成一句話就能重跑的能力。」

全員動手 · 10 分鐘

第一條指令：到 SEJ 抓最新新聞、截圖

# 對 Claude Code 或 codex 說這句話開瀏覽器，到 Search Engine Journal（searchenginejournal.com），把首頁最新幾則新聞的標題抓給我，然後截一張圖。

1 瀏覽器視窗自動打開

2 導航到指定網址、讀取頁面內容

3 抓回最新幾則新聞標題、截圖回傳

→ 跑完後，叫它：「把這套步驟存成腳本，再包成一個 skill」

好，這是第一條指令。我們直接拿 SEO 圈很熟的網站 Search Engine Journal 來練。對 Claude Code 或 codex 說：「開瀏覽器，到 searchenginejournal.com，把首頁最新幾則新聞的標題抓給我，然後截一張圖。」

你會看到瀏覽器自己打開、自己跑到那個網址、讀頁面、把標題吐回來、截一張圖。第一次看到的人通常都會愣一下。這很正常，這就是它應該有的效果。

跑完之後，記得做一件事：叫它「把這套步驟存成腳本，再包成一個 skill」。它在背後就是透過剛剛講的 CDP 去操作瀏覽器，你完全不用碰，它自己寫成腳本。讓你意識到：你學會的不是抓一次新聞，是把這個操作變成一句話就能重跑的能力。這個步驟非常重要，請大家都做一次。

關鍵動作

跑完之後，存成腳本，下次一句話重跑

沒有腳本化

每次都要重說指令、等它執行、確認結果。一次性的手動動作。

每次從頭說指令
重複等待執行
無法交接給他人

有了腳本

貼一句「跑 sej-news.js」，它自動開瀏覽器、抓新聞、截圖、回傳。你一秒都不用等。

一句話重跑整套流程
可交給他人直接使用
能排進排程自動執行

對 AI 說這句話：「把剛剛這套步驟存成一個可重跑的腳本（或 skill），讓我下次一句話就能執行同樣的操作。」

SEO 實戰應用 · 15 分鐘

抓競品頁面結構，一分鐘出分析摘要

# 基本版：單一競品分析開瀏覽器，到這個競品文章網址（貼上），幫我抓出：頁面標題、所有 H2 小標、文章字數、有沒有 FAQ 區塊。整理成一份競品分析摘要。

進階版（技術端選做）：先用 serper 拿前三名網址，再用瀏覽器逐一抓 H2 結構，比較哪些主題不能漏。
（別讓瀏覽器直接去 Google 搜尋頁，容易卡驗證碼）

魁哥的真案例 · 腳本化實戰

一句話，把 SEJ 新聞頁變成每次回 JSON 的爬蟲

魁哥當時這樣說
「用瀏覽器自動化逛這頁，把新聞變成腳本，每次只回 JSON：標題、URL、作者、日期、閱讀量。」

AI 做了什麼

① 先去看　抓下整頁，確認那五個欄位真的都在

② 做判斷　資料都在靜態 HTML，不必每次開瀏覽器

③ 寫成腳本　一支免安裝的 Python，一個指令抓完 30 篇

# 每次要資料時，一句話 python3 sej_news.py --pretty

{
  "title": "Deindexing Reports Keep Coming…",
  "url": "…searchenginejournal.com/…",
  "author": "Matt G. Southern",
  "date": "14 hours ago",
  "reads": 117,
  "read_minutes": 8
}　… 共 30 篇

這一課：瀏覽器自動化是用來「看懂、互動」;一旦看懂、資料就在 HTML 裡，AI 會直接幫你寫成腳本，比每次跑瀏覽器更快更穩。會判斷「什麼時候不用瀏覽器」，也是本事。

給大家看一個我自己跑出來的真案例，剛好把這一章的精神收在一起。我那時候對 AI 說：「用瀏覽器自動化逛 Search Engine Journal 的 SEO 分類頁，把那一頁的新聞變成一支腳本，以後每次我要時就回一份 JSON，包含標題、網址、作者、日期、閱讀量。」

結果 AI 做的事很有意思。它先去看那一頁，把整頁抓下來確認那五個欄位是不是真的都在，連閱讀量它都先去找，不憑記憶亂講。看完之後它做了一個判斷：這一頁的資料全部都在靜態 HTML 裡，根本不需要每次都開瀏覽器去點、去等。所以它沒有錄一段瀏覽器操作，而是直接寫成一支免安裝的 Python 腳本，一個指令就抓完整頁三十篇，回乾淨的 JSON。

我要大家記住這一課，這也是這一章最成熟的一個觀念：瀏覽器自動化是拿來「看懂頁面、跟頁面互動」用的。但只要你看懂了、資料又剛好就在 HTML 裡，AI 會幫你寫成更穩的腳本，而不是每次傻傻地重開瀏覽器。換句話說，會判斷「這件事到底要不要動用瀏覽器」，本身就是一種本事。需要登入、需要點、內容是 JS 算出來的，那就用瀏覽器;資料攤在 HTML 上，一支腳本更快更穩。這個分寸，交給 AI，它會幫你抓。

卡關排查 + 混合班分層

卡住了？兩個常見原因，一一排掉

外掛／plugin 沒裝好、沒連上

確認裝好也啟用了，連線已開、權限給了。第一次會跳授權視窗，記得按「允許」。

網站擋自動化

換一個友善的網站示範（如 example.com 或靜態頁面），不要卡在有反爬蟲機制的網站。

混合班分層：行銷端跑通「開瀏覽器→抓標題→截圖」就達標。技術端做競品 H2 結構比較、SERP 前三名分析。

讓 AI 直接開你的瀏覽器辦事

這 22 分鐘，你帶走一個真實能力

今天的目標

你帶走什麼

瀏覽器自動化要先裝一次：兩個工具都要裝瀏覽器外掛

Claude Code

codex

AI 怎麼遙控 Chrome，還有開完要做什麼

CDP 是什麼

這段的核心精神

第一條指令：到 SEJ 抓最新新聞、截圖

跑完之後，存成腳本，下次一句話重跑

沒有腳本化

有了腳本

抓競品頁面結構，一分鐘出分析摘要

一句話，把 SEJ 新聞頁變成每次回 JSON 的爬蟲

AI 做了什麼

卡住了？兩個常見原因，一一排掉

外掛／plugin 沒裝好、沒連上

網站擋自動化

讓 AI 直接
開你的瀏覽器辦事