Chrome 擴展開發——編寫一個本身的瀏覽器插件

此次的練習是作一個Chrome的擴展，分享一下入門開發過程。由於在消息傳遞那塊糾結了特別久，因此我會重點總結消息傳遞那塊。

此次作這個插件的功能很簡單，就是點擊按鈕後能夠對當前網頁的模塊進行選擇隱藏。
作這個插件一方面是練習實例，還有一方面是，有的時候查資料啊，邊上總有不少花花綠綠動來動去的小廣告！
很煩有木有，還根本不能關閉！就算有關閉按鈕，點擊了居然還跳轉到廣告頁面了(ﾟДﾟ≡ﾟДﾟ)
因此就想作個小插件，讓本身能夠選擇隱藏這些不想看的模塊。

配置文件

每個擴展都有一個JSON格式的manifest文件，叫manifest.json。

因此第一步咱們將建立一個manifest.json文件。以下：

{ 
    "manifest_version": 2, //固定的
    "name": "Cissy's First Extension", //插件名稱
    "version": "1.0", //插件使用的版本
    "description": "The first extension that CC made.", //插件的描述
    "browser_action": { //插件加載後生成圖標
        "default_icon": "cc.gif",//圖標的圖片
        "default_title": "Hello CC", //鼠標移到圖標顯示的文字 
        "default_popup": "popup.html" //單擊圖標執行的文件
    }, 
    "permissions": [ //容許插件訪問的url
        "http://*/", 
        "bookmarks", 
        "tabs", 
        "history" 
    ], 
    "background":{//background script即插件運行的環境
        "page":"background.html"
        // "scripts": ["js/jquery-1.9.1.min.js","js/background.js"]//數組.chrome會在擴展啓動時自動建立一個包含全部指定腳本的頁面
    }, 
     "content_scripts": [{  //對頁面內容進行操做的腳本
         "matches": ["http://*/*","https://*/*"],  //知足什麼條件執行該插件 
         "js": ["js/jquery-1.9.1.min.js", "js/js.js"],   
         "run_at": "document_start",  //在document加載時執行該腳本
    }] 
}

每一個字段的信息我都用註釋標明瞭，接下來就重點說下一些重要字段。

須要注意：

chrome不容許擴展中的HTML頁面內直接內嵌js腳本，而要求全部的腳本都做爲外部src來引入

browser_action

1. 若是browser action擁有一個popup（即設置了default_popup），popup 能夠包含任意你想要的HTML內容，而且會自適應大小。popup 會在用戶點擊圖標後出現。若沒有設置default_popup，將執行chrome.browserAction.onClicked的內容，若沒有設置，就什麼都不執行了。也就是若是設置了default_popup，就不會執行chrome.browserAction.onClicked了。

2. 和browser_action對應的還有一個page_action，區別在於：Browser Action對在瀏覽器中加載的全部網頁都生效；Page Action針對特定的網頁生效。一個Extension最多能夠有一個Browser Action或者Page Action。這裏選用Browser Action。

background

1. background是插件的運行環境。若設置了scripts字段，瀏覽器的擴展系統會自動根據scripts字段指定的全部js文件自動生成背景頁。也能夠直接page字段，指定背景頁。二者只能設置一個。

2. 通常狀況下，咱們會讓將擴展的主要邏輯都放在 background 中比較便於管理。其它頁面能夠經過消息傳遞的機制與 background 進行通信。理論上 content script 與 popup 之間也能夠傳遞消息，但不建議這麼作。

消息傳遞

因爲插件的js運行環境有區別，因此消息傳遞機制是一個重要內容。

一次簡單的請求

若是僅須要給你本身的擴展的另一部分發送一個消息（可選的是否獲得答覆），你能夠簡單地使用chrome.extension.sendRequest()或者chrome.tabs.sendRequest()方法。這個方法能夠幫助你傳送一次JSON序列化消息從content script到擴展，反之亦然。若是接受消息的一方存在的話，可選的回調參數容許處理傳回來的消息。

sendRequest() 是Chrome33以前的API，33以後仍是使用sendMessage()吧。

1. 內容腳本發送消息到擴展程序

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

2. 擴展程序發送消息到內容腳本

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

3. 接收消息
   chrome.extension.sendMessage()向擴展內的其它監聽者發送一條消息。此消息發送後會觸發擴展內每一個頁面的chrome.extension.onMessage()事件。

我用的是長時間的保持鏈接，原理差很少，就是調用接口的區別，因此就不具體介紹這個了 詳細的能夠看開發文檔

長時間的保持鏈接

background 和 popup

同一個Extension的Extension Page（包括background、popup、tab、infobar、notification）都是運行在同一個進程中的，因此background 和 popup 之間能夠直接相互調用對方的方法，不須要消息傳遞。

1. popup調用background中變量或方法

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

2. background調用popup中變量或方法

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

   這裏要注意必定要指明type,若是沒有指定，則獲取Background Page以外的全部Extension Page的window對象 。(｡•ˇ‸ˇ•｡)這個地方真的糾結很久。而後就是background是一個運行在擴展進程中的HTML頁面。它在你的擴展的整個生命週期都存在，而popup是在你點擊了圖標以後才存在，因此，在獲取popup變量時，請確認popup已打開。

background 和 content

持續長時間的保持會話須要在content script和擴展創建一個長時間存在的通道。當創建鏈接，兩端都有一個Port 對象經過這個鏈接發送和接收消息。

1. 內容腳本發送消息到擴展程序

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

2. 擴展程序發送消息到內容腳本
   擴展程序發送消息到內容腳本與前面相似，但須要指定哪一個標籤須要鏈接，（獲取tab.id的方法我試了不少，但只有下面這個有效，因此若是你們有什麼其餘有效的方法，求求求分享！！）

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

3. 接收消息
   爲了處理正在等待的鏈接，須要用chrome.extension.onConnect 事件監聽器，對於content script或者擴展頁面，這個方法都是同樣的

   chrome.extension.onConnect.addListener(function(bac) {//監聽是否鏈接，bac爲Port對象
       bac.onMessage.addListener(function(msg) {//監聽是否收到消息，msg爲消息對象
           console.log(msg.hello);
       })
   })

安裝調試

設置 —>拓展程序—>加載已解壓的拓展程序—>選擇文件就好了，記得要打開開發者模式哦

總結

插件功能的開發我就不寫了，實現起來比較簡單，這篇文章就當是chrome拓展開發的學習筆記了，不足之處還望指出，最後仍是放一下插件源碼吧，寫的比較亂不少沒用到的代碼也沒刪掉，由於是練習中用到的。嗯嗯好了去吃飯。

參考資料：
官方文檔
360極速瀏覽器開發文檔
Chromium擴展（Extension）機制簡要介紹和學習計劃
Chrome插件開發入門（二）——消息傳遞機制