iT邦幫忙

DAY 4
0

Chrome Extension 學習筆記系列 第 4

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

  • 分享至 

  • twitterImage
  •  

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. 重新載入專案


上一篇
Chrome Extension 開發入門篇 03 - Chrome Extension 學習資源
下一篇
Chrome Extension 開發入門篇 05 - Chrome Extension 設定檔
系列文
Chrome Extension 學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言