大概七年前看到同事有做了一個瀏覽器擴充程式,當時的我也是躍躍欲試,沒想到就這樣過了七年,直接變成大叔了。
這次在想 2023 鐵人賽的題目,突然想起了這件事,於是就快速地學習了一下,暸解從 0 到 1 的過程,打鐵趁熱寫篇文章記錄一下。
先上擴充程式連結:https://chrome.google.com/webstore/detail/report-website-issues/ligflmchialjgapdcgadgibgkabckglh
目標與需求
接觸無障礙網頁設計之後,都沈浸在開發無障礙 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 瀏覽器擴充程式內容:
- 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 上看有沒有人會看到而使用。
最後,邊練習擴充程式的同時,2023 鐵人賽的題目我也想出好了,希望可以順利完賽~!