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 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應用商店還不能下載安裝