[好讀版]
每次要開發 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 整個移除,專案還是能正常運作。