X
    Categories: My_Note

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

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

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, 常用文件可見:

Chrome 架構說明文件

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

Tsung: 對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
Related Post