Chrome Extensions (外掛) 開發入門筆記

Google Chrome 的 Extension (外掛、擴充功能) 要如何開發製作? 簡易入門筆記.

• 註1: 不知道什麼是 Google Extension 可見此篇: What are extensions? - Google Chrome
• 註2: 此篇範例在 Windows、Mac、Linux 都可製作執行.

Chrome Extensions (外掛) 開發入門筆記

此篇先記錄非常簡單的 Hello 版入門, 下述範例基本架構如下:

• manifest.json: 定義外掛程式版本、名稱、描述、權限、執行的 ICON、HTML 檔名哪邊等等.
• icon.png: 顯示於瀏覽器右上角點擊用的 Icon 圖片
• popup.html: 點擊上述 Icon 後, 瀏覽器會下拉出一個小視窗, 會將此 html 內容載入進來(manifest.json 定義要載入此 html)
• popup.js: popup.html 裡面有寫說要載入使用此 js 檔

此篇主要參考此篇(範例全部取用此篇): Getting Started: Building a Chrome Extension - Google Chrome

Chrome Extensions Hello World 版 (Flickr)

官方範例是會產生一個 Icon, 點 Icon 會去 Flickr Search 圖片, 然後展開顯示圖片, 製作步驟如下:

1. mkdir /tmp/hello # 建立一個目錄 (以 Linux 版為例, Windows、Mac 隨意找地方建立目錄即可)
2. 將下述檔案下載存入此目錄(/tmp/hello)
   1. manifest.json
   2. icon.png
   3. popup.html
   4. popup.js
3. 到此就已經完成.
4. 註: 範例中的 Flickr API key 已經過期, 需要重新申請, 或者去 Chrome 說明頁看有沒有新的

再來安裝此 Extension, 步驟如下: (詳細步驟可見此篇: 管理您的擴充功能 - Chrome說明)

1. 網址列輸入 chrome://extensions
2. 勾選 開發人員模式 (Developer mode)
3. 點選 載入未封裝擴充功能 (Load unpacked extension)
4. 選擇 /tmp/hello 資料夾即可.
5. 再來就會看到 Chrome 的右上方出現一個新的 Icon, 點選就會秀出 Flickr 照片的搜尋結果.

再來要深入寫 Extension, 常用文件可見:

• Developer's Guide - Google Chrome - 開發者必看文件
• Chrome Platform APIs - Google Chrome - Google Platform 有哪些 API 可以用

Chrome 架構說明文件

下述兩篇建議要深入撰寫前, 可以仔細研讀, 特別是這兩篇對 Chrome 架構圖的部分, 會對撰寫有非常大的幫助.

• Developing Google Chrome Extensions | Nettuts+
• Chrome插件（Extensions）開發攻略

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章