[cloud] 最簡單的 Chrome Extension

最簡單的 Chrome Extension

Jing (mqJing@gmail.com)

預計學習時間: 10 分鐘

GoogleDoc version

 

這份教學基本上就是直接參考 Google 教學文件 (here), 我只是加上圖以及一些多餘的解釋.

Outline

1. 最簡單的 manifest.json 範例
2. 加入最簡單的互動程式

Download:

• manifest.json, manifest.json (ver.2), popup.html, popup.js, project

 

最簡單的 manifest.json 範例

Step 1: 建立一個檔案 manifest.json

 

安裝 extension
Step 1: [右上角的板手 icon] -> [工具] -> [擴充功能]

Step 2: 勾選 [開發人員模式] -> [ 載入未封裝擴充功能]

Step 3: 選擇你的 extension 專案目錄

驗證

icon 出現在右上角

成功!

---

加入最簡單的互動程式

(加入互動程式碼, 顯示來自 flick 的圖片)

Step 1: 在 manifest.json 加入 pop up 動作處理器   (注意, 要有逗號)

...
"browser_action": {
   "default_icon": "icon.png" ,
  "default_popup": "popup.html"
},
...

 

並且把下面兩個互動程式碼放到你的資料夾中,

popup.html, popup.js

重新載入 extension
Step 1: [右上角的板手 icon] -> [工具] -> [擴充功能]
測試:

成功!

Enjoy!
by Jing.

Reference:

1. http://code.google.com/chrome/extensions/getstarted.html