製做chrome插件/擴展程序,禁止谷歌瀏覽器訪問某些網站

　　簡單地說，瀏覽器插件，能夠大大的擴展你的瀏覽器的功能。包括但不只限於這些功能：

• 捕捉特定網頁的內容
• 捕捉HTTP報文
• 捕捉用戶瀏覽動做，改變瀏覽器地址欄/起始頁/書籤/Tab等界面元素的行爲
• 與別的站點通訊，修改網頁內容……
• 能夠用它來識別一些網站上的廣告代碼，並直接把這些代碼刪掉，這樣你就不會受到廣告的困擾了

　　瀏覽器插件的弊端：會帶來一些安全隱患，也可能讓你的瀏覽器變得緩慢甚至不穩定。 

 

插件地址：https://github.com/shengulong/chrome_plugin

 

一、chrome地址欄輸入chrome://extensions/，能夠看到當前谷歌瀏覽器的所有擴展程序

開啓開發者模式，能夠加載本身製做的擴展程序，或者把本身製做的擴展程序打包

 打包第一個擴展程序，生成crx插件和pem密鑰，這樣別人就能夠直接使用安裝這個插件了

 二、插件製做：

• 建立一個目錄，裏面建立2個文件，插件入口文件manifest.json和主程序文件background.js
• 開發者模式下加載已經解壓的擴展程序，選擇剛纔建立的目錄，進行加載，出錯會有錯誤提示    

　　全部插件都要有manifest.json這個文件，這是插件的配置文件，可看做插件的「入口」,要放在插件的根目錄下面

　　permissions 屬性是一個數組，它定義了擴展須要向 Chrome 申請的權限，好比經過 XMLHttpRequest 跨域請求數據、訪問瀏覽器選項卡（tabs）、獲取當前活動選項卡（activeTab）、瀏覽器通知（notifications）、存儲（storage）等，能夠根據須要添加。

　　background 可使擴展常駐後臺，比較經常使用的是指定子屬性 scripts，表示在擴展啓動時自動建立一個包含全部指定腳本的頁面。

manifest.json

{
  "manifest_version": 2,   #必須參數，值必須爲2
  "name": "Chrome_request_blocking",  #必須參數，插件名字
  "version": "1.0",       #必須參數，插件版本，有格式要求1.x.x
  "background":{"scripts":["js/background.js"]},   #完成插件功能的js腳本路徑
   "permissions": [
    "webRequest", "webRequestBlocking", "*://login.tongxue.cn/htdocs/scripts/lib/*"  #攔截url必須容許webRequest和webRequestBlocking.這個設置的意思是插件攔截全部發往"*://login.tongxue.cn/htdocs/scripts/lib/*"的請求
   ]

}

 

background.js

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// 'use strict';//監聽全部請求
chrome.webRequest.onBeforeRequest.addListener(
        function(details) { return {cancel: true}; },
        {urls: ["https://login.tongdxue.cn/htdocs/scripts/lib/three.min.js"]},  #攔截的url列表
        ["blocking"]
);

 

 注意：html和js要分開執行，也就是說不能在html裏放js語句，

　　　　　 <td>
                    <button id="add" onclick="saveChanges()">增長</button>
                </td>

只能放js引用（<script src="popup.js"></script>）

<!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
    -->

 

調試：

在插件的popup.html頁面上右鍵彈出「檢查」，而後出現另外一個開發者工具界面(這個是插件的開發者工具，有別於網頁的開發者工具)，而後能夠調試popup.html已經popup.html引用的js文件。

background.js是主程序，是看不到的

 

 

參考：

一、https://www.jianshu.com/p/2c2a4f497135

二、http://www.voidcn.com/article/p-ffruhaug-pu.html

三、https://segmentfault.com/a/1190000005896962

四、https://www.cnblogs.com/guogangj/p/3235703.html

官網資料：

https://developer.chrome.com/extensions/getstarted

https://developer.chrome.com/extensions/webRequest#event-onBeforeRequest

https://developer.chrome.com/extensions

中午版官網資料：https://crxdoc-zh.appspot.com/extensions/tut_debugging