Chrome Extension 開發經驗篇 11 - 如何快速建立新的 Extension？

每次要開發 Extension 時，都要重新建立 manifest.json 設定檔，似乎有點麻煩，所以今天要介紹一個服務，能夠快速建立一個新的 Extension 專案。

快速建立新專案的好工具 Extensionizr

直接示範是最快的教學了，接下來就直接建立一個新專案的雛形。
Step 1. 進入 Extensionizr 網頁後，第一步就是選擇 Extension 的類型，這邊選擇 Browser action 為例。如圖 1 所示。
圖1. 選擇 Extension 類型

Step 2. 再來可以選擇要不要後台頁面、事件頁面、選項頁面等等。如圖 2 所示。
圖2. 設定基本配置

Step 3. 接著就是設定權限的部分。如圖 3 所示。
圖3. 設定權限

溫馨小提醒：如果不懂選項是做什麼的，可以將滑鼠移至旁邊的問號，它會顯示該選項的介紹，再看不懂的話，可以用滑鼠左鍵點擊問號以開啟官網文件看更詳細的內容。另外，URL permissions 的部分用『分號』隔開就好，不要含有空白字元。

Step 4. 設定完成就可以點擊『Download it!』下載專案雛形。如圖 4 所示。
圖4. 下載專案雛形

Step 5. 下載後，會得到一個 zip 壓縮檔，解壓縮後的資料夾就是專案的雛形。如圖 5 所示。
圖5. 解壓縮

Step 6. 接著先載入到 Chrome Browser 執行，檢查功能正不正常。如圖 6 所示。
圖6. 載入至 Chrome Browser

說明：這邊的錯誤訊息是說我權限設定的部分錯誤，後來去看一下 manifest.json 設定檔，發現是多了空白字元。如圖 7 所示。
圖7. 權限設定多了空白字元

移除空白字元後，重新載入就正常囉！ 如圖 8 所示。
圖8. 重新載入

Extensionizr 的小缺憾

以上步驟都沒問題後，接下來看一下專案雛形的資料夾，大致上都沒問題，唯有一點讓人匪夷所思，在 Step 2 的時候，有勾選加入 jQuery，但沒想到它卻包了一堆檔案在裡面，而且沒有任何地方有引用 jQuery。如圖 9 所示。
圖9. 專案雛形資料夾

溫馨小提醒：如果需要使用 jQuery, AngularJS 等其他資源，請自行下載，不要使用 Extensionizr 的加入。若不小心勾選也沒關係，將 js 資料夾下的 jquery 整個移除，專案還是能正常運作。

結語：

有了 Extensionizr 的輔助工具，在開發新專案時能節省許多時間呢。如果您有問題，歡迎在下方留言。謝謝！