Skip to content

Commit 868421b

Browse files
Trishul GoelTrishul Goel
Trishul Goel
authored and
Trishul Goel
committed
updated fb blocker using webrequest API
1 parent 2ccee9b commit 868421b

File tree

6 files changed

+140
-82
lines changed

6 files changed

+140
-82
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Demos for various JS functions also code repo for various webextensions submitte
44

55
## Webextenstions list and functionality used
66
* board_webext - newtab capture, page modifier, storageAPI, tabs API
7-
* fbBlocker_webext - page modifier, options page example, storageAPI
7+
* fbBlocker_webext - Intercept HTTP request, webrequest, notification API, options page example, storageAPI
88
* todo_webext - storageAPI, browserACtion API, popup handeling
99
* FunFacts - popup page, XHR handeling, third party API integration
1010
* tictacTow_webext - pure JS AI based tic tac toe game, panel integration

‎fbBlocker_webext/manifest.json

+12-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"manifest_version": 2,
44
"name": "Facebook Blocker",
55
"description": "Blocks the Facebook for given time period, For the self motivated people who dont want to get distracted duing work hours",
6-
"version": "1.1",
6+
"version": "2.1",
77

88
"homepage_url": "https://github.com/tsl143/jsDemos/fbBlocker_webext",
99
"icons": {
@@ -19,11 +19,21 @@
1919
}
2020
],
2121

22+
"background": {
23+
"scripts": ["stopIt.js"]
24+
},
25+
2226
"options_ui": {
2327
"page": "options.html",
2428
"browser_style": true
2529
},
2630

27-
"permissions": ["storage"]
31+
"permissions": [
32+
"webRequest",
33+
"webRequestBlocking",
34+
"<all_urls>",
35+
"notifications",
36+
"storage"
37+
]
2838

2939
}

‎fbBlocker_webext/options.html

+66-19
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,75 @@
33
<html>
44
<head>
55
<meta charset="utf-8">
6+
<style type="text/css">
7+
.rangeHolder {
8+
font-size: 15px;
9+
width: 300px;
10+
border: 2px solid #EF476F;
11+
padding: 20px 0;
12+
margin: 0 auto;
13+
}
14+
.rangeinfo {
15+
text-align: center;
16+
}
17+
.timeBlock {
18+
width: 105px;
19+
padding: 10px;
20+
text-align: center;
21+
background: #EF476F;
22+
margin: 10px;
23+
display: inline-block;
24+
color: #fff;
25+
}
26+
.timeBlock select {
27+
background: #F27C98;
28+
border: 0;
29+
padding: 5px;
30+
font-size: 20px;
31+
margin-bottom: 10px;
32+
color: #444;
33+
}
34+
.rangeHolder button {
35+
display: inline-block;
36+
width: 235px;
37+
background: #EF476F;
38+
border: 0;
39+
color: #FFF;
40+
margin-left: 2px;
41+
padding: 5px 0;
42+
text-align: center;
43+
font-size: 15px;
44+
}
45+
</style>
646
</head>
747

8-
<body>
9-
<div>
10-
<b>Select your distraction free hours!!!</b>
11-
<i>The clock time is 24 hrs</i>
12-
</div>
13-
14-
<br>
15-
16-
<label>Block from:
17-
<select id="fromTime" style="background: #bfbfbf;border: 0;padding: 3px 5px;"></select>
18-
</label>
19-
20-
<label>Block To:
21-
<select id="toTime" style="background: #bfbfbf;border: 0;padding: 3px 5px;"></select>
22-
</label>
23-
24-
<button id="submit">Save</button>
25-
48+
<body>
49+
<div class="rangeHolder">
50+
<div class="rangeinfo">
51+
<b>Select your distraction free hours!!!</b><br>
52+
<i>The clock time is 24 hrs</i>
53+
</div>
54+
<div style="text-align: center;">
55+
<div class="timeBlock">
56+
<span>
57+
<select id="fromTime"></select>
58+
</span>
59+
<span>
60+
FROM
61+
</span>
62+
</div>
63+
<div class="timeBlock">
64+
<span>
65+
<select id="toTime"></select>
66+
</span><br>
67+
<span>
68+
TO
69+
</span>
70+
</div>
71+
<button id="submit">SAVE</button>
72+
</div>
73+
</div>
2674
<script src="options.js"></script>
27-
2875
</body>
2976

3077
</html>

‎fbBlocker_webext/options.js

+18-11
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
function saveOptions(e) {
22
e.preventDefault();
3-
browser.storage.local.set({blockHrsTSL:{
4-
fromHrs: document.querySelector("#fromTime").value,
5-
toHrs: document.querySelector("#toTime").value
6-
}
7-
});
8-
9-
alert("Settings Saved");
3+
const fromH = document.querySelector("#fromTime").value;
4+
const toH = document.querySelector("#toTime").value;
5+
if(parseInt(fromH) > parseInt(toH)){
6+
alert('From time cant be greater than to time!');
7+
}else{
8+
browser.storage.local.set({blockHrsTSL:{
9+
fromHrs: fromH,
10+
toHrs: toH
11+
}
12+
});
13+
alert("Settings Saved");
14+
}
1015
}
1116

1217
function setForm() {
@@ -21,10 +26,12 @@ function setForm() {
2126

2227
var gettingItem = browser.storage.local.get('blockHrsTSL');
2328
gettingItem.then((res) => {
24-
let fromTime = res.blockHrsTSL.fromHrs || 0;
25-
let toTime = res.blockHrsTSL.toHrs || 0;
26-
document.querySelector("#fromTime").value = fromTime;
27-
document.querySelector("#toTime").value = toTime;
29+
if(res.blockHrsTSL){
30+
let fromTime = res.blockHrsTSL.fromHrs || 0;
31+
let toTime = res.blockHrsTSL.toHrs || 0;
32+
document.querySelector("#fromTime").value = fromTime;
33+
document.querySelector("#toTime").value = toTime;
34+
}
2835
});
2936
}
3037

‎fbBlocker_webext/stopIt.js

+43-49
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,48 @@
1+
//adding hook to request
2+
browser.webRequest.onBeforeRequest.addListener(
3+
handleHTTPRequest,
4+
{urls:["https://facebook.com/*","http://facebook.com/*","https://www.facebook.com/*","http://www.facebook.com/*"]},
5+
["blocking"]
6+
);
7+
8+
9+
//function to create notification
10+
function notifyUser(fromTime, toTime){
11+
browser.notifications.create({
12+
"type": "basic",
13+
"iconUrl": "icons/logo_64.png",
14+
"title": "Facebook Blocked",
15+
"message": `Facebook has been blocked from ${fromTime} hrs to ${toTime} hrs`
16+
});
17+
}
118

2-
// get the time values from browser local storage
3-
var gettingItem = browser.storage.local.get('blockHrsTSL');
4-
5-
// localstorage returns promise
6-
gettingItem.then((res) => {
7-
fromTime = res.blockHrsTSL.fromHrs || 0;
8-
toTime = res.blockHrsTSL.toHrs || 0;
9-
10-
if(fromTime == 0 && toTime == 0)
11-
return false;
12-
13-
if(isBlocked(fromTime, toTime))
14-
burnThemAll(fromTime, toTime);
15-
else
16-
return false;
17-
18-
});
19+
//function to create promise and check if we should block the request or not
20+
function handleHTTPRequest(details) {
21+
22+
let shallNotify = true;
23+
if(details.originUrl && details.originUrl !== 'undefined')
24+
shallNotify = false;
25+
const blockRequest = new Promise((resolve) => {
26+
gettingItem = browser.storage.local.get('blockHrsTSL');
27+
gettingItem.then((res) => {
28+
let fromTime = res.blockHrsTSL.fromHrs || 0;
29+
let toTime = res.blockHrsTSL.toHrs || 0;
30+
31+
if(fromTime == 0 && toTime == 0)
32+
resolve(false);
33+
34+
if(isBlocked(fromTime, toTime)){
35+
if(shallNotify)
36+
notifyUser(fromTime, toTime);
37+
resolve({ cancel: true });
38+
}
39+
40+
resolve(false);
41+
});
42+
});
43+
return blockRequest;
44+
}
1945

20-
//Check if the site should be blocked or not
2146
function isBlocked(fromTime, toTime){
2247

2348
rightNowDate = new Date();
@@ -28,34 +53,3 @@ function isBlocked(fromTime, toTime){
2853
else
2954
return false;
3055
}
31-
32-
//remove all body content replace by warning, remove all scripts and stylesheets
33-
function burnThemAll(fromTime, toTime){
34-
35-
document.body.textContent = "";
36-
37-
var header = document.createElement('h1');
38-
header.textContent = `This page has been blocked from ${fromTime}:00 to ${toTime}:00`;
39-
document.body.appendChild(header);
40-
41-
var s = document.getElementsByTagName('script');
42-
var l = document.getElementsByTagName('link');
43-
44-
45-
for (let i = (s.length-1); i >= 0; i--) {
46-
47-
s[i].parentNode.removeChild(s[i]);
48-
49-
}
50-
51-
for (let i = (l.length-1); i >= 0; i--) {
52-
53-
l[i].parentNode.removeChild(l[i]);
54-
55-
}
56-
57-
}
58-
59-
60-
61-

‎ticTacToe_webext/.DS_Store

-6 KB
Binary file not shown.

0 commit comments

Comments
 (0)