Personal Computer Web-surfing Digital Well being user script

Question

I have written the following JavaScript small script to do three things in a web browser:

• Block all or most News websites (send your browser to google.com instead)
• Block automatic playing of any video (use another browser to play the video)
• Block specific websites (send your browser to google.com instead)

The axioms for creating this script are that many websites, especially news websites, can damage mental health at least of people addictive to them and that automatic playing of videos is problematic as it manipulates the mind of the user to concentrate in something that may be totally not on his agenda or control.

The script worked for me in Chrome 114.0.

The script contains the Hebrew words חדשות and החדשות which mean "news" and "the news" respectively.

How will you review this script?

// ==UserScript==
// @name        digital_wellbeing
// @run-at      document-start
// @match       *://*/*
// ==/UserScript==

//
// Block news websites as much as possible
//

if (
  document.querySelector('title')?.textContent.includes('News') ||
  document.querySelector('title')?.textContent.includes('news') ||
  document.querySelector('meta[name="title"]')?.content.includes('News') ||
  document.querySelector('meta[name="title"]')?.content.includes('news') ||
  document.querySelector('meta[name="description"]')?.content.includes('News') ||
  document.querySelector('meta[name="description"]')?.content.includes('news') ||
  document.querySelector('meta[name="tags"]')?.content.includes('News') ||
  document.querySelector('meta[name="tags"]')?.content.includes('news') ||
  document.querySelector('meta[name="title"]')?.content.includes('חדשות') ||
  document.querySelector('meta[name="title"]')?.content.includes('החדשות') ||
  document.querySelector('meta[name="description"]')?.content.includes('חדשות') ||
  document.querySelector('meta[name="description"]')?.content.includes('החדשות') ||
  document.querySelector('meta[name="tags"]')?.content.includes('חדשות') ||
  document.querySelector('meta[name="tags"]')?.content.includes('החדשות')
) {
  window.open("https://google.com/", "_self");
}

//
// Block videos autoplay
//

window.setInterval( () => {
  document.querySelectorAll('video').forEach(anyVideo => {
    anyVideo.pause();
  });
}, 1);

//
// Block specific website/s
//

window.setInterval( () => {
    const urlPatternToBlock = [
        'WEBSITE_URL'
    ];

    for (const element of urlPatternToBlock) {
        if (window.location.href.includes(urlPatternToBlock)) {
        window.open("https://google.com/", "_self");
        }
    }
}, 1);

Answer 1

If and when new keywords to check for get added, your code becomes more and more unwieldy---which is probably what prompted you to ask this question.

When manually doing the same thing over and over again, it's usually a good idea to separate the changing parts from the static parts, and put the former into a data structure such as an array.

A source of further repetition comes from case-sensitivity handling. There are some options to alleviate those, such as using regular expressions, or CSS selectors.

An example rewrite containing examples of the above points (I haven't tested these):

const metas = ["title", "description", "tags"]
const keywords = ["news", "חדשות", "החדשות"]

const selectorList = metas.reduce((acc, meta) => {
  keywords.forEach(keyword =>
    acc.push(`meta[name="${meta}" content~="${keyword}" i]`))
  return acc
}, [])

if (document.head.querySelector(selectorList.toString())
    || document.title.match(/\bnews\b/i)) {
  // ...
}