title: How do I block certain websites with my Chrome Extension?
body: <p>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.</p>
  
  <p>Manifest.js</p>
  
  <pre><code>"name": "StudyBuddy",
  "description": "Helps you study by blocking distracting websites",
  "version": "2.0",
   "permissions": [
     "webRequestBlocking",
     "webRequest",
     "activeTab",
     "tabs",
     "http://*/*",
     "https://*/*"
  ],
   "content_scripts" : [{
      "matches": ["&lt;all_urls&gt;"],
      "js" : ["background.js"],
      "css" : ["styles.css"]
  
  
  
    }],
   "browser_action": {
     "default_title": "Blocks websites",
     "default_popup": "popup.html"
  
    },
    "manifest_version": 2
  </code></pre>
  
  <p>background.js</p>
  
  <pre><code>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']);
  </code></pre>
  
  <p>}</p>
  
  <p>At the moment my extension doesnt block anything.</p>