A violentmonkey script to blur images

kuasha.js

// ==UserScript==
// @name        Kuasha
// @version     1.0.0
// @description Blurs all images on a webpage by default
// @author      Vibe Coding
// @match       *://*/*
// @grant       none
// @exclude     https://openuserjs.org/*
// @exclude     https://greasyfork.org/*
// ==/UserScript==

(function () {
  "use strict";

  const BLUR_CLASS = "kuasha-blur-effect";
  const BLUR_EFFECT = "blur(10px)";
  const IMAGE_SELECTOR = "img, ytd-thumbnail img";
  let blurEnabled = true;
  let toggleButton;

  function addGlobalStyle() {
    const style = document.createElement("style");
    style.textContent = `
      .kuasha-blur-container {
        position: fixed;
        z-index: 9999;
        display: flex;
        gap: 8px;
        cursor: move;
        height: 36px;
        line-height: 36px;
      }
      .kuasha-blur-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        background-color: #111827;
        color: #e5e7eb;
        border: 1px solid #4b5563;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        font-family: monospace;
        cursor: pointer;
        transition: all 0.2s ease, transform 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        user-select: none;
        flex-shrink: 0;
        height: 36px;
        line-height: normal;
      }
      .kuasha-blur-btn:hover {
        background-color: #1f2937;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        transform: scale(1.02);
      }
      .kuasha-blur-managed-image {
        transition: filter 0.3s ease;
        clip-path: inset(0); /* Prevents blur bleeding */
      }
      .kuasha-blur-managed-image.${BLUR_CLASS} {
        filter: ${BLUR_EFFECT};
      }
      .kuasha-blur-managed-image:hover {
        filter: none !important;
      }
    `;
    document.head.appendChild(style);
  }

  function createButton(text, clickHandler) {
    const btn = document.createElement("button");
    btn.className = "kuasha-blur-btn";
    btn.textContent = text;
    btn.onclick = clickHandler;
    return btn;
  }

  function makeDraggable(element) {
    element.style.top = "16px";
    element.style.left = `${window.innerWidth - element.offsetWidth - 16}px`;

    let pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;
    element.onmousedown = dragMouseDown;

    function dragMouseDown(e) {
      e.preventDefault();
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
      e.preventDefault();
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      element.style.top = `${element.offsetTop - pos2}px`;
      element.style.left = `${element.offsetLeft - pos1}px`;
    }

    function closeDragElement() {
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }

  function createToggleButton() {
    const container = document.createElement("div");
    container.className = "kuasha-blur-container";

    toggleButton = createButton("Blur 1", toggleBlur);
    container.append(
      createButton("Hide", () => container.remove()),
      toggleButton
    );

    document.body.appendChild(container);
    makeDraggable(container);
  }

  function applyBlur() {
    document.querySelectorAll(IMAGE_SELECTOR).forEach((img) => {
      if (!img.classList.contains("kuasha-blur-managed-image")) {
        img.classList.add("kuasha-blur-managed-image");
      }
      img.classList.toggle(BLUR_CLASS, blurEnabled);
    });
  }

  function toggleBlur() {
    blurEnabled = !blurEnabled;
    applyBlur();
    toggleButton.textContent = blurEnabled ? "Blur 1" : "Blur 0";
  }

  addGlobalStyle();

  new MutationObserver(applyBlur).observe(document.body, {
    childList: true,
    subtree: true,
  });

  window.addEventListener("load", () => {
    createToggleButton();
    applyBlur();
  });
})();