[筆記] 從零開始製作 Chrome 套件到上架商店

專案緣起

在 Alpha Camp 擔任實習助教的一個好處，是可以參加大約每兩週舉辦一次的 Meetup — 不僅可以聽到他人分享獨特的專案和技術，有時也能給自己一些機會去挑戰和探索自己未知的領域。

一個多月前，公佈了隔一次的主題是「製作 Google Chome 套件」，且開放有興趣的與會者自己摸索和製作，最後再與大家分享。當時內心馬上冒出了兩種心情和想法：

1. 眉頭一皺：這是什麼領域？會用到什麼技術？該製作什麼主題的套件？
2. 內心雀躍：好酷的未知領域，如果能自己做出個好用的套件，一定很棒！

老實說，內心雀躍的心情馬上壓過所有的情緒，因此我很快就做出了決定。但馬上面臨的是主題挑選 — 在向朋友們收集可能的需求，但沒有找到合適的主題後，我開始思考著：「我在開發網路應用程式的過程中，是什麼行為不時吃掉了我很多時間？」 這可能就是我的需求，也可能會是其他開發著的需求 — 一個 Side Proeject 因此誕生。

專案介紹

前端切版時，我自己常見的需求有兩個：「依照設計規格產生並放置 Placeholder 圖片」及「找尋可以免費使用或商用的圖片置入」，這兩個需求都不是會花費我很多時間的行為，但每次在找尋網站、連結、閱讀使用文件的一點小時間，累積起來卻會顯得很沒有效率，因此這次的 Chrome 套件分為三大功能，並分別透過以下幾個使用者故事來簡述功能：

產生 Placeholder 圖片

1. 使用者在點擊 Popup 按鈕後，可以看到 Placeholder 圖片的產生器
2. 使用者在產生器上輸入 Placeholder 圖片的規格（包含：尺寸、檔案格式、背景顏色、圖片上顯示的文字）設定後，可以獲得圖片的連結
3. 使用者在獲得 Placeholder 圖片後，可以點擊「Copy」按鈕自動複製連結
4. 使用者在獲得 Placeholder 圖片後，可以點擊「Open」按鈕在新的頁面開啟該圖片，以方便右鍵下載

免費圖片快搜器

1. 使用者在點擊 Popup 按鈕後，可以看到免費圖片的快速搜尋器
2. 使用者在搜尋器輸入照片關鍵字後，可以點擊任意一個網站（Pixabay、Pexels…