今天兩節課，用 ChatGPT 免費版（會用 VS Code 的人也可以用 Copilot）做一個真的裝在 Chrome 上的外掛：每天打開都看得到「距離學測還有幾天」，讀書時間一到，YouTube、IG 自動被擋掉。做完就是你自己的，回家也能裝。
開場：老師示範「一鍵試衣間」
先看老師做的另一個外掛，看就好，今天不是要做這個。在購物網站的衣服圖片上按右鍵 →「用這件試穿」，外掛會打開 Gemini，把「你的照片＋這件衣服＋寫好的指令」一次放好，按送出就換上了。
看的時候想兩件事：
- 外掛就是「在別人的網站上，幫你多做一步」。你每天在網路上重複做的事，就是外掛的題目。
- 它沒有用任何金鑰，用的是網頁版 Gemini 的免費額度。今天你做的外掛也一樣，不用金鑰、不用錢。
🔁 你其實遇過：LINE Bot 那一課你就遇過：公開的金鑰常常一早就被大家用光。所以今天的外掛刻意不連任何 AI 服務，計時和提醒都不會用掉任何額度。
沿路要交的東西
| 要交什麼 | 在哪一關 |
|---|---|
| 截圖 ①：小視窗顯示「距離學測還有 ＿ 天」 | 關卡三 |
| 截圖 ②：打開 YouTube 被換成提醒頁 | 關卡三 |
| 截圖 ③：改過一次以後的樣子（換了什麼寫一句） | 關卡四 |
| 你的外掛下載網址（同學能下載安裝） | 關卡五 |
截圖：按 Win ＋ Shift ＋ S 框選要的範圍。交到哪裡照老師上課說的。
關卡一 讓 AI 做出來（15 分鐘）
兩條路選一條：A. ChatGPT（大部分人走這條）或 B. VS Code＋Copilot（遊戲課用 VS Code 的人）。
A. 用 ChatGPT
- 打開 ChatGPT，用你的帳號登入（免費版就可以）
- 複製下面整段指令，貼進輸入框（整段一次貼，不要拆開講）
- 把「風格：＿＿＿」換成你要的感覺，例如「ins 文青手帳風、奶茶色、紙膠帶」「RPG 遊戲任務風、深色配金框」「深夜書桌、深藍底、檯燈暖黃光」「賽博龐克霓虹」
- 按送出，等它做（老師實測約 2 分半）
💬 輸入給 ChatGPT學測專注模式（只改風格那一行）
幫我做一個 Chrome 擴充功能，叫「學測專注模式」。
功能：
1. 按瀏覽器右上角的圖示，跳出一個小視窗：最上面大大寫「距離學測還有 ＿ 天」（學測是 2027 年 1 月 22 日）
2. 小視窗裡可以選專注 25 分鐘或 50 分鐘，按「開始專注」就開始倒數
3. 專注的時候打開 YouTube、Instagram、Facebook、TikTok，畫面會被換成一張提醒頁：顯示還剩幾分鐘、一句鼓勵的話、一個「回去讀書」按鈕
4. 要擋哪些網站，可以在小視窗裡自己新增、刪除
5. 時間到跳出通知「做得好！休息 5 分鐘」，今天完成幾輪用小番茄 🍅 顯示
風格：＿＿＿＿＿＿（寫兩三個詞描述你要的感覺和顏色）
- 圓角卡片，倒數數字要很大、很好看
要求：
- 不用任何 API 金鑰，不用連網也能用
- 用 Manifest V3，介面全部繁體中文
- 圖示自己畫（16、48、128 三種 PNG）
- 把所有檔案放在同一個資料夾，打包成 zip 給我下載
- 最後用三句話告訴我：怎麼裝到 Chrome、怎麼測試
⚠️ ChatGPT 免費版幫你打包 zip 的次數很少：老師的帳號第 2 次打包完就出現「你已達到資料分析上限」，要等到隔天晚上才能再打包。所以第一次的指令要寫完整（風格先想好再送），之後的修改改用關卡四的方法，不用再打包。
沒拿到 zip？（只給你一大段程式碼、或說到上限了）先用老師的版本接著做，關卡四再改成你的風格：下載老師的學測專注模式.zip。
✅ 「下載」資料夾裡多了一個 zip。
B. 用 VS Code＋Copilot
沒有打包次數的限制，檔案直接寫進資料夾，也不會有解壓縮多一層的問題。
- 在桌面新增一個空資料夾，取名「學測專注模式」
- VS Code →「File → Open Folder」（中文介面是「檔案 → 開啟資料夾」）選它，左邊檔案總管要看到這個資料夾名稱
- 右邊 Copilot 聊天：模式選 Agent，模型用 Auto
- 貼上下面這段（一樣把風格換成你的）→ 送出
💬 輸入給 Copilot學測專注模式（VS Code 版）
在這個資料夾幫我做一個 Chrome 擴充功能，叫「學測專注模式」。
功能：
1. 按瀏覽器右上角的圖示，跳出一個小視窗：最上面大大寫「距離學測還有 ＿ 天」（學測是 2027 年 1 月 22 日）
2. 小視窗裡可以選專注 25 分鐘或 50 分鐘，按「開始專注」就開始倒數
3. 專注的時候打開 YouTube、Instagram、Facebook、TikTok，畫面會被換成一張提醒頁：顯示還剩幾分鐘、一句鼓勵的話、一個「回去讀書」按鈕
4. 要擋哪些網站，可以在小視窗裡自己新增、刪除
5. 時間到跳出通知「做得好！休息 5 分鐘」，今天完成幾輪用小番茄 🍅 顯示
風格：＿＿＿＿＿＿（寫兩三個詞描述你要的感覺和顏色）
- 圓角卡片，倒數數字要很大、很好看
要求：
- 不用任何 API 金鑰，不用連網也能用
- 用 Manifest V3，介面全部繁體中文
- 圖示自己畫成 16、48、128 三種 PNG（用 Windows 內建的 PowerShell 畫，不要用需要另外安裝的東西）
- 檔案直接建在這個資料夾最外層（manifest.json 要在最外層）
- 最後用三句話告訴我：怎麼裝到 Chrome、怎麼測試
Copilot 要用 PowerShell 畫圖示時，可能會跳出「Run in terminal?」確認框。看一下指令是不是在畫 PNG、存進你的資料夾，是的話按「Allow in this Session」。
✅ VS Code 左邊看得到 manifest.json 和 .png 圖示檔。
⚠️ 老師第一次叫 Copilot「不要執行終端機指令」，它就把圖示做成 SVG，結果擴充功能頁上的圖示變成一個灰色的「學」。看到這樣，就跟它說「圖示要改成 PNG，用 PowerShell 畫」。
關卡二 裝進 Chrome（15 分鐘）
判斷規則只有一條：你要選的，是「打開來直接看得到 manifest.json」的那個資料夾。
- ChatGPT 的人：從第 1 步開始
- VS Code 的人：不用解壓縮，跳到第 2 步；第 3 步直接選你在 VS Code 開的那個資料夾
1. 解壓縮（ChatGPT 的人）
到「下載」資料夾，在 zip 上按右鍵 →「解壓縮全部」→ 解壓縮。
2. 打開開發人員模式
在 Chrome 網址列貼上這一行，按 Enter：
📋 貼到網址列擴充功能管理頁
chrome://extensions打開右上角的「開發人員模式」，左上角就會多出「載入未封裝項目」。
3. 選對那一層資料夾
按「載入未封裝項目」會跳出選資料夾的視窗。ChatGPT 的人到「下載」→「學測專注模式」，老師的 zip 解開來裡面還有一個同名的資料夾：
再點進去一層才按「選擇資料夾」。選資料夾的視窗只顯示資料夾、看不到檔案，老師這份看到 icons 就是對的那層：
⚠️ 選錯層會跳出「無法載入擴充功能：資訊清單檔案遺失或無法讀取」。按取消，到檔案總管確認哪一層直接看得到 manifest.json，再選一次。
🔁 你其實做過：上帝之眼那一課最常見的錯「解壓縮變成兩層」就是這個：打開資料夾要直接看到專案的檔案，看到的又是一個同名資料夾，就是多了一層。
關卡三 自己驗收（10 分鐘）
按工具列上你的圖示，照順序測這三件事：
- 小視窗最上面有「距離學測還有 ＿ 天」，天數合理
- 選 25 分鐘，按「開始專注」→ 開一個新分頁去
youtube.com，應該被換成提醒頁 - 在小視窗新增一個你常逛的網站（例如
x.com），開新分頁去那個網站，也應該被擋
✅ 三件事都對。截圖 ①：小視窗。截圖 ②：YouTube 被擋的提醒頁。
有哪一件不對？回到原本做外掛的那個對話（ChatGPT 的人回同一個聊天，VS Code 的人在同一個 Copilot 聊天），寫清楚你按了什麼、看到什麼：
💬 ChatGPT 的人哪裡壞了
我裝好了，可是＿＿＿＿＿＿（哪個按鈕、哪個畫面不對，越具體越好）。
這次不要打包 zip、不要執行程式。告訴我要改哪一個檔案，把那個檔案「完整的新內容」直接貼給我。💬 VS Code 的人哪裡壞了
我裝好了，可是＿＿＿＿＿＿（哪個按鈕、哪個畫面不對，越具體越好）。
請檢查這個資料夾的檔案，找出原因並修好，改完告訴我改了什麼、我要怎麼測試。ChatGPT 給你檔案全文後，照關卡四的方法換上去；Copilot 會自己改檔案。改完都要到 chrome://extensions 按 ↻ 再測一次。
🔁 你其實做過：上帝之眼那一課你練過「抓 AI 的錯」：AI 說做好了不算，你自己點過才算。上面 Copilot 把圖示做成 SVG，就是 AI 說「做好了」但其實壞掉的例子。
關卡四 改成你的（20 分鐘）
必做一圈、一圈只改一件事。做完截圖 ③ 就先去關卡五，還有時間再回來多改幾圈。
ChatGPT 的人
因為免費版不太能再打包 zip，請它「只給要改的那一個檔案」，你自己換上去。在原本那個對話裡貼：
💬 輸入給 ChatGPT每一圈（填你這圈要改的一件事）
這次不要打包 zip、不要執行程式。
只改一件事：＿＿＿＿＿＿
告訴我要改哪一個檔案，然後把那個檔案「完整的新內容」直接貼給我，我會整個複製去蓋掉舊的。
- 到你在關卡二選的那個資料夾，找到它說的那個檔案（例如
blocked.js） - 在檔案上按右鍵 →「開啟方式」→「記事本」
- Ctrl ＋ A 全選 → Ctrl ＋ V 貼上 → Ctrl ＋ S 存檔
- 回到
chrome://extensions，按卡片上的 ↻ - 重新點工具列圖示，或重新開被擋的網站，看改到了沒
它說要改兩個檔案，就一個一個換。換完記得按 ↻，不按的話 Chrome 還在跑舊的。
VS Code 的人
直接在同一個 Copilot 聊天說要改什麼，它會自己改檔案，改完一樣到 chrome://extensions 按 ↻。
💬 輸入給 Copilot每一圈
只改一件事：＿＿＿＿＿＿
改完告訴我改了哪些檔案、我要怎麼測試。不知道改什麼？挑一個
- 最穩的第一圈：提醒頁的鼓勵話改成每次從 10 句裡隨機挑一句（老師實測一次就成功）
- 整個換風格：說「整個外觀改成＿＿風格，功能都不要動，元素的 id 都不要改」（下圖四款都是這樣改出來的）
- 倒數改成算到分科測驗 7/10，或在學測倒數下面加一行分科倒數
- 專注時間多一個「自己輸入幾分鐘」
✅ 至少改成功一圈。截圖 ③：改過以後的樣子，旁邊寫一句你改了什麼。
🔁 你其實做過：遊戲三選一就是這樣一圈一圈做出來的：一次一件事、改完先自己玩一次、確定沒壞才做下一件。
關卡五 放上 GitHub，分享給同學（20 分鐘）
你改過的是電腦裡的檔案，ChatGPT 給的 zip 是舊的。先把現在這版重新壓縮：
- 到「下載」把舊的 zip 刪掉（免得等一下拿錯）
- 在你關卡二選的那個資料夾（直接看得到
manifest.json的那層）上按右鍵，找「壓縮」→ ZIP（Windows 版本不同，字可能是「壓縮為 → ZIP 檔案」或「傳送到 → 壓縮的 (zipped) 資料夾」） - 旁邊會多出一個新的 zip，記住它的檔名
接著放進你在遊戲課用的那個倉庫：
- 打開
github.com/shsh-tw/game-你的編號 - 按「Add file」→「Upload files」
- 按「choose your files」選新的 zip，下面寫一句 commit 訊息（例如「新增學測專注外掛」）→ 按「Commit changes」
Cloudflare 會像遊戲課一樣自動更新你的網站（老師實測 36 秒）。你的外掛就有了一個下載網址：
🔗 你的外掛下載網址編號和 zip 檔名換成你的
https://shsh-game-編號.pages.dev/你的檔名.zip先自己在瀏覽器打開這個網址，能下載到 zip 才算成功；打不開就再等一下、確認檔名有沒有打錯。
跟隔壁交換：
- 先到
chrome://extensions把你自己的外掛關掉（卡片右下的開關），不然兩個都會擋，分不出是誰的在動 - 把網址傳給隔壁，他下載、解壓縮、載入未封裝項目，裝你的；你也裝他的
- 用他的外掛測一次「開始專注 → 開 YouTube」
✅ 隔壁同學用你的網址裝好了你的外掛。交你的下載網址。
⚠️ 這個網址任何人都打得開，所以檔案裡不要放真實姓名或任何個資。
🔁 你其實做過：遊戲課你也是 push 到 GitHub、等 Cloudflare 一下就上線。不一樣的是那次放網頁，這次放 zip：GitHub 放什麼，網址就給什麼。
下課前
- 把截圖 ①～③ 收進你的 Notion「我的筆記」，寫一句今天做了什麼
- 回家想用：在自己的電腦用你的下載網址裝一次（步驟跟關卡二一樣）
- 這是共用電腦：到
chrome://extensions把今天裝的全部外掛（你的、同學的）都「移除」