叫GPT寫Chrome插件前，這些架構問題你想清楚了嗎

這篇沒有一言不合，但我覺得剛好是前一篇的延伸，所以寫一下。Chrome 插件要的跟爬蟲程式一樣，安全、穩定、可維護，不是你貼一段 manifest就能開始爬爬爬。

問GPT之前先問問自己

① 想解決什麼痛？自動登入打卡？讀文章標重點？還是背景抓 API 當爬蟲？

② 觸發時機？點擊圖示、右鍵選單、還是 Service Worker 定時？

③ 輸出到哪裡？localStorage、IndexedDB、還是直接 POST 回你的伺服器？

例如：生成一個 MV3 Chrome 插件，每 10 分鐘背景抓 https://news.site/api/latest， 去重後存入IndexedDB，並在 toolbar badge 顯示未讀數，點擊圖示開 popup.html 列表。

Manifest 不是裝飾品

以下省略manifest_version、permissions、service_worker三千字。

① MV3 ONLY！別再 MV2 了，2025下架了。

② 權限最小化：只給 storage、alarms、scripting，不要一上來就要 tabs。

③ Action、Options、Popup講清楚要不要 badge、要不要UI，還是要設定頁？

架構先畫好

夾層是什麼？該夾層要負責什麼？你該給GPT的指令是什麼？這些要搞清楚啊！

background (service worker) 、content script、popup.html + popup.js、options.html這些要講清楚。

三大神器要用起來啊

① Fetch API

背景直接抓，不受 CORS 限制，但MV3 還是host_permissions的喔。

② chrome.scripting.executeScript

動態注入函式到當前分頁，這樣連 DOM 都可以改。

③ webRequest / declarativeNetRequest：想擋廣告、改 header，先想清楚再加權限。

錯誤處理

這可以不用講了吧～手指乙酸！

資安

別把 Token 寫死！要存 API key → chrome.storage.sync + options.html 輸入，要和 GPT 說清楚用 AES-CTR 加密後再存，永遠不要硬編到程式裡、放 GitHub上，除非你真的很喜歡被白嫖。

熱重載 & Debug

開場都一樣，chrome://extensions → 開發者模式→ 允許 Service Worker 背景。

注意！chrome.runtime.getBackgroundPage() 無法用於 MV3 的替代鏈chrome.action.openPopup()！然後Console 右上角切到 Service Worker看 log；每次改完 manifest 都要reload；改 popup.js Ctrl-R就可以了。

Badge＆Toast

點擊圖示開 popup，window.open 外鏈開始爬。背景抓取成功用 console.log 就好，不要咚咚咚一直通知，會煩死使用者。

打包、簽名、上架

這個不用講了吧....................乙酸！

啊那如果連五美金的上架費都想躲掉，那你還是別玩vibe coding好了。

測試

dry-run跟debug都要，正式上架版記得移除掉。如果有CLI 加 ?debug=true 來讀 URL 參數並決定是否 Log。

參數化

跟爬蟲的一樣，比如插件啟動先 fetch config.json，動態建 alarm；若下載失敗，改用內建 default。

以下一樣省略幾千字，懂的就懂。

********這是轉生輪迴路*********

啊如果你連 MV3、storage quota、host_permissions 是啥都分不清，那拜託你不要發文問為什麼插件做不出來。

總之，給 GPT 的指令越精準，產出的代碼就越不需要你一直debug。翻船不是 GPT 的錯，通常是你自己連需求都講不清處。

本文原發表於 2025/07/03 的 Facebook 貼文，原文照登，僅調整網頁排版；文中提及的產品、價格與活動以當時為準。