作為一個開發人員，我們在日常工作中肯定會用到 Chrome 瀏覽器，同時也會用到谷歌的一些外掛，比如 Tampermonkey，AdBlock等，在之前的文章本人還用過 Tampermonkey 外掛，好使又好玩，傳送門 

https://www.cnblogs.com/weijiutao/p/11677932.html，

https://www.cnblogs.com/weijiutao/p/10608107.html，

在某些時候我們會自己開發一些簡單實用的外掛，本章開始我們就開始學習一下如何做一些簡單的谷歌外掛。

作為一個新手，我在學習如何製作谷歌外掛時翻到了博主 小茗同學 的筆記 https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html，從中深受啟發，在此先謝過！

一、外掛是什麼？

外掛是遵循一定規範的應用程式介面編寫出來的程式，而chrome外掛則是執行在chrome瀏覽器上的小程式，能幫我們解決一下工作學習中一些重複繁瑣的事情。

二、外掛的基礎知識

對於chrome外掛來說，最核心的應該是manifest.json這個配置檔案了，利用它我們可以定義在什麼時機在什麼網頁執行什麼指令碼，有一些什麼行為，下面先看一下manifest.json的格式：

  1 {
  2   // 副檔名稱
  3   "name": "MyExtension",
  4  
  5   // 版本。由1到4個整數構成。多個整數間用"."隔開
  6   "version": "1.0",
  7  
  8   // manifest檔案版本號。Chrome18開始必須為2
  9   "manifest_version": 2,
 10  
 11   // 描述。132個字元以內
 12   "description": ",
 13  
 14   // 擴充套件圖示。推薦大小16，48，128
 15   "icons": {
 16     "16": "image/icon-16.png",
 17     "48": "image/icon-48.png",
 18     "128": "image/icon-128.png"
 19   },
 20  
 21   // 語言
 22   "default_locale": "en",
 23  
 24   // 位址列右側圖示管理，含圖示及彈出頁面的設定等
 25   // 建議至少保留一個設定，不然擴充套件圖示是暗的
 26   "browser_action": {
 27     "default_icon": "image/icon-128.png",
 28     "default_title": "My Message",
 29     "default_popup": "html/browser.html"
 30   },
 31  
 32   // 位址列最後附加圖示。含圖示及行為等
 33   "page_action": {
 34     "default_icon": "image/icon-48.png",
 35     "default_title": "My Test",
 36     "default_popup": "html/page.html"
 37   },
 38  
 39   // 主題，用於更改整個瀏覽器的外觀
 40   "theme": {},
 41  
 42   // 指定擴充套件需要跳轉到的URL
 43   "app": {},
 44  
 45   // 指定擴充套件程序的background執行環境及執行指令碼
 46   "background": {
 47     "scripts": [
 48       "lib/jquery-3.3.1.min.js",
 49       "js/background.js"
 50     ],
 51     "page":"html/background.html"
 52   },
 53  
 54   // 替換頁面
 55   "chrome_url_overrides": {
 56     "pageToOverride": "html/overrides.html"
 57   },
 58  
 59   // 指定在web頁面執行的指令碼/插入的css及執行/插入時機
 60   "content_scripts": [{
 61     "matches": ["https://www.baidu.com/*"],
 62     "css": ["css/mystyles.css"],
 63     "js": ["lib/jquery-3.3.1.min.js", "js/content.js"],
 64     "run_at": "document_idle"
 65   }],
 66  
 67   // 安全策略
 68   "content_security_policy": ",
 69  
 70   "file_browser_handlers": [],
 71  
 72   // 擴充套件的官方主頁
 73   "homepage_url": "http://xxx",
 74  
 75   // 外掛在隱私模式下的配置
 76   "incognito": "spanning",
 77  
 78   // 使用者操作意圖描述
 79   "intents": {},
 80  
 81   // 擴充套件唯一標識。不需要人為指定
 82   "key": ",
 83  
 84   // 擴充套件所需chrome的最小版本
 85   "minimum_chrome_version": "1.0",
 86  
 87   // 訊息與本地處理模組對映
 88   "nacl_modules": [],
 89  
 90   // 是否允許離線執行
 91   "offline_enabled": true,
 92  
 93   // ominbox即位址列。用於響應位址列的輸入事件
 94   "omnibox": {
 95     "keyword": "myKey"
 96   },
 97  
 98   // 選項頁。用於在擴充套件管理頁面跳轉到選項設定
 99   "options_page": "aFile.html",
100  
101   // 申請許可權
102   "permissions": [
103     "https://www.baidu.com/*",
104     "background",
105     "tabs"
106   ],
107  
108   // 擴充套件。可呼叫第三方擴充套件
109   "plugins": [{
110     "path": "extension_plugin.dll",
111     "public": true
112   }],
113  
114   // 指定所需要的特殊技術。目前只支援"3D"
115   "requirements": {},
116  
117   // 自動升級
118   "update_url": "http://path/to/updateInfo.xml",
119  
120   // 指定資源路徑，為String陣列
121   "web_accessible_resources": []
122 }

這麼多？先寫段程式碼壓壓驚，真的別被嚇著了，雖然可用的屬性有這麼多，但是常用的就那麼幾個，我們一個個看一下：

1、name 副檔名稱。

2、version 外掛的版本。

3、manifest_version manifest配置檔案版本。

4、description 對於外掛功能的描述。

5、icons 外掛的圖示 可以為外掛找一個好看的圖示。

6、browser_action 可以定義外掛的圖示，點選外掛時彈出的頁面，以及外掛的標題，建議始終保留一個，直接不設定這個屬性圖示會是灰色的，設定了後才會亮起來。

7、background 背景頁，擴充套件程序的背景執行環境，可以攔截修改請求等等。

8、content_scripts 內容指令碼，可以指定在什麼時機向什麼頁面插入什麼指令碼或者css資源

9、permissions 許可權申請項，比如儲存許可權storage，請求攔截許可權webRequest, webRequestBlocking等等。

在瞭解了這些基礎知識之後，剩下的工作就是按照我們想要實現的實際功能，編寫程式碼就好了，下面我們正式開始編寫我們的第一個外掛，由於是第一個外掛，雖然功能很簡單，但是我們也要給他取一個響亮的名字“外掛終結者”，怎麼個終結法，且聽我們一一道來。

首先我們開啟素材連結：http://webpack.wuhaolin.cn，這是一本線上書籍，叫《深入淺出webpack》，講的非常全面非常好有興趣的可以看看，回到整體，當我們看第一章的時候，一切都非常的好，但是到了第二張的時候卻出現了一個非常煩人的彈窗

當然，作為程式設計師的我們肯定不能被這小小的彈窗難住，然後我們做了第一次嘗試，開啟開發者工具，找到彈窗所在的節點，移除掉，但是當我們滾動的頁面的時候那該死的彈框又出現了，說明有程式碼在監聽彈窗節點，當不存在的時候直接新加一個。接著我們做了第二次嘗試，既然你不讓我移除節點，那我們不移除了，同樣的找到彈窗節點，新增樣式： display: none!important; 

使用!important的目的是為了提升樣式的優先順序，讓彈窗始終不可見，在寫入了這個樣式後，彈窗就隱藏了，而且滾動的時候也不會再出現，但是當我們看其他章節或者重新整理頁面的時候那惱人的彈框又出來了，能不能自動處理隱藏呢？

是時候展示真正的技術了，我們之前在介紹基礎知識的時候提到了content_scripts欄位，可以定義在什麼時機向什麼頁面插入什麼指令碼或css資源，我們只需要在上面的頁面載入完成後，向頁面注入隱藏彈窗的css程式碼就好了。

如上圖，檢查元素後我們可以通過：

1 .gitbook-plugin-modal {
2   display: none!important;
3 }

manifest配置檔案：

{
  "name": "PopBlock",
  "version": "1.0",
  "manifest_version": 2,
  "description": "移除鬧人的彈框",
  "browser_action": {
    "default_title": "PopBlock"
  },
  "content_scripts": [{
    "matches": ["http://webpack.wuhaolin.cn/*"],
    "css": ["css/popup.css"],
    "run_at": "document_end"
  }]
}

目錄結構如下：

這個並沒有新增圖示，可以自行新增，然後我們用chrome瀏覽器開發者模式載入我們編寫的外掛，會發現再也不會有煩人的彈窗干擾我們的視線了。 

 我們通過更多工具-->擴充套件程式進入chrome的外掛管理介面，然後通過以下操作：

然後我們就載入了次外掛，如下：

 這樣，當我們再次開啟 http://webpack.wuhaolin.cn 時，惱人的彈窗就消失不見了。