開發Chrome 擴充套件程式Hello
阿新 • • 發佈:2018-11-11
chrome擴充套件程式是基於HTML+CSS+Javascript的工程。
所以開發Web的同學開發這個瀏覽器擴充套件學習起來是非常方便的。專案結構主要包含一個manifest.json
檔案來儲存專案資訊。本文參考官方地址:https://developer.chrome.com/extensions
- 建立專案資料夾hello
- 建立manifest.json檔案
json { "name": "Hello Extensions", "description" : "Base Level Extension", "version": "1.0", "manifest_version": 2 }
- 加入icon
hello_extensions.png
和htmlhello.html
頁面(圖片和html頁面可以自己自定義,這裡就不貼出來了。) - 修改
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
--> 更多工具
-->擴充套件程式
開啟開發模式
-->載入已解壓的擴充套件程式
-->然後選擇自己的專案目錄即可發現自己的擴充套件在瀏覽器上了。然後點選圖示即可。