⌂ 總覽
Agent Skill 一日工作坊 · 階梯 8

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

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

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

學習目標

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

01 / 今天的目標

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

開啟到指定網址，瀏覽器自己打開
讀取頁面標題與內容，抓回來給你
截圖截一張畫面回傳
02 / 你帶走什麼

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

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

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

講師帶做 · 10 分鐘

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

工具一

Claude Code

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

工具二

codex

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

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

底層原理 + 核心精神

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

底層原理

CDP 是什麼

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

核心精神

這段最值錢的事

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

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

全員動手 · 10 分鐘

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

# 對 Claude Code 或 codex 說這句話 開瀏覽器，到 Search Engine Journal（searchenginejournal.com）， 把首頁最新幾則新聞的標題抓給我，然後截一張圖。
1瀏覽器視窗自動打開
2導航到指定網址
讀取頁面內容
3抓回最新幾則標題
截圖回傳
→跑完後：把這套步驟存成腳本，再包成 skill

關鍵動作

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

沒有腳本化

一次性的手動動作

每次都要重說指令、等它執行、確認結果。

重說每次從頭打一遍指令
等待重複等它一步步跑
交接無法直接交給他人
有了腳本

一句話跑完整套

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

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

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

SEO 實戰應用 · 15 分鐘

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

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

進階版（技術端選做）：先用 serper 拿前三名網址，再用瀏覽器逐一抓 H2 結構，比較哪些主題不能漏。

別讓瀏覽器直接去 Google 搜尋頁，容易卡驗證碼。

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

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

魁哥當時這樣說
用瀏覽器自動化逛這頁，把新聞變成腳本，每次只回 JSON：標題、URL、作者、日期、閱讀量。
AI 做了什麼
1先去看　抓下整頁，確認那五個欄位真的都在
2做判斷　資料都在靜態 HTML，不必每次開瀏覽器
3寫成腳本　一支免安裝的 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 會直接幫你寫成腳本，比每次跑瀏覽器更快更穩。會判斷「什麼時候不用瀏覽器」，也是本事。

卡關排查 + 混合班分層

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

✕
外掛／plugin 沒裝好、沒連上
確認裝好也啟用了，連線已開、權限給了。第一次會跳授權視窗，記得按「允許」。
✕
網站擋自動化
換一個友善的網站示範（如 example.com 或靜態頁面），不要卡在有反爬蟲機制的網站。

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