摘要：小結(jié)本文只是簡單分享了如何開發(fā)一個簡單的谷歌瀏覽器插件，以及一些注意事項(xiàng)，并且提到了如何授權(quán)和使用谷歌插件，重點(diǎn)介紹了插件開發(fā)必備的入口文件和插件中幾個重要環(huán)境以及環(huán)境之間的通信。

我們在上網(wǎng)的時候，都會用到瀏覽器，但是瀏覽器并非擁有我們想要的所有功能，我們可以根據(jù)自己的需要，實(shí)現(xiàn)自己的插件來滿足需求。比如網(wǎng)頁中經(jīng)常會有大量的廣告，如果你希望擁有一個純凈的網(wǎng)頁，可以實(shí)現(xiàn)一個插件來刪除網(wǎng)頁中的廣告部分，如果你覺得瀏覽器自帶的下載工具不太方便，可實(shí)現(xiàn)一個插件來管理下載的所有文件，文本以實(shí)現(xiàn)一個記錄所有打開的網(wǎng)頁地址為例，分享一下對瀏覽器插件開發(fā)的認(rèn)識。

要實(shí)現(xiàn)一個瀏覽器插件，需要從一個配置文件開始，這個配置文件就是manifest.json文件，任何插件的實(shí)現(xiàn)都離不開這個JSON格式的文件。

設(shè)置基本信息

           "manifest_version": 2, // 文件版本，基本不變
           "name": "Record Web Address Extension", // 這里輸入插件名稱
           "version": "1.0.1", // 自己實(shí)現(xiàn)的插件版本，在打包完插件的時候，根據(jù)這個字段來判斷插件是否需要更新
           "description": "The first extension that yangyanjun made.", // 這里輸入對此插件的詳細(xì)描述 以上幾個字段給插件添加一個入口。

設(shè)置入口信息

           "browser_action": { 
               "default_icon": "pinzhi_logo.png",
               "default_title": "記錄瀏覽地址", 
               "default_popup": "popup.html" 
            }

"browser_action" 字段配置好之后，插件加載后在瀏覽器的地址欄右側(cè)就會生成一個入口圖標(biāo)，如下圖所示。

"default_icon"字段配置圖標(biāo)的地址，

"default_title"字段配置鼠標(biāo)移到圖標(biāo)上顯示的文字，

"default_popup"配置單擊圖標(biāo)所執(zhí)行的文件。

需要注意的是，這里的文件地址都是相對路徑，相對于manifest.json文件。

3.設(shè)置此插件所能訪問的瀏覽器權(quán)限

            "permissions": [ 
                "http://*/*",
                "https://*/*",
                "tabs",
                "storage"
            ]   

"permissions"字段是一個數(shù)組，列出本插件所使用到的瀏覽器權(quán)限，如果這里沒有授權(quán)，則插件是無法使用的。此插件用到的瀏覽器的權(quán)限。

4.設(shè)置插件后臺頁面。

    "background":{
        "page":"background.html"
    }

"background"字段表明插件所運(yùn)行的環(huán)境，在瀏覽器前臺看不到的頁面，需要打開擴(kuò)展程序的開發(fā)者模式才能看到。如下圖所示：

5.設(shè)置對頁面內(nèi)容進(jìn)行操作的腳本

    "content_scripts": [{  //對頁面內(nèi)容進(jìn)行操作的腳本
         "matches": ["http://*/*","https://*/*"],  
         "js": ["js/jquery-1.9.1.min.js", "js/js.js"],
         "run_at": "document_start",  
         "all_frames": true
    }]

"matches"字段設(shè)置執(zhí)行該腳本的環(huán)境，比如本插件的該腳本在http或https協(xié)議下才執(zhí)行，在其他協(xié)議的網(wǎng)頁中是不執(zhí)行內(nèi)容腳本的。
"js"字段依次加載腳本文件地址。
"run_at"指定在document加載時執(zhí)行該腳本

popup.html: 點(diǎn)擊插件圖標(biāo)所顯示的頁面，只有點(diǎn)擊圖標(biāo)才會顯示，這可區(qū)別于background.html的運(yùn)行周期。這個頁面中運(yùn)行的js腳本叫做popup.js，它會在每次點(diǎn)擊插件入口圖標(biāo)時重新載入。 popup.html頁面如下圖所示：

background.html: 這個頁面是插件運(yùn)行的后臺頁面，沒有顯示在窗口中，與當(dāng)前瀏覽頁面無關(guān)。這個頁面存在于插件運(yùn)行的整個周期。插件啟動后就常駐后臺，只有一個,這個頁面運(yùn)行的js腳本叫做background.js。

content.js：這個是注入在web頁面中的JavaScript腳本,可以是多個，如上所述，可以設(shè)置注入條件。

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

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

   let bgMessage = chrome.extension.getBackgroundPage(); //可直接獲取background頁面
   console.log(bgMessage.tabUrl);  //直接調(diào)用background的變量或方法。   

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

   let popMessage = chrome.extension.getViews({type:"popup"});//可直接獲取popup頁面
   console.log(popMessage[0].name); // 調(diào)用第一個popup的變量或方法。

注意： 因?yàn)閭€Extension可以同時擁有若干個頁面。這些頁面分為五種類型為除了background和popup頁面外，還有tab：像正常網(wǎng)頁一樣在瀏覽器的Tab中打開的頁面、infobar：在瀏覽器頂部信息欄顯示的信息頁面、notification：在瀏覽器底部顯示的通知頁面。它們分別代表在不同窗口打開的頁面。 所以這里一定要指定獲取頁面的type類型，如果沒有指定，則獲取Background Page之外的所有Extension Page的window對象。

內(nèi)容腳本發(fā)消息給background

   chrome.runtime.sendMessage({conyent: message || "我是content-script"},
   function(response) {
           console.log("來自background的回復(fù)：" + response);
       }
   );
   

background監(jiān)聽內(nèi)容腳本所發(fā)送的消息，并作出回應(yīng)

   chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
   {
    ...
    sendResponse(JSON.stringify(request)); // 監(jiān)聽到消息之后，對收到的消息做一些處理并做出回應(yīng)
   });

獲取當(dāng)前tab頁面的url

這部分邏輯要寫在background.js中，可以直接使用谷歌提供的插件接口來獲取當(dāng)前頁面的url
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    console.log(tab.url) //可以獲取當(dāng)前頁面的url地址
}）

將獲取的url地址存儲起來

 可以使用谷歌的storage來存儲，由于在manifest.json中已經(jīng)授予了storage權(quán)限，所以這里可以直接使用   
 chrome.storage.local.set({"address": tabUrl}, function() {
    console.log("success")
  } )  

可以選擇同步的方式或者本地方式存儲，若選擇前者(sync), 存儲的數(shù)據(jù)會自動同步到你登錄的任何Chrome瀏覽器。若選擇storage.local，則只能夠?qū)?shù)據(jù)存儲在當(dāng)前登錄的設(shè)備本地。詳細(xì)用法可參見 https://developer.chrome.com/...

設(shè)置 —>拓展程序—>加載已解壓的拓展程序—>選擇manifest.json所在的文件夾即可

注意：代碼修改之后，需要重新加載文件。

本文只是簡單分享了如何開發(fā)一個簡單的谷歌瀏覽器插件，以及一些注意事項(xiàng)，并且提到了如何授權(quán)和使用谷歌插件api，重點(diǎn)介紹了插件開發(fā)必備的manifest.json入口文件和插件中幾個重要環(huán)境以及環(huán)境之間的通信。本文內(nèi)容并不是很全面，就當(dāng)是chrome插件開發(fā)的學(xué)習(xí)筆記，不足之處還望指出。本文內(nèi)容并未完結(jié)，在以后學(xué)習(xí)的過程中，會不斷補(bǔ)充。

參考資料：
https://developer.chrome.com/...
https://developer.chrome.com/...
https://blog.csdn.net/luoshen...