大概七年前看到同事有做了一個瀏覽器擴充程式，當時的我也是躍躍欲試，沒想到就這樣過了七年，直接變成大叔了。
這次在想 2023 鐵人賽的題目，突然想起了這件事，於是就快速地學習了一下，暸解從 0 到 1 的過程，打鐵趁熱寫篇文章記錄一下。
先上擴充程式連結：https://chrome.google.com/webstore/detail/report-website-issues/ligflmchialjgapdcgadgibgkabckglh
Chrome 瀏覽器擴充程式：Report website issues
目標與需求
接觸無障礙網頁設計之後，都沈浸在開發無障礙 UI Framework。後來想想好像應該開發一些成本低、易用、立即有幫助的簡單功能，潛在幫助大家，讓上網的環境更好，於是就有了以下理想、目標、需求：
- 使用者可以簡單回報目前瀏覽網頁的問題：
讓使用者輸入最少的情況，只收集「使用者發現的問題分類」、「目前網址」、「時間」、「作業系統/瀏覽器資訊」以及「聯絡資訊（選填）」。 - 我透過收集到的資料，回傳給網站客服。
- 網站客服收到網站回饋。
- 網站工程師修正問題。
- 使用者下次再上網發現問題解決，開心了。
- 我透過收集資料間接幫助修網站，開心了。
- 網站客服發現使用者黏著度上升，開心了。
- 網站工程師修正程式碼提升技能，開心了。
可能會有人覺得使用者直接面對網站客服不就好了嗎？
我的想法是處於遇到障礙的情境下，使用者跟網站客服的溝通大部分都是雙輸的局面，尤其碰到其實是技術層面的問題。
例如使用者說「我的鍵盤沒辦法瀏覽你們的網頁」，但客服卻說「我的可以喔，麻煩您再試試」，然後差不多就鬼打牆，兩邊都覺得對方很爛，因為前者是談鍵盤焦點，後者可能只是按向下鍵捲動畫面。
這是個簡單例子，主要描述認識的東西不同，解讀不同。但我也不想讓使用者看太多字或輸入太多東西提高回報障礙，所以中間墊一層可能是比較好的方式，等日後 AI 變很強，就可以幫忙通靈了。
那為什麼要用瀏覽器擴充程式？
因為這樣子就不需要讓使用者輸入作業系統/瀏覽器版本、時間、網址了，只需要勾選分類，送出！比起前往表單，使用擴充程式的方便性更大。
現實考量
因為個人開發、只會切版跟簡單 javascript，也不會寫後端，所以必須想一些簡易的方法，還有思考瀏覽器那麼多種要挑哪個來做？於是開始思考眾多限制下的實行方案：
- Chrome 市場占比高、安裝意願也高，所以只鎖定 Chrome。有需要之後再做 Safari、Firefox、Edge。Edge也可以裝 Chrome 的擴充程式，所以選 Chrome CP值很高啊～！
- 不會寫後端但需要將得到的資訊儲存，然後也因為只鎖定 Chrome，所以只想用 google 的產品：google sheet。
- 要將資料直接存到 google sheet 還是要寫很多程式，所以想到可以跟 google sheet 溝通的 google form，它可以跟 google sheet 連結。
- 實驗如果使用 html 的 <form> ，能不能將資料塞進 google form，於是找到了這篇文章：https://spreadsheet.dev/submit-responses-to-google-form-apps-script
- 寫一點點 javascript 提升UX，應該不是難事，不知道就問 AI
學習 Chrome 擴充程式
確定以上都能實作後，就開始學 Chrome 擴充程式要怎麼做，於是直接去翻最新的書：https://learning.oreilly.com/library/view/building-browser-extensions/9781484287255/，或是一些參考連結（注意開發版本）：
[Chrome Extension] API 筆記 | PJCHENder 未整理筆記
keywords: Chrome Extensionpjchender.dev
簡單介紹一下開發 Chrome 瀏覽器擴充程式內容：
- manifest.json：最重要，包含了擴充程式的所有設置、描述和功能概要，例如需要使用到的權限。如果有使用第 2 點到第 6 點，都要寫在 manifest.json，而這個檔案在最後上架的時候， google 會檢查。
最新版本是 V3 ，所以在挑選線上參考連結閱讀時，要注意版本。 - Background Script：背景中運行，通常用來監聽事件和處理請求。
- popup.html：在擴充程式按一下跳出來的視窗畫面。
- options.html：在擴充程式按右鍵，裡面一個叫「選項」的選單按鈕，點擊後會另開視窗，是一個獨立頁面，可以在這個頁面做更多的功能、描述與使用者互動，各位可以開開看自己常用的擴充程式在這一頁有什麼樣的互動。
- Content Script：目前所在網頁與擴充程式的交流，例如用了擴充程式，就讓目前網頁有下雪效果。
- devtools.html：可以建立一個檢查程式碼時的頁面
這次實際用到只有 1, 3, 4，實作完之後，如何測試 Chrome 擴充程式呢？
其實很簡單：
- 在 Chrome 的右上角「…」> 擴充功能 > 管理擴充功能
- 打開「開發人員模式」，在左側會有三個按鈕
- 選擇「載入未封裝項目」
- 再選擇你的開發資料夾
「開發人員模式」按鈕與「載入未封裝項目」按鈕位置示意圖
然後每次修改後，都需要更新擴充程式，更新按鈕在卡片的右下角，點擊後再重新測試你的擴充程式。
擴充程式列表裡的項目
上架與發佈
確定都沒什麼問題之後，就要到 Chrome Web Store Developer 註冊與上架
- https://developer.chrome.com/docs/webstore/register/
跟著文件指示註冊 - 註冊完後需要付款 5 美元開通
- 進到開發者 Dashboard 畫面
開發者儀表板畫面示意，左側為選單，右側為列表
按新增商品跟著指示走，把資料填一填即可，大致如下：
- 套件壓縮檔
- 可以放 Youtube 連結、首頁連結等
- 可以放五張螢幕截圖，1280*800 或 640*400，JPEG 或 24 位元 PNG (無 alpha 透明層)，至少 1 張
- 小 icon：440*280
- Banner：1400*560
- 可以創建 GA4 資源
但有一個重點是，如果你有需要用到使用者的權限，是需要描述清楚的，而且需要附帶一個隱私權政策的網址。如果你沒有，可以使用免費的線上服務，創建一個頁面，裡面寫好隱私權政策的內容，再把網址貼進去即可。
最後就是提交了，審核時間不一定，我等了三天，看 Google 心情，後續每次修改，都需要再提交一次，所以如果是要經營的話，要注意上架審核的時間，如果時間急迫又被退件，那就麻煩了。但應該會有不重新審核就可以更新內容的技巧，但那離我太遠了。
總結
雖然只有用到簡單的 Html、CSS、Javascript 沒遇到什麼困難，但其實這樣就可以打造一個對人有用的產品了，覺得設計師/工程師們都可以多嘗試一點，說不定一個爆紅的產品就又出現了。
而我也只想要用這樣可以快速、不複雜的方式打造產品，看能不能多幫助上網會遇到困難的人，能幫一個是一個，所以也用了 ChatGPT 幫我翻譯內容成英文，放到 Producthunt 上看有沒有人會看到而使用。
Producthunt 的介紹頁
最後，邊練習擴充程式的同時，2023 鐵人賽的題目我也想出好了，希望可以順利完賽～！
