實現一個簡單的chrome插件

咱們在上網的時候，都會用到瀏覽器，可是瀏覽器並不是擁有咱們想要的全部功能，咱們能夠根據本身的須要，實現本身的插件來知足需求。好比網頁中常常會有大量的廣告，若是你但願擁有一個純淨的網頁，能夠實現一個插件來刪除網頁中的廣告部分，若是你以爲瀏覽器自帶的下載工具不太方便，可實現一個插件來管理下載的全部文件，文本以實現一個記錄全部打開的網頁地址爲例，分享一下對瀏覽器插件開發的認識。

要實現一個瀏覽器插件，須要從一個配置文件開始，這個配置文件就是manifest.json文件，任何插件的實現都離不開這個JSON格式的文件。

初識manifest.json文件

1. 設置基本信息

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

2. 設置入口信息

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

   • "browser_action" 字段配置好以後，插件加載後在瀏覽器的地址欄右側就會生成一個入口圖標，以下圖所示。
   • "default_icon"字段配置圖標的地址，
   • "default_title"字段配置鼠標移到圖標上顯示的文字，
   • "default_popup"配置單擊圖標所執行的文件。

須要注意的是，這裏的文件地址都是相對路徑，相對於manifest.json文件。

3.設置此插件所能訪問的瀏覽器權限

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

"permissions"字段是一個數組，列出本插件所使用到的瀏覽器權限，若是這裏沒有受權，則插件是沒法使用的。此插件用到的瀏覽器的權限。

4.設置插件後臺頁面。

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

"background"字段代表插件所運行的環境，在瀏覽器前臺看不到的頁面，須要打開擴展程序的開發者模式才能看到。以下圖所示：

5.設置對頁面內容進行操做的腳本

"content_scripts": [{  //對頁面內容進行操做的腳本
         "matches": ["http://*/*","https://*/*"],  
         "js": ["js/jquery-1.9.1.min.js", "js/js.js"],
         "run_at": "document_start",  
         "all_frames": true
    }]

"matches"字段設置執行該腳本的環境，好比本插件的該腳本在http或https協議下才執行，在其餘協議的網頁中是不執行內容腳本的。
"js"字段依次加載腳本文件地址。
"run_at"指定在document加載時執行該腳本

插件中幾個環境的總結

1. popup.html: 點擊插件圖標所顯示的頁面，只有點擊圖標纔會顯示，這可區別於background.html的運行週期。這個頁面中運行的js腳本叫作popup.js，它會在每次點擊插件入口圖標時從新載入。 popup.html頁面以下圖所示：

2. background.html: 這個頁面是插件運行的後臺頁面，沒有顯示在窗口中，與當前瀏覽頁面無關。這個頁面存在於插件運行的整個週期。插件啓動後就常駐後臺，只有一個,這個頁面運行的js腳本叫作background.js。
3. content.js：這個是注入在web頁面中的JavaScript腳本,能夠是多個，如上所述，能夠設置注入條件。

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

三個主要部分消息傳遞總結

• popup調用background中變量或方法：

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

• background調用popup中變量或方法：

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

  注意： 由於個Extension能夠同時擁有若干個頁面。這些頁面分爲五種類型爲除了background和popup頁面外，還有tab：像正常網頁同樣在瀏覽器的Tab中打開的頁面、infobar：在瀏覽器頂部信息欄顯示的信息頁面、notification：在瀏覽器底部顯示的通知頁面。它們分別表明在不一樣窗口打開的頁面。 因此這裏必定要指定獲取頁面的type類型，若是沒有指定，則獲取Background Page以外的全部Extension Page的window對象。

• 內容腳本發消息給background

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

• background監聽內容腳本所發送的消息，並做出迴應

  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
     {
      ...
      sendResponse(JSON.stringify(request)); // 監聽到消息以後，對收到的消息作一些處理並作出迴應
     });

本插件實現的兩個重要點

1. 獲取當前tab頁面的url

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

2. 將獲取的url地址存儲起來

   可使用谷歌的storage來存儲，因爲在manifest.json中已經授予了storage權限，因此這裏能夠直接使用   
    chrome.storage.local.set({'address': tabUrl}, function() {
       console.log('success')
     } )

能夠選擇同步的方式或者本地方式存儲，若選擇前者(sync), 存儲的數據會自動同步到你登陸的任何Chrome瀏覽器。若選擇storage.local，則只可以將數據存儲在當前登陸的設備本地。詳細用法可參見 https://developer.chrome.com/...

加載調試

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

注意：代碼修改以後，須要從新加載文件。

小結

本文只是簡單分享瞭如何開發一個簡單的谷歌瀏覽器插件，以及一些注意事項，而且提到了如何受權和使用谷歌插件api，重點介紹了插件開發必備的manifest.json入口文件和插件中幾個重要環境以及環境之間的通訊。本文內容並非很全面，就當是chrome插件開發的學習筆記，不足之處還望指出。本文內容並未完結，在之後學習的過程當中，會不斷補充。

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