iT邦幫忙

DAY 11
1

Chrome Extension 學習筆記系列 第 11

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 整個移除,專案還是能正常運作。


上一篇
Chrome Extension 開發入門篇 10 - Chrome Extension 內容腳本
下一篇
Chrome Extension 開發經驗篇 12 - 如何快速重新載入 Extension?
系列文
Chrome Extension 學習筆記30

尚未有邦友留言

立即登入留言