Chrome Extension 開發入門篇 04 - Chrome Extension 開發環境介紹

Chrome Extension 的開發環境非常的簡單，只需要準備下面兩樣東西即可。

1. 桌面版 Chrome Browser (目前手機版尚未支援 Extension)
2. 文字編輯器 (推薦使用 Sublime Text 3)

那接下來，找個範例來練習一下。

Step 1. 首先從官方提供的範例中，找一個你喜歡的範例，然後下載下來。(這邊使用 Speak Selection 作為教學範例)

Step 2. 下載後，將 zip 檔解壓縮。

Step 3. 進入 Chrome Browser 的擴充功能管理頁(chrome://extensions/)，啟用『開發人員模式』。如圖 1 所示。

Step 4. 點選『載入未封裝擴充功能』，選擇剛才解壓縮的專案資料夾。如圖 1 所示。
圖1. 啟用開發人員模式並載入未封裝擴充功能

Step 5. 安裝完後，可以在擴充功能管理頁看到 Speak Selection，而且 Chrome Browser 的右上角新增了一個按鈕。如圖 2 所示。
圖2. 載入成功

Step 6. 開啟文字編輯器，修改專案(以改專案名稱為例)。如圖 3 所示。
圖3. 修改專案名稱

Step 7. 每次修改後，需要在『擴充功能管理頁』重新載入 Extension 專案。如圖 4 所示。
圖4. 重新載入專案

結語：

看完這篇後，是不是覺得開發環境很簡單呀！如果您有問題，歡迎在下方留言。謝謝！