Chrome插件開發（一）

作為一個開發人員，我們在日常工作中肯定會用到 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的格式：

{
  // 擴展名稱
  "name": "MyExtension",
 
  // 版本。由1到4個整數構成。多個整數間用"."隔開
  "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運行環境及運行腳本
  "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數組
  "web_accessible_resources": []
}

 

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

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代碼就好了。

 

 

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

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

manifest配置文件：

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

目錄結構如下：

 

這個並沒有添加圖標，可以自行添加，然后我們用chrome瀏覽器開發者模式加載我們編寫的插件，會發現再也不會有煩人的彈窗干擾我們的視線了。 

 

 我們通過更多工具-->擴展程序進入chrome的插件管理界面，然后通過以下操作：

 

然后我們就加載了次插件，如下：

 

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