摘要：配置文件每一個(gè)擴(kuò)展都有一個(gè)格式的文件，叫。此消息發(fā)送后會(huì)觸發(fā)擴(kuò)展內(nèi)每個(gè)頁(yè)面的事件。和持續(xù)長(zhǎng)時(shí)間的保持會(huì)話需要在和擴(kuò)展建立一個(gè)長(zhǎng)時(shí)間存在的通道。內(nèi)容腳本發(fā)送消息到擴(kuò)展程序建立通道，并給通道命名利用通道發(fā)送一條消息。

這次的練習(xí)是做一個(gè)Chrome的擴(kuò)展，分享一下入門開發(fā)過(guò)程。因?yàn)樵谙鬟f那塊糾結(jié)了特別久，所以我會(huì)重點(diǎn)總結(jié)消息傳遞那塊。

這次做這個(gè)插件的功能很簡(jiǎn)單，就是點(diǎn)擊按鈕后可以對(duì)當(dāng)前網(wǎng)頁(yè)的模塊進(jìn)行選擇隱藏。
做這個(gè)插件一方面是練習(xí)實(shí)例，還有一方面是，有的時(shí)候查資料啊，邊上總有很多花花綠綠動(dòng)來(lái)動(dòng)去的小廣告！
很煩有木有，還根本不能關(guān)閉！就算有關(guān)閉按鈕，點(diǎn)擊了竟然還跳轉(zhuǎn)到廣告頁(yè)面了(?Д?≡?Д?)
所以就想做個(gè)小插件，讓自己可以選擇隱藏這些不想看的模塊。

每一個(gè)擴(kuò)展都有一個(gè)JSON格式的manifest文件，叫manifest.json。

所以第一步我們將創(chuàng)建一個(gè)manifest.json文件。如下：

{ 
    "manifest_version": 2, //固定的
    "name": "Cissy"s First Extension", //插件名稱
    "version": "1.0", //插件使用的版本
    "description": "The first extension that CC made.", //插件的描述
    "browser_action": { //插件加載后生成圖標(biāo)
        "default_icon": "cc.gif",//圖標(biāo)的圖片
        "default_title": "Hello CC", //鼠標(biāo)移到圖標(biāo)顯示的文字 
        "default_popup": "popup.html" //單擊圖標(biāo)執(zhí)行的文件
    }, 
    "permissions": [ //允許插件訪問(wèn)的url
        "http://*/", 
        "bookmarks", 
        "tabs", 
        "history" 
    ], 
    "background":{//background script即插件運(yùn)行的環(huán)境
        "page":"background.html"
        // "scripts": ["js/jquery-1.9.1.min.js","js/background.js"]//數(shù)組.chrome會(huì)在擴(kuò)展啟動(dòng)時(shí)自動(dòng)創(chuàng)建一個(gè)包含所有指定腳本的頁(yè)面
    }, 
     "content_scripts": [{  //對(duì)頁(yè)面內(nèi)容進(jìn)行操作的腳本
         "matches": ["http://*/*","https://*/*"],  //滿足什么條件執(zhí)行該插件 
         "js": ["js/jquery-1.9.1.min.js", "js/js.js"],   
         "run_at": "document_start",  //在document加載時(shí)執(zhí)行該腳本
    }] 
}

每個(gè)字段的信息我都用注釋標(biāo)明了，接下來(lái)就重點(diǎn)說(shuō)下一些重要字段。

需要注意：

chrome不允許擴(kuò)展中的HTML頁(yè)面內(nèi)直接內(nèi)嵌js腳本，而要求所有的腳本都作為外部src來(lái)引入

如果browser action擁有一個(gè)popup（即設(shè)置了default_popup），popup 可以包含任意你想要的HTML內(nèi)容，并且會(huì)自適應(yīng)大小。popup 會(huì)在用戶點(diǎn)擊圖標(biāo)后出現(xiàn)。若沒(méi)有設(shè)置default_popup，將執(zhí)行chrome.browserAction.onClicked的內(nèi)容，若沒(méi)有設(shè)置，就什么都不執(zhí)行了。也就是如果設(shè)置了default_popup，就不會(huì)執(zhí)行chrome.browserAction.onClicked了。

和browser_action對(duì)應(yīng)的還有一個(gè)page_action，區(qū)別在于：Browser Action對(duì)在瀏覽器中加載的所有網(wǎng)頁(yè)都生效；Page Action針對(duì)特定的網(wǎng)頁(yè)生效。一個(gè)Extension最多可以有一個(gè)Browser Action或者Page Action。這里選用Browser Action。

background是插件的運(yùn)行環(huán)境。若設(shè)置了scripts字段，瀏覽器的擴(kuò)展系統(tǒng)會(huì)自動(dòng)根據(jù)scripts字段指定的所有js文件自動(dòng)生成背景頁(yè)。也可以直接page字段，指定背景頁(yè)。兩者只能設(shè)置一個(gè)。

一般情況下，我們會(huì)讓將擴(kuò)展的主要邏輯都放在 background 中比較便于管理。其它頁(yè)面可以通過(guò)消息傳遞的機(jī)制與 background 進(jìn)行通訊。理論上 content script 與 popup 之間也可以傳遞消息，但不建議這么做。

由于插件的js運(yùn)行環(huán)境有區(qū)別，所以消息傳遞機(jī)制是一個(gè)重要內(nèi)容。

如果僅需要給你自己的擴(kuò)展的另外一部分發(fā)送一個(gè)消息（可選的是否得到答復(fù)），你可以簡(jiǎn)單地使用chrome.extension.sendRequest()或者chrome.tabs.sendRequest()方法。這個(gè)方法可以幫助你傳送一次JSON序列化消息從content script到擴(kuò)展，反之亦然。如果接受消息的一方存在的話，可選的回調(diào)參數(shù)允許處理傳回來(lái)的消息。

sendRequest() 是Chrome33之前的API，33之后還是使用sendMessage()吧。

內(nèi)容腳本發(fā)送消息到擴(kuò)展程序

chrome.extension.sendMessage({hello: "Cissy"}, function(response) {
    console.log(response.farewell);
});

擴(kuò)展程序發(fā)送消息到內(nèi)容腳本

chrome.tabs.sendMessage(tab.id, {hello: "Cissy"}, function(response) {
    console.log(response.farewell);
});

接收消息
chrome.extension.sendMessage()向擴(kuò)展內(nèi)的其它監(jiān)聽者發(fā)送一條消息。此消息發(fā)送后會(huì)觸發(fā)擴(kuò)展內(nèi)每個(gè)頁(yè)面的chrome.extension.onMessage()事件。

我用的是長(zhǎng)時(shí)間的保持連接，原理差不多，就是調(diào)用接口的區(qū)別，所以就不具體介紹這個(gè)了 詳細(xì)的可以看開發(fā)文檔

同一個(gè)Extension的Extension Page（包括background、popup、tab、infobar、notification）都是運(yùn)行在同一個(gè)進(jìn)程中的，所以background 和 popup 之間可以直接相互調(diào)用對(duì)方的方法，不需要消息傳遞。

popup調(diào)用background中變量或方法

var bg = chrome.extension.getBackgroundPage();//獲取background頁(yè)面
console.log(bg.a);//調(diào)用background的變量或方法。

background調(diào)用popup中變量或方法

var pop = chrome.extension.getViews({type:"popup"});//獲取popup頁(yè)面
console.log(pop[0].b);//調(diào)用第一個(gè)popup的變量或方法。

這里要注意一定要指明type,如果沒(méi)有指定，則獲取Background Page之外的所有Extension Page的window對(duì)象 。(??ˇ?ˇ??)這個(gè)地方真的糾結(jié)好久。然后就是background是一個(gè)運(yùn)行在擴(kuò)展進(jìn)程中的HTML頁(yè)面。它在你的擴(kuò)展的整個(gè)生命周期都存在，而popup是在你點(diǎn)擊了圖標(biāo)之后才存在，所以，在獲取popup變量時(shí)，請(qǐng)確認(rèn)popup已打開。

持續(xù)長(zhǎng)時(shí)間的保持會(huì)話需要在content script和擴(kuò)展建立一個(gè)長(zhǎng)時(shí)間存在的通道。當(dāng)建立連接，兩端都有一個(gè)Port 對(duì)象通過(guò)這個(gè)連接發(fā)送和接收消息。

內(nèi)容腳本發(fā)送消息到擴(kuò)展程序

var bac = chrome.extension.connect({name: "ConToBg"});//建立通道，并給通道命名
bac.postMessage({hello: "Cissy"});//利用通道發(fā)送一條消息。

擴(kuò)展程序發(fā)送消息到內(nèi)容腳本
擴(kuò)展程序發(fā)送消息到內(nèi)容腳本與前面類似，但需要指定哪個(gè)標(biāo)簽需要連接，（獲取tab.id的方法我試了很多，但只有下面這個(gè)有效，所以如果大家有什么其他有效的方法，求求求分享?。。?/p>

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {//獲取當(dāng)前Tab
    var cab = chrome.tabs.connect(tabId, {name: "BgToCon"});//建立通道，指定tabId，并命名
    cab.postMessage({ hello: "Cissy"});//利用通道發(fā)送一條消息。
}

接收消息
為了處理正在等待的連接，需要用chrome.extension.onConnect 事件監(jiān)聽器，對(duì)于content script或者擴(kuò)展頁(yè)面，這個(gè)方法都是一樣的

chrome.extension.onConnect.addListener(function(bac) {//監(jiān)聽是否連接，bac為Port對(duì)象
    bac.onMessage.addListener(function(msg) {//監(jiān)聽是否收到消息，msg為消息對(duì)象
        console.log(msg.hello);
    })
})

設(shè)置 —>拓展程序—>加載已解壓的拓展程序—>選擇文件就行了，記得要打開開發(fā)者模式哦

插件功能的開發(fā)我就不寫了，實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，這篇文章就當(dāng)是chrome拓展開發(fā)的學(xué)習(xí)筆記了，不足之處還望指出，最后還是放一下插件源碼吧，寫的比較亂很多沒(méi)用到的代碼也沒(méi)刪掉，因?yàn)槭蔷毩?xí)中用到的。嗯嗯好了去吃飯。

參考資料：
官方文檔
360極速瀏覽器開發(fā)文檔
Chromium擴(kuò)展（Extension）機(jī)制簡(jiǎn)要介紹和學(xué)習(xí)計(jì)劃
Chrome插件開發(fā)入門（二）——消息傳遞機(jī)制