"Block a website" script with vanilla JavaScript I use this script to block access to a one or more websites with vanilla JavaScript. I find that it helps me avoid some addictive news websites that make me depressed. (Credit to Marat Tanalin for helping me with the event handling.)

The script is aimed to be an all vanilla JavaScript imperative small script for personal usage, hence it's not modular (there isn't a HTML/CSS/JS file distribution on purpose).

To use the script please change news_website_1.com to a given news website you hate.

My personal main problem with the script is that it doesn't block websites right away or almost right away such as happens with BlockSite Google Chrome extension:
For example, the script first loads a website, then about 5 seconds pass, then it gets blocked; for some reason, listening to the sooner DOMContentLoaded event sometimes works and sometimes doesn't and a reviewed version might show an improvement in that point.

How would you revise this script?

// ==UserScript==
// @name         New Userscript
// @match        *
// ==/UserScript==

window.addEventListener('load', ()=&gt; {
  let sitesToBlock = [
      'news_website_1.com'
  ];
  let regexToMatchTLD = /\..+/;
  let href = window.location.href;
  for (let i = 0; i &lt; sitesToBlock.length; i++) {
      if (href.includes(sitesToBlock[i])) {
          let domain = sitesToBlock[i].replace(regexToMatchTLD, '');
          document.body.innerHTML =`
              &lt;div style="direction: ltr; position: fixed; top: 0; z-index: 999999; display: block; width: 100%; height: 100%; background: red"&gt;
                &lt;p style="position: relative; top: 40%; display: block; font-size: 66px; font-weight: bold; color: #fff; margin: 0 auto; text-align: center"&gt;
                  The website ${domain} successfully blocked !
                &lt;/p&gt;
              &lt;/div&gt;
        `;
      }
  }
}, false);
The main suggestion I have is to take the values from sitesToBlock and put them in the @match metadata key instead of detecting when to update the document content. There is an extensive guide about match patterns here. With this approach there should not be any need to wait for the DOM to be loaded and check if the URL contains elements in sitesToBlock, though maybe that “news_website_1” loads slower than the one I tested with and that won’t work.

Other review points:


default to using const instead of let when declaring variables unless re-assignment is mandatory. This helps avoid accidental re-assignment.
use for...of loops when possible- e.g. for iterating through sitesToBlock and there is no need for a counter variable (e.g. i) other than accessing the current element
&lt;script&gt; tags still executed - those tags outside the body tag (e.g. in the HTML &lt;head&gt; element, or anywhere else) are still executed so it might make sense to remove those, otherwise the execution of a script could modify the document body after the user script has finished updating the document body, which likely would be undesirable. 


Below is the script as I would update it. I know the domain might include www or another sub-domain if the site redirects to one - I modified the regex to look specifically for a final dot followed by anything that isn’t a dot and an end of string anchor (i.e. $). 

// ==UserScript==
// @name         page blocker
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  block pages
// @author       Sᴀᴍ Onᴇᴌᴀ
// @match        *://*.news_website_1.com/*
// @match        *://*.news_website_2.com/*
// @grant        none
// ==/UserScript==

(() =&gt; { //IIFE arrow function
    'use strict';

    const regexToMatchTLD = /\.[^.]+$/;
    const domain = location.hostname.replace(regexToMatchTLD, '');; 
    document.body.innerHTML =`
          &lt;div style="direction: ltr; position: fixed; top: 0; z-index: 999999; display: block; width: 100%; height: 100%; background: red"&gt;
            &lt;p style="position: relative; top: 40%; display: block; font-size: 66px; font-weight: bold; color: #fff; margin: 0 auto; text-align: center"&gt;
              The website ${domain} successfully blocked !
            &lt;/p&gt;
          &lt;/div&gt;
    `;
})();