動手作第一個Chrome插件

時間 2019-11-13

原文原文鏈接

　　Chrome插件是使人驚訝的簡單，一旦你弄懂它的工做和實現原理。它是由一部分HTML,一部分Js，而後混合了一個叫作manifest.json的Json文件組合而成的總體。這意味着你可使用你最擅長的js框架去實現它。javascript

　　若是你仍是一個Chrome插件的新手而且想嘗試寫一個的話，下面的文章將會帶領你們而且嘗試讓你們理解Chrome插件的工做機制。這篇文章將會講述每一塊架構，以及相互之間的聯繫和插件的通常化形式。css

架構

　　Chrome插件中的文件大致上能夠分紅2部分：Chrome插件中確確實實存在的文件，而且是應用程序級別的,如上圖的Chrome Extension Scripts以及注入到每一個網頁Dom當中的文件（如Content Scripts 或者Injected Scripts）.這些文件都被放在manifest.json當中，Chrome內部會自動識別不一樣個文件的做用。html

　　在任什麼時候候，popup和background都只有一份，相比較起來，若是你有多個Tab(這裏的Tab指的是Chrome當中的選項卡，也就是一個窗口頁面),那麼Content Scripts和 Injected Scripts會運行在每個Tab當中，也就是能夠跨選項卡。固然，你能夠指定往哪一個Tab當中去注入Scripts,也就是說，注入操做是可選擇的。java

　　下面是一些它們如何工做的細節：jquery

Manifest.json

這個Json文件是把backgrounds, popups, content scripts 和injected scripts 放在一塊兒，並以結構化的方式書寫。
設置擴展，如Permission。
設置擴展的基本信息。

Background

Javascript文件老是運行在後臺（在老版本的Chrome當中，background是html文件而且嵌入了javascript）.
沒有顯示界面。
有Chrome應用程序級別命令的訪問權限。
有使用全部Chrome API的權限

點擊插件圖標會顯示出Html和Javascirpt.
也擁有應用程序級別的權限（和background同樣）
只有當Chrome插件的圖標點擊的時候才觸發。
對全部的pop-up Chrome API有使用權限。

Content Scripts

擁有一部分Api的使用權限（好比從backgorund監聽消息）
對於頁面Dom有完整的訪問權限，可是對於任何window級別的對象沒有訪問權限（好比全局變量），對於frame也沒有訪問權限；這是由於安全限制。
Content scripts運行在介於插件和頁面之間，全局的window對象是和頁面/插件全局命名空間徹底不一樣的。

Injected Scripts

和Contente Scripts 同樣，只擁有部分Api的使用權限
注入當前Tab的網頁當中，並不與插件進行通訊。

關聯關係

　　他們之間的聯繫只要你弄懂了總體的架構，我相信就會很明瞭。chrome

　　在應用程序級別的部分是能夠有互相訪問的權限的。好比Popup文件能用chrome.extension.getBackgroundPage()訪問background裏面的東西，這就好像Backbone 視圖能夠訪問他們的Model和Collection。json

　　Content Scripts是存在於每一個獨立的Dom頁面，和background和popup用message的方式進行通訊交流。特別的，它可使用chrome.tabs.sendMessage和chrome.runtime.onMessage.addListener去向對方發送消息。這和Backbone 的事件系統很像.安全

　　Injected Scripts和Content Scripts的不一樣在於它不能監聽或者發送消息給其餘的Chrome插件部分。架構

結構

　　組織你的Chrome插件，能更好的讓你分清楚不一樣的文件的不一樣做用。不一樣的項目的組織結構均可以是類似的，下面列舉了一種組織形式，你們能夠參考一下。app

　　Manifest.json把全部的須要的文件都放在一塊兒了，須要注意的一點是文件是按順序被編譯的，因此被依賴的文件每每是放在實際的script文件以前的，下面的代碼中，jquery.js實在content scripts中的recorder.js和player.js以前的。　　

{
  "manifest_version": 2,

  # 插件基本信息
  "name": "MyExtension",
  "description": "MyExtension",
  "version": "1.0.0",

  # popup彈出窗文件位置
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popups/popup.html"
  },

  # 設置 content scripts 以及何時注入什麼類型的頁面
  "content_scripts": [{
    "matches": ["http://*/*","https://*/*"],
    "css":["styles/styles.css"],
    "js": [
      "bower_components/jquery/dist/jquery.min.js",
      "content-scripts/recorder.js",
      "content-scripts/player.js",
    ]
  }],

  # 設置background的scripts
  "background": {
    "scripts": [
      "bower_components/jquery/dist/jquery.min.js",
      "bg/background.js"
    ]
  },

  # 腳本的權限
  "permissions": [
    "<all_urls>",
    "tabs",
    "storage",
    "unlimitedStorage"
  ]
}

動手作一個Chrome插件

　　說了再多，不作也是沒用的。咱們先新建一個Manifest.json文件，複製以下代碼：

{
  "manifest_version": 2,

  "name": "GTmetrix Analyzer Plugin",
  "description": "This extension will analyze a page using GTmetrix",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab"
   ]
}

　　其中有幾點須要注意，browser_action 這個指定了點擊插件的時候，彈出的頁面以及插件的圖標。Permission 就是指定了哪些URL對於這個插件是有用的，好比你能夠輸入特定的域名，那麼只有在這個域名下，這個插件纔有用。

　　下面咱們來新建一個popup.html頁面，代碼以下。

<!doctype html>
<html>
  <head>
    <title>GTmetrix Analyzer</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>GTmetrix Analyzer</h1>
    <button id="checkPage">Check this page now!</button>
  </body>
</html>

　　你們可能注意到了我其實使用了一個popus.js的文件，這個實際上是爲了實現點擊checkPage時候的效果所必須的腳本，下面咱們新建一個popup.js的文件。

ocument.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('checkPage');
  checkPageButton.addEventListener('click', function() {

    chrome.tabs.getSelected(null, function(tab) {
      d = document;

      var f = d.createElement('form');
      f.action = 'http://gtmetrix.com/analyze.html?bm';
      f.method = 'post';
      var i = d.createElement('input');
      i.type = 'hidden';
      i.name = 'url';
      i.value = tab.url;
      f.appendChild(i);
      d.body.appendChild(f);
      f.submit();
    });
  }, false);
}, false);