成为上帝玩转Chrome之指定阻止访问的网站

by

在本地建一个目录，比如路径为d:\BlockSitePlugin

在此目录中写入以下四个文件：

manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
	"manifest_version":2,
	"name":"ChromeRequestBlocking",
	"version":"1.2.4",
	"author":"shengulong, euhat.com",
	"description":"Block url request.",
	"background":{"scripts":["background.js"]},
	"browser_action":{
		"default_popup":"popup.html",
		"default_title":"Block url request"
	},
	"permissions":[
		"storage",
		"unlimitedStorage",
		"webRequest",
		"webRequestBlocking",
		"<all_urls>"
	]
}
</all_urls>


background.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

var key = null;
 
function save(blockList)
{
	if (null == blockList)
		return;
	key = blockList;
	window.localStorage["urls"] = JSON.stringify(key);
}
 
function load()
{
	str = window.localStorage["urls"];
	if (str)
		key = JSON.parse(str);
}
 
function check(details)
{
	if (key == null)
	{
		return { cancel: false };
	}
	var url = details.url;
	for (var i = 0, len = key.length; i < len; i++)
	{
		tokens = key[i].split("->");
		k = tokens[0];
		v = tokens[1];
		if (url.indexOf(k) >= 0)
		{
			if (null == v || '' == v)
				return { cancel: true };
			else {
				return {
//					cancel: false,
					redirectUrl: url.replace(k, v)
				};
			}
		}
	}
	return { cancel: false };
}
 
chrome.webRequest.onBeforeRequest.addListener(
	check,
	{ urls: ["<all_urls>"] },
	["blocking"]
);
 
load();

popup.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Edit</title>
	<script type="text/javascript" src="popup.js"></script>
</head>
<body>
	<div>
		<div style="white-space:nowrap;background:#CCCCCC">
			<input id="strFrom" placeholder="strFrom" />
			<label>-></label>
			<input id="strTo" placeholder="strTo" />
			<button id="add">Add</button>
		</div>
		<b>Rule list:</b>
		<table border="1" width="100%">
			<tbody id="block_list">
			</tbody>
		</table>
		<b>Help</b>
		<ul><li>If strTo is empty, any url containing strFrom will be blocked. 
		</li><li>If strTo is not empty, any url containing strFrom will be replaced strFrom to strTo before redirecting.
		</li><li>Click rule list item to remove the rule.
		</li></ul>
	</div>
</body>
</html>

popup.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

function appendBlockList(url)
{
	var nodeTr = document.createElement("tr");
	var nodeTd = document.createElement("td");
	var textNode = document.createTextNode(url);
	nodeTd.appendChild(textNode);
	nodeTr.appendChild(nodeTd);
	document.getElementById("block_list").appendChild(nodeTr);
}
 
function syncToBg(blockList)
{
	var bg = chrome.extension.getBackgroundPage();
	bg.save(blockList);
}
 
function save()
{
	var blockList = new Array;
	var list = document.getElementById('block_list');
	for (var i = 0; i < list.childNodes.length; i++) {
		if (list.childNodes[i].innerText)
			blockList.push(list.childNodes[i].innerText);
	}
 
	syncToBg(blockList);
 
	chrome.storage.local.set(
		{ key: blockList },
		function() {
			console.log('save: ' + blockList);
		}
	);
 
	chrome.storage.local.set(
		{strFrom: document.getElementById('strFrom').value},
		function() {
			console.log('strFrom: ' + document.getElementById('strFrom').value);
		}
	);
 
	chrome.storage.local.set(
		{strTo: document.getElementById('strTo').value},
		function() {
			console.log('strTo: ' + document.getElementById('strTo').value);
		}
	);
}
 
function load()
{
	chrome.storage.local.get(
		['key'],
		function(result) {
			console.log('load: ' + result.key);
 
			blockList = result.key;
			if (null == blockList)
				return;
 
			syncToBg(blockList);
 
			for (var i = 0; i < blockList.length; i++) {
				appendBlockList(blockList[i]);
			}
		}
	);
 
	chrome.storage.local.get(
		['strFrom'],
		function(result) {
			if (null == result.strFrom)
				return;
			document.getElementById('strFrom').value = result.strFrom;
		}
	);
 
	chrome.storage.local.get(
		['strTo'],
		function(result) {
			if (null == result.strTo)
				return;
			document.getElementById('strTo').value = result.strTo;
		}
	);
}
 
function remove(node)
{
	var par = node.parentNode;
	if (par)
		par.removeChild(node);
	save();
}
 
document.addEventListener('DOMContentLoaded', () => {
 
		load();
 
		var strFromCtrl = document.getElementById('strFrom');
		strFromCtrl.addEventListener('change', () => {
			save();
		});
 
		var strToCtrl = document.getElementById('strTo');
		strToCtrl.addEventListener('change', () => {
			save();
		});
 
		var addBtn = document.getElementById('add');
		addBtn.addEventListener('click', () => {
			var strFrom = document.getElementById('strFrom');
			var strTo = document.getElementById('strTo');
			var url = strFrom.value + '->' + strTo.value;
			if (strFrom.value) {
				strFrom.value = "";
				strTo.value = "";
				appendBlockList(url);
				save();
			}
		});
 
		var blockTable = document.getElementById('block_list');
		blockTable.addEventListener('click', () => {
			var td = event.srcElement;
			remove(td.parentElement);
		});
	}
);

此目录四个文件都写完后，

  1. 在Chrome地址栏中输入：
    chrome://extensions/
    键盘敲回车。
  2. 在扩展程序页面中，打开“开发者模式”，会出现三个按钮。
  3. 点击“加载已解压的扩展程序”，选择这四个文件所在的目录，如这里的
    d:\BlockSitePlugin
    点击“选择文件夹”后，会看到Chrome地址栏右边出现了一个默认像“C”字的图标按钮，这就是我们写好的插件。

插件的使用方法：

  • 如果strTo为空，任何含strFrom的url将被阻止。
  • 如果strTo非空，任何含strFrom的url将被替换strFrom部分为strTo去访问。
  • 点击规则列表中的条目将删除对应规则。

bugfix[10:56 2021/9/10]: 初次安装时，strFrom或strTo变成了undefined，未设为空值.

refer to: https://blog.csdn.net/weixin_33964094/article/details/85985400