BDS Blur Images

bds-blur-images.js

// ==UserScript==
// @name         BDS Blur Images
// @namespace    https://brubakerservices.org/
// @version      1.0
// @description  Blur images on all websites and unblur gradually when mouse is hovered over an image.
// @author       Dan Brubaker
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Add initial style code dynamically to blur all images.
    const style = document.createElement("style");
    style.textContent = 'img, [src*=".jpg"], [src*=".jpeg"], [src*=".png"], [src*=".gif"], [src*=".webp"], [src*=".tiff"], [style*=".jpg"], [style*=".jpeg"], [style*=".png"], [style*=".gif"], [style*=".webp"], [style*=".tiff"] {filter: blur(50px);}';
    document.head.appendChild(style);



    // Funition to unblur images and reload if more images are added.
    function BDSBlurImages() {

        // Find all images.
        const images = document.querySelectorAll('img, [src*=".jpg"], [src*=".jpeg" i], [src*=".png" i], [src*=".gif" i], [src*=".webp" i], [src*=".tiff" i], [style*=".jpg" i], [style*=".jpeg" i], [style*=".png" i], [style*=".gif" i], [style*=".webp" i], [style*=".tiff" i]');

        images.forEach(function (image) {

            image.style.filter = "blur(50px)";

            image.addEventListener("mouseover", function () {
                // Clear any existing timeout
                clearTimeout(image.blurTimeout);

                let blurAmount = 50;
                image.blurTimeout = setInterval(function () {
                    blurAmount -= 5;
                    if (blurAmount < 0) {
                        blurAmount = 0;
                        clearInterval(image.blurTimeout);
                    }
                    image.style.filter = `blur(${blurAmount}px)`;
                }, 200);
            });

            // Instantly re-apply blur upon mouseout.
            image.addEventListener("mouseout", function () {
                // Clear any existing timeout
                clearTimeout(image.blurTimeout);

                image.style.filter = "blur(50px)";
            });
        });
    }

    // Function to create and configure the MutationObserver
    function setupMutationObserver() {
        // Select the target node
        const targetNode = document.body;

        // Options for the observer (e.g., only observe changes in child elements)
        const config = { childList: true, subtree: true };

        // Callback function to execute when mutations are observed
        const callback = function (mutationsList, observer) {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    // DOM has changed, reload your function
                    BDSBlurImages();
                    break; // You can remove this if you want to reload on every change
                }
            }
        };

        // Create an observer instance linked to the callback function
        const observer = new MutationObserver(callback);

        // Start observing the target node for configured mutations
        observer.observe(targetNode, config);
    }

    // Call the setupMutationObserver function to set up the observer
    setupMutationObserver();

    // Now, any time the DOM changes, the callback function will be triggered,
    // and your specified function (BDSBlurImages in this case) will be reloaded.


})();