How do I block certain websites with my Chrome Extension?

Question

I'm making a simple chrome extension for a project. I am making an extension that blocks certain URL's(social media etc) to make studying more efficient. I'm not very good in JS but I want to learn. I had some ideas that maybe it could either block the website or just draw something in a div blocking its content. Also, maybe I could input an URL into popup.html to specify the blocked website. Saving data in firebase. Also, I read that maybe its easier to use declarativeWebRequest but not quite sure how to use it.

Manifest.js

"name": "StudyBuddy",
"description": "Helps you study by blocking distracting websites",
"version": "2.0",
 "permissions": [
   "webRequestBlocking",
   "webRequest",
   "activeTab",
   "tabs",
   "http://*/*",
   "https://*/*"
],
 "content_scripts" : [{
    "matches": ["<all_urls>"],
    "js" : ["background.js"],
    "css" : ["styles.css"]



  }],
 "browser_action": {
   "default_title": "Blocks websites",
   "default_popup": "popup.html"

  },
  "manifest_version": 2

background.js

console.log("Loaded extension");


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: ["*://*.facebook.com/*", "*://*.facebook.net/*"]}, ['blocking']);

}

At the moment my extension doesnt block anything.

Answer 1

Ok, your code has two issues :

• Your manifest.json didn't specify background.js, so that code wasn't running.
• You didn't actually call the updateFilters function from anywhere.

I corrected both those issues and this extension works fine for me, it blocks Facebook as expected.

In general I suggest you do some more reading of the documentation for extensions as you try to get started, especially the parts on background pages and event pages.

manifest.json: (note that I don't have access to your popup html/css so I had to remove that section from the manifest).

{
  "name": "StudyBuddy",
  "description": "Helps you study by blocking distracting websites",
  "version": "2.0",
  "permissions": [
     "webRequestBlocking",
     "webRequest",
     "activeTab",
     "tabs",
     "http://*/*",
     "https://*/*"
  ],
  "background" : {
    "scripts":  [
      "background.js"
    ]
  },
  "manifest_version": 2
}

background.js

console.log("Loaded extension");


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: ["*://*.facebook.com/*", "*://*.facebook.net/*"]}, ['blocking']);
}

updateFilters();