Blur All Images

Description

This will blur all images, and when you hover over them it will slowly unblur

Match Pattern

<all_urls>

Script Code

(() => {
  const blurDuration = 2000;
  const blurredImages = new WeakMap();

  function blurImage(img) {
    img.style.transition = "filter 0s";
    img.style.filter = "blur(10px)";
    blurredImages.set(img, { progress: 0, timer: null });

    img.addEventListener("mouseenter", () => startUnblur(img));
    img.addEventListener("mouseleave", () => pauseUnblur(img));
  }

  function startUnblur(img) {
    const data = blurredImages.get(img);
    if (!data) return;

    let start = performance.now() - data.progress * blurDuration;
    cancelAnimationFrame(data.timer);

    function animate(time) {
      const elapsed = time - start;
      data.progress = Math.min(elapsed / blurDuration, 1);
      img.style.filter = `blur(${(1 - data.progress) * 10}px)`;

      if (data.progress < 1) {
        data.timer = requestAnimationFrame(animate);
      } else {
        blurredImages.delete(img);
      }
    }

    data.timer = requestAnimationFrame(animate);
  }

  function pauseUnblur(img) {
    const data = blurredImages.get(img);
    if (!data) return;
    cancelAnimationFrame(data.timer);
  }

  function handleNewNode(node) {
    if (node.tagName === "IMG" && !blurredImages.has(node)) {
      blurImage(node);
    }
    node.querySelectorAll?.("img").forEach(img => {
      if (!blurredImages.has(img)) blurImage(img);
    });
  }

  // MutationObserver on documentElement (works at document_start)
  const observer = new MutationObserver(mutations => {
    for (const mutation of mutations) {
      mutation.addedNodes.forEach(handleNewNode);
    }
  });

  observer.observe(document.documentElement, { childList: true, subtree: true });

  // Blur any images already present when script runs
  document.querySelectorAll("img").forEach(blurImage);
})();