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

• 這次做這個(gè)插件的功能很簡(jiǎn)單，就是點(diǎn)擊按鈕后可以對(duì)當(dāng)前網(wǎng)頁的模塊進(jìn)行選擇隱藏。
• 做這個(gè)插件一方面是練習(xí)實(shí)例，還有一方面是，有的時(shí)候查資料啊，邊上總有很多花花綠綠動(dòng)來動(dòng)去的小廣告!
• 很煩有木有，還根本不能關(guān)閉!就算有關(guān)閉按鈕，點(diǎn)擊了竟然還跳轉(zhuǎn)到廣告頁面了(ﾟДﾟ≡ﾟДﾟ)
• 所以就想做個(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": [ //允許插件訪問的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è)包含所有指定腳本的頁面 
    },  
     "content_scripts": [{  //對(duì)頁面內(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)明了，接下來就重點(diǎn)說下一些重要字段。

需要注意：

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

browser_action

1. 如果browser action擁有一個(gè)popup(即設(shè)置了default_popup)，popup 可以包含任意你想要的HTML內(nèi)容，并且會(huì)自適應(yīng)大小。popup 會(huì)在用戶點(diǎn)擊圖標(biāo)后出現(xiàn)。若沒有設(shè)置default_popup，將執(zhí)行chrome.browserAction.onClicked的內(nèi)容，若沒有設(shè)置，就什么都不執(zhí)行了。也就是如果設(shè)置了default_popup，就不會(huì)執(zhí)行chrome.browserAction.onClicked了。
2. 和browser_action對(duì)應(yīng)的還有一個(gè)page_action，區(qū)別在于：Browser Action對(duì)在瀏覽器中加載的所有網(wǎng)頁都生效;Page Action針對(duì)特定的網(wǎng)頁生效。一個(gè)Extension最多可以有一個(gè)Browser Action或者Page Action。這里選用Browser Action。

background

1. background是插件的運(yùn)行環(huán)境。若設(shè)置了scripts字段，瀏覽器的擴(kuò)展系統(tǒng)會(huì)自動(dòng)根據(jù)scripts字段指定的所有js文件自動(dòng)生成背景頁。也可以直接page字段，指定背景頁。兩者只能設(shè)置一個(gè)。
2. 一般情況下，我們會(huì)讓將擴(kuò)展的主要邏輯都放在 background 中比較便于管理。其它頁面可以通過消息傳遞的機(jī)制與 background 進(jìn)行通訊。理論上 content script 與 popup 之間也可以傳遞消息，但不建議這么做。

消息傳遞

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

一次簡(jiǎn)單的請(qǐng)求

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

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

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

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

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

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

3.接收消息

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

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

長(zhǎng)時(shí)間的保持連接

background 和 popup

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

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

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

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

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

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

background 和 content

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

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

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

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

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ā)送一條消息。 
} 

3.接收消息為了處理正在等待的連接，需要用chrome.extension.onConnect 事件監(jiān)聽器，對(duì)于content script或者擴(kuò)展頁面，這個(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); 
}) 
}) 

安裝調(diào)試

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

總結(jié)

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