How to make a basic chrome extension to block certain websites?

Question

What I have so far:

manifest.json

{ "name": "Testing", "version": "0.1", "manifest_version": 2, "description": "Hi there.", "background": {	"scripts": ["background.js"] }, "icons": { "128" : "images/test.png" }, "browser_action": { "default_icon": "images/test2.png", "default_title": "test" }, "permissions": [	"webRequest",	"webRequestBlocking",	"https://www.google.com/*",	"http://www.dictionary.com/*" ] }

background.js

chrome.webRequest.onBeforeRequest.addListener(function(details) {	return {cancel: true};	},	{urls: ["https://www.google.com", "http://www.dictionary.com/*"]},	["blocking"]);

I was hoping that by loading this unpacked extension, it would "block" the listed websites (testing with Google.com and dictionary.com). I'm not sure how the blocking functionality actually works, but I figured either the website wouldn't load or it would display some sort of general error.

However, nothing seems to happen, so I'm guessing that either my understanding of "blocking" is flawed and/or my code isn't written correctly. I based my code off these references:

https://developer.chrome.com/extensions/examples/extensions/catblock/manifest.json https://developer.chrome.com/extensions/examples/extensions/catblock/background.js https://developer.chrome.com/extensions/webRequest

"The following example achieves the same goal in a more efficient way because requests that are not targeted to www.evil.com do not need to be passed to the extension:

 chrome.webRequest.onBeforeRequest.addListener( function(details) { return {cancel: true}; }, {urls: ["*://www.evil.com/*"]}, ["blocking"]); "

This is my 1st time attempting to make a chrome extension, and I'm not really familiar with html or javascript, so apologies if I'm way off the mark with my implementation.

ALWAYS use the devtools debugger. In this case for the background page. You'll see an error: https://www.google.com is not a valid pattern. Simply add /* — woxxom
– woxxom, Commented Oct 7, 2017 at 20:05
@wOxxOm ok, I changed both entries to ://.google.com/ I checked the debugger tool, and I don't see any errors, but the extension still doesn't seem to do anything. — Random Coder
– Random Coder, Commented Oct 7, 2017 at 20:32
Apparently you didn't reload the extension. There's a Reload action link on chrome://extensions page. — woxxom
– woxxom, Commented Oct 7, 2017 at 20:37
@wOxxOm I managed to get it working using: function blockRequest(details) { return {cancel: true}; } function updateFilters(urls) { if(chrome.webRequest.onBeforeRequest.hasListener(blockRequest)) chrome.webRequest.onBeforeRequest.removeListener(blockRequest); chrome.webRequest.onBeforeRequest.addListener(blockRequest, {urls: ["*://*.google.com/*"]}, ['blocking']); } updateFilters(); Not sure why the previous implementation didn't work. — Random Coder
– Random Coder, Commented Oct 7, 2017 at 23:15
The originally posted code just works when you add /*. No need to remove the listener. It does nothing because the API doesn't register a second copy of the listener anyway. If it doesn't work for you, there's something else you're doing wrong. — woxxom
– woxxom, Commented Oct 7, 2017 at 23:18

Sak1sham · Accepted Answer · 2020-01-19 13:05:50Z

Here is the code for the site-blocking extension that I made.

Following is the manifest.json file:

{ "manifest_version": 2, "name": "SiteBlocker", "version": "1.0.0", "description": "Block non-important info from your browsers", "content_scripts": [{ "js": ["content.js"], "matches": ["http://*/*", "https://*/*"] }], "browser_action": { "default_icon": "icons8-fire-96.png", //change this icon to your icon file "default_popup": "small_win.html" } }

Here is the content.js file which contains the main code:

//BLOCK WORDS findString = function findText(text) { if(window.find(text)){ document.documentElement.innerHTML = ''; document.documentElement.innerHTML = 'This site is blocked'; document.documentElement.scrollTop = 0; }; } findString("WordToBlock"); //BLOCK THE PARTIAL DOMAINS findURL = function changeURL(text){ var current = window.location.href; if(current === text){ window.location.replace("https://www.google.co.in"); } } //BLOCK THE ENTIRE DOMAIN WITH THE FOLLOWING FUNCTION findAllURL = function changeAllURL(text){ var current = window.location.href; if(current.startsWith(text)){ document.documentElement.innerHTML = ''; document.documentElement.innerHTML = 'Domain is blocked'; document.documentElement.scrollTop = 0; } } findURL("https://www.quora.com/"); findAllURL("https://www.facebook.com/");

And here is the small_win.html file which opens a popup when you click the icon of the extension:

<!DOCTYPE html> <html> <head> <style media="screen"> body { min-width:500px; } </style> </head> <body> Add the content of the popup window </h3> </body> </html>

Here is the link to my github repository: https://github.com/sak1sham/LaserFocus which contains the code for the extension.

Thank you

Collectives™ on Stack Overflow

How to make a basic chrome extension to block certain websites?

1 Answer 1

Here is the code for the site-blocking extension that I made.

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Here is the code for the site-blocking extension that I made.

Comments

Linked

Related