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](https://stackoverflow.com/a/10258029). You'll see an error: `https://www.google.com` is not a valid pattern. Simply add `/*` — wOxxOm, Oct 07 '17 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, Oct 07 '17 at 20:32
Apparently you didn't reload the extension. There's a `Reload` action link on chrome://extensions page. — wOxxOm, Oct 07 '17 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, Oct 07 '17 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, Oct 07 '17 at 23:18
@wOxxOm You are correct, I just removed the "if(chrome.webRequest.onBeforeRequest.hasListener(blockReques‌t)) chrome.webRequest.onBeforeRequest.removeListener(blockReque‌st); " and it still works. Thanks for the help! — Random Coder, Oct 07 '17 at 23:23
P.S.: I figured out that in my 1st post, for background.js I needed to put that code inside a function and call it. For some reason, I thought it would just run automatically. So now the code from my 1st post works as well! — Random Coder, Oct 07 '17 at 23:43
Just in case I wasn't clear, the originally posted code works just fine when I add `/*`. — wOxxOm, Oct 07 '17 at 23:46

score 5 · Answer 1 · answered Jan 19 '20 at 13:05

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

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

1 Answers1

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