Userscript for Wikipedia: Blur images in health articles

wikipedia-blur-health-images.user.js

// ==UserScript==
// @name        Userscript for Wikipedia: Blur images in health articles
// @description When viewing a Wikipedia article about a health topic, blur all images by default
// @version     5
// @grant       none
// @match       https://*.wikipedia.org/wiki/*
// ==/UserScript==

// Copied from https://stackoverflow.com/a/61511955/473467
function waitForElm(selector) {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }

    const observer = new MutationObserver(mutations => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });

    // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
}

function blurImage(image) {
  image.style.filter = "blur(2rem)";

  const container = image.closest("figure") || image.closest("div");
  container.style.overflow = "hidden";

  const button = createButton(container);
  const buttonContainer = container.querySelector("figcaption") || container;
  buttonContainer.appendChild(button);
}

function createButton(container) {
  const button = document.createElement("button");
  button.textContent = "🙈";
  button.style.float = "right";
  button.style.position = "relative";
  button.style.left = "-10px";
  button.addEventListener("click", (event) => {
    const img = container.querySelector("img");

    if (img) {      
      img.style.filter = "inherit";
    }
    event.target.remove();
  });

  return button;
}

waitForElm('main#content').then((mainContent) => {
  console.log('Article loaded');
  const images = { blurred: 0, skipped: 0 };

  const textContent = document.getElementById("content").textContent;
  if (textContent.indexOf("ICD-10") >= 0 || textContent.indexOf("CIM-10") >= 0) {

    mainContent.querySelectorAll("img:is([typeof^='mw:File'] img):not(.references img)").forEach(image => {
      // Skip decorative images
      if (image.width + image.height < 100) {
        images.skipped += 1;
        return;
      }

      blurImage(image);
      images.blurred += 1;
    });

    console.debug("Found %d images, blurred %d, skipped %d", images.blurred + images.skipped, images.blurred, images.skipped);
  }
});