1. 程式人生 > >開發Chrome 擴充套件程式Hello

開發Chrome 擴充套件程式Hello


chrome擴充套件程式是基於HTML+CSS+Javascript的工程。
所以開發Web的同學開發這個瀏覽器擴充套件學習起來是非常方便的。專案結構主要包含一個manifest.json檔案來儲存專案資訊。本文參考官方地址:https://developer.chrome.com/extensions

  1. 建立專案資料夾hello
  2. 建立manifest.json檔案
    json { "name": "Hello Extensions", "description" : "Base Level Extension", "version": "1.0", "manifest_version": 2 }
  3. 加入icon hello_extensions.png和html hello.html頁面(圖片和html頁面可以自己自定義,這裡就不貼出來了。)
  4. 修改manifest.json
{
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2,
    //以下為新加內容,指定icon和點選的時候彈出的html頁面
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }

測試:

開啟chrome,點開Omnibox--> 更多工具-->擴充套件程式
開啟開發模式-->載入已解壓的擴充套件程式-->然後選擇自己的專案目錄即可發現自己的擴充套件在瀏覽器上了。然後點選圖示即可。