如何開發(fā)一款自己的Chrome擴(kuò)展插件
說到現(xiàn)如今最流行的瀏覽器，那么一定是chrome，無論是它的速度，還是它的穩(wěn)定性，還是它的簡潔，都讓人愛不釋手，此外，更多的人選擇它的理由是它有著豐富的擴(kuò)展插件，這些擴(kuò)展插件讓你的瀏覽器變得異常強大，讓你的瀏覽器不僅僅是瀏覽器。
Chrome擴(kuò)展結(jié)構(gòu)
chrome的擴(kuò)展是以.crx結(jié)尾的安裝包，如果你把它下載下來，并把它重命名為.rar壓縮包文件，然后你就可以使用壓縮軟件對它進(jìn)行解壓，加壓之后，就會發(fā)現(xiàn)其實chrome的擴(kuò)展包里面就是一些js，css，html文件，可以說你只要會寫前端，那么開發(fā)一個chrome擴(kuò)展插件將會非常容易。
在這些文件中，有一個manifest.json文件，它是擴(kuò)展的描述文件，定義了擴(kuò)展的名稱和版本號等信息。
{
"name": "BrowserActionExtension",
"version": "0.0.1"
"manifest_version": 2,
"browser_action": {
"default_title": "That's the tool tip",
"default_popup": "popup.html"
}
}在這個配置文件中，你還可以添加其它屬性，只要你的擴(kuò)展需要的屬性，你都可以在這里添加配置。
每一個擴(kuò)展都有一個被瀏覽器運行的背景頁，此外還有事件頁面，背景頁面一直都是激活狀態(tài)，而事件頁面只是在觸發(fā)事件的時候才會激活，因此為了節(jié)省內(nèi)存和提高瀏覽器的性能，盡可能選擇事件頁面。兩者通過persistent屬性進(jìn)行區(qū)分。
"background": {
"scripts": ["background.js"],
"persistent": false/true
}
當(dāng)我們的擴(kuò)展想要訪問瀏覽器當(dāng)前頁面的dom樹的時候，我們需要使用內(nèi)容腳本，這些腳本會在頁面刷新的時候執(zhí)行。
"content_scripts": [
{
"matches": ["https://*/*", "https://*/*"],
"js": ["content.js"]
}
]
對于擴(kuò)展的UI界面，我們可以通過browser_action屬性進(jìn)行配置，通過此屬性，我們可以設(shè)置擴(kuò)展的圖標(biāo)，設(shè)置點擊彈出的頁面。
"browser_action": {
"default_icon": {
"19": "icons/19x19.png",
"38": "icons/38x38.png"
},
"default_title": "That's the tool tip",
"default_popup": "popup.html"
}
除了browser_action可以配置擴(kuò)展圖標(biāo)之外，page_action可以配置圖標(biāo)，兩者的區(qū)別是，browser_action總是顯示在擴(kuò)展欄，而page_action則是滿足一定條件才會顯示，比如頁面有vue腳本時候才會顯示vue調(diào)試圖標(biāo)。
"page_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "Google Mail",
"default_popup": "popup.html"
}
chrome被開發(fā)人員所喜愛的另一個原因是它提供了非常強大的調(diào)試工具欄，而我們的擴(kuò)展也是可以加入到調(diào)試工具欄的。
通過使用devtools_page屬性，我們就可以將我們的擴(kuò)展加入到調(diào)試工具欄的一個tab中。
"devtools_page": "devtools.html"
我們在devtools.html中只需要添加一個js引入語句就可以。
"devtools_page": "devtools.html"
在devtools.js文件里，我可以可以放入我們實際的擴(kuò)展內(nèi)容。
chrome.devtools.panels.create(
"MyExtension",
"img/icon16.png",
"index.html",
function() {
}
);
擴(kuò)展能夠做什么
擴(kuò)展能夠做什么主要取決于瀏覽器為我們提供了哪些API，慶幸的是，chrome為我們提供了足夠多好用的API。
- 我們可以操作用戶的書簽和瀏覽記錄
- 我們可以控制下載，管理下載內(nèi)容
- 我們可以監(jiān)聽網(wǎng)絡(luò)請求，監(jiān)聽事件響應(yīng)
- 我們可以修改界面樣式，可以添加自定義css
- 我們可以在頁面添加想要的元素
總之，chrome幾乎為我們提供了完整控制瀏覽器的擴(kuò)展api，正是有了這些api，才誕生了幾十萬的擴(kuò)展插件。
擴(kuò)展的調(diào)試
在我們本地開發(fā)好擴(kuò)展之后，我們可以通過本地瀏覽器進(jìn)行調(diào)試。
首先，我們需要先進(jìn)入擴(kuò)展程序頁面，打開開發(fā)者模式
然后，我們可以通過選擇加載已解壓的擴(kuò)展程序加載我們的擴(kuò)展。
最后，我們通過在控制臺輸出調(diào)試信息來調(diào)試我們的擴(kuò)展。
完整的示例
manifest.json：
{
"name": "BrowserExtension",
"version": "0.0.1",
"manifest_version": 2,
"description" : "Description ...",
"icons": { "16": "icons/16x16.png", "48": "icons/48x48.png", "128": "icons/128x128.png" },
"omnibox": { "keyword" : "yeah" },
"browser_action": {
"default_icon": { "19": "icons/19x19.png", "38": "icons/38x38.png" },
"default_title": "That's the tool tip",
"default_popup": "browseraction/popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"chrome_url_overrides" : {
"newtab": "newtab/newtab.html"
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}],
"devtools_page": "devtools/devtools.html"
}background.js：
// omnibox
chrome.omnibox.onInputChanged.addListener(function(text, suggest) {
suggest([
{content: "color-divs", description: "Make everything red"}
]);
});
chrome.omnibox.onInputEntered.addListener(function(text) {
if(text == "color-divs") colorDivs();
});
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
switch(request.type) {
case "color-divs":
colorDivs();
break;
}
return true;
});
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
switch(port.name) {
case "color-divs-port":
colorDivs();
break;
}
});
});
// send a message to the content script
var colorDivs = function() {
chrome.tabs.getSelected(null, function(tab){
chrome.tabs.sendMessage(tab.id, {type: "colors-div", color: "#F00"});
// setting a badge
chrome.browserAction.setBadgeText({text: "red!"});
});
}
popup.html：
<script type="text/javascript" src="popup.js"></script>
<div style="width:200px">
<button id="button">Color all the divs</button>
</div>
popup.js：
window.onload = function() {
document.getElementById("button").onclick = function() {
chrome.extension.sendMessage({
type: "color-divs"
});
}
}
devtools.html：
window.onload = function() {
var port = chrome.extension.connect({ name: "color-divs-port" });
document.getElementById("button").onclick = function() {
port.postMessage({ type: "color-divs"});
}
}
content.js：
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
switch(message.type) {
case "colors-div":
var divs = document.querySelectorAll("div");
if(divs.length === 0) {
alert("There are no any divs in the page.");
} else {
for(var i=0; i<divs.length; i++) {
divs[i].style.backgroundColor = message.color;
}
}
break;
}
});
總結(jié)
chrome瀏覽器的擴(kuò)展開發(fā)其實并不難，用到的知識都是基礎(chǔ)的js，html，css，我們只需要知道一些和瀏覽器交互的屬性和操作的api，就可以開發(fā)出一個屬于自己的瀏覽器擴(kuò)展。
