Chrome插件開發(fā)系列一：彈窗終結者開發(fā)實戰(zhàn)

更新時間：2020年10月02日 20:43:32 作者：Dean

從這一節(jié)開始，我們將從零開始打造我們的chrome插件工具庫，第一節(jié)我們將講一下插件開發(fā)的基礎知識并構建一個簡單但卻很實用的插件，在構建之前，我們先簡單的了解一下插件以及插件開發(fā)的基礎知識

一、插件是什么？

插件是遵循一定規(guī)范的應用程序接口編寫出來的程序，而chrome插件則是運行在chrome瀏覽器上的小程序，能幫我們解決一下工作學習中一些重復繁瑣的事情。

二、插件的基礎知識

對于chrome插件來說，最核心的應該是manifest.json這個配置文件了，利用它我們可以定義在什么時機在什么網(wǎng)頁執(zhí)行什么腳本，有一些什么行為，下面先看一下manifest.json的格式：

{
 // 擴展名稱
 "name": "MyExtension",
 
 // 版本。由1到4個整數(shù)構成。多個整數(shù)間用"."隔開
 "version": "1.0",
 
 // manifest文件版本號。Chrome18開始必須為2
 "manifest_version": 2,
 
 // 描述。132個字符以內
 "description": ",
 
 // 擴展圖標。推薦大小16，48，128
 "icons": {
  "16": "image/icon-16.png",
  "48": "image/icon-48.png",
  "128": "image/icon-128.png"
 },
 
 // 語言
 "default_locale": "en",
 
 // 地址欄右側圖標管理，含圖標及彈出頁面的設置等
 // 建議至少保留一個設置，不然擴展圖標是暗的
 "browser_action": {
  "default_icon": "image/icon-128.png",
  "default_title": "My Message",
  "default_popup": "html/browser.html"
 },
 
 // 地址欄最后附加圖標。含圖標及行為等
 "page_action": {
  "default_icon": "image/icon-48.png",
  "default_title": "My Test",
  "default_popup": "html/page.html"
 },
 
 // 主題，用于更改整個瀏覽器的外觀
 "theme": {},
 
 // 指定擴展需要跳轉到的URL
 "app": {},
 
 // 指定擴展進程的background運行環(huán)境及運行腳本
 "background": {
  "scripts": [
   "lib/jquery-3.3.1.min.js",
   "js/background.js"
  ],
  "page":"html/background.html"
 },
 
 // 替換頁面
 "chrome_url_overrides": {
  "pageToOverride": "html/overrides.html"
 },
 
 // 指定在web頁面運行的腳本/插入的css及運行/插入時機
 "content_scripts": [{
  "matches": ["https://www.baidu.com/*"],
  "css": ["css/mystyles.css"],
  "js": ["lib/jquery-3.3.1.min.js", "js/content.js"],
  "run_at": "document_idle"
 }],
 
 // 安全策略
 "content_security_policy": ",
 
 "file_browser_handlers": [],
 
 // 擴展的官方主頁
 "homepage_url": "http://xxx",
 
 // 插件在隱私模式下的配置
 "incognito": "spanning",
 
 // 用戶操作意圖描述
 "intents": {},
 
 // 擴展唯一標識。不需要人為指定
 "key": ",
 
 // 擴展所需chrome的最小版本
 "minimum_chrome_version": "1.0",
 
 // 消息與本地處理模塊映射
 "nacl_modules": [],
 
 // 是否允許脫機運行
 "offline_enabled": true,
 
 // ominbox即地址欄。用于響應地址欄的輸入事件
 "omnibox": {
  "keyword": "myKey"
 },
 
 // 選項頁。用于在擴展管理頁面跳轉到選項設置
 "options_page": "aFile.html",
 
 // 申請權限
 "permissions": [
  "https://www.baidu.com/*",
  "background",
  "tabs"
 ],
 
 // 擴展?？烧{用第三方擴展
 "plugins": [{
  "path": "extension_plugin.dll",
  "public": true
 }],
 
 // 指定所需要的特殊技術。目前只支持"3D"
 "requirements": {},
 
 // 自動升級
 "update_url": "http://path/to/updateInfo.xml",
 
 // 指定資源路徑，為String數(shù)組
 "web_accessible_resources": []
}

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

1、name 擴展名稱。

2、version 插件的版本。

3、manifest_version manifest配置文件版本。

4、description 對于插件功能的描述。

5、icons 插件的圖標可以為插件找一個好看的圖標。

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

7、background 背景頁，擴展進程的背景運行環(huán)境，可以攔截修改請求等等。

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

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

在了解了這些基礎知識之后，剩下的工作就是按照我們想要實現(xiàn)的實際功能，編寫代碼就好了，下面我們正式開始編寫我們的第一個插件，由于是第一個插件，雖然功能很簡單，但是我們也要給他取一個響亮的名字“插件終結者”，怎么個終結法，且聽我們一一道來。

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

當然，作為程序員的我們肯定不能被這小小的彈窗難住，然后我們做了第一次嘗試，打開開發(fā)者工具，找到彈窗所在的節(jié)點，移除掉，但是當我們滾動的頁面的時候那該死的彈框又出現(xiàn)了，說明有代碼在監(jiān)聽彈窗節(jié)點，當不存在的時候直接新加一個。接著我們做了第二次嘗試，既然你不讓我移除節(jié)點，那我們不移除了，同樣的找到彈窗節(jié)點，添加樣式：

display: none!important;

使用!important的目的是為了提升樣式的優(yōu)先級，讓彈窗始終不可見，在寫入了這個樣式后，彈窗就隱藏了，而且滾動的時候也不會再出現(xiàn)，但是當我們看其他章節(jié)或者刷新頁面的時候那惱人的彈框又出來了，能不能自動處理隱藏呢？

是時候展示真正的技術了，我們之前在介紹基礎知識的時候提到了content_scripts字段，可以定義在什么時機向什么頁面插入什么腳本或css資源，我們只需要在上面的頁面加載完成后，向頁面注入隱藏彈窗的css代碼就好了。

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

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瀏覽器開發(fā)者模式加載我們編寫的插件，會發(fā)現(xiàn)再也不會有煩人的彈窗干擾我們的視線了。