My Chrome Extension doesn't work - failed to block certain websites

Question

It doesn't even log it to the console. At start it worked one time by blocking FB. Then I added a website to block (in this case reddit) and it failed to block anything after that. Even when removing reddit it still didn't block FB. I'm making a simple extension for a school project to block certain websites.

Maybe there's an easier way to block website? I thought of just overwriting new content over the blocked website, like changing a div(coloring the background red, giving a message)

Any suggestions?

Manifest.js

{
 "name": "StudyBuddy",
 "description": "Helps you study by blocking distracting websites",
 "version": "2.0",
 "permissions": [
   "webRequestBlocking",
   "webRequest",
   "activeTab",
   "tabs",
   "http://*/*",
   "https://*/*"
],
   "background" : {
     "scripts":  [
     "background.js"
]
},
   "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/*", "*://*.reddit.com/*", 
 "*://*.reddit.net*"]}, ['blocking']);
}

updateFilters();