chrome擴充套件程式開發

wejoy_whoami發表於2019-03-21
Chrome套件

開發chrome extensions

chrome extension開發官網地址

developer.chrome.com/extensions

根據文件要求，開發外掛有兩種模式：

  • popup html模式
  • content_scripts模式

先講一下兩種模式的共同點，一個chrome外掛需要一個配置檔案，manifest.json:

{
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2
}
複製程式碼

這三個欄位是extensions的三要素，必須要宣告，不然在chrome新增附加元件時會提示錯誤

先介紹下popup html

"browser_action": {
    "default_popup": "./src/index.html",
    "default_icon": "./assets/whoami.jpg"
}
複製程式碼

whoami.jpg為外掛圖示，index.html為當你點選外掛之後展示的內容。例如草料外掛，index.html裡面及js css html三駕馬車開發模式，這裡不贅述

再介紹下content_scripts

這個就比較高階了，即script注入，這是在瀏覽器tab開啟時自動執行的，所以安全係數也會相對要求比較高

"permissions": ["activeTab"],
"content_scripts": [  
    {  
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "css": [
            "./lib/font-awesome/font-awesome.min.css",
            "./lib/APlayer/APlayer.min.css",
            "./music/music.css"
        ],
        "js": [
            "./lib/jquery/jquery-3.2.1.min.js",
        ]
    }
]
複製程式碼

如果不宣告permissions，會在每個tab頁都注入當前js，安全係數比較低，在chrome外掛釋出提交稽核時比較難過，宣告activeTab會比較容易過
這裡三個欄位，matches宣告匹配網址，css和js即為注入的js css程式碼

除錯chrome extensions

開啟 chrome://extensions/

chrome擴充套件程式開發
載入已解壓的擴充套件程式，即可，在瀏覽器中頭部標籤就會顯示當前的外掛。可以開始測試你的外掛了

釋出chrome extensions

chrome.google.com/webstore/de… 以上為釋出地址，需要一個chrome賬號，這個賬號需要花費5?，之後可以免費釋出，支付賬號費需要使用visa卡
註冊賬號： chrome.google.com/webstore/de…

chrome extension demo

git地址：github.com/xxoojs/iMus…
可以直接下載安裝到chrome瀏覽器，iMusic外掛在寫文章時還在稽核中，chrome應用商店還不能下載安裝

相關文章