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 圖片, 然後展開顯示圖片, 製作步驟如下:
- mkdir /tmp/hello # 建立一個目錄 (以 Linux 版為例, Windows、Mac 隨意找地方建立目錄即可)
- 將下述檔案下載存入此目錄(/tmp/hello)
- 到此就已經完成.
- 註: 範例中的 Flickr API key 已經過期, 需要重新申請, 或者去 Chrome 說明頁看有沒有新的
再來安裝此 Extension, 步驟如下: (詳細步驟可見此篇: 管理您的擴充功能 - Chrome說明)
- 網址列輸入 chrome://extensions
- 勾選 開發人員模式 (Developer mode)
- 點選 載入未封裝擴充功能 (Load unpacked extension)
- 選擇 /tmp/hello 資料夾即可.
- 再來就會看到 Chrome 的右上方出現一個新的 Icon, 點選就會秀出 Flickr 照片的搜尋結果.
再來要深入寫 Extension, 常用文件可見:
- Developer's Guide - Google Chrome - 開發者必看文件
- Chrome Platform APIs - Google Chrome - Google Platform 有哪些 API 可以用
Chrome 架構說明文件
下述兩篇建議要深入撰寫前, 可以仔細研讀, 特別是這兩篇對 Chrome 架構圖的部分, 會對撰寫有非常大的幫助.