☰

4chan Image Blur Toggle

Blurs images on 4chan. Catalog view - double click image to unblur and open the thread. Thread view - click image to unblur, click again to reapply blur.

当前为 2024-10-28 提交的版本，查看 最新版本。

// ==UserScript==
// @name         4chan Image Blur Toggle
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Blurs images on 4chan. Catalog view - double click image to unblur and open the thread. Thread view - click image to unblur, click again to reapply blur.
// @author       Trojihn
// @license      MIT
// @match        *://boards.4chan.org/*
// @grant        none
// @icon         https://s.4cdn.org/image/favicon.ico
// ==/UserScript==

(function() {
    'use strict'; // Use strict mode to enforce cleaner JavaScript

    // Function to apply blur and toggle on click for images
    function applyBlur(img) {
        img.style.filter = 'blur(15px)'; // Apply a 15px blur effect to the image
        img.style.transition = 'filter 0.2s'; // Add a transition for smooth unblurring

        let isBlurred = true; // Track the blur state

        // Add a click event listener to the image
        img.addEventListener('click', event => {
            event.preventDefault(); // Prevent the default action (navigating to the link) immediately

            // Check if the image is currently blurred
            if (isBlurred) {
                img.style.filter = 'none'; // Unblur the image
                isBlurred = false; // Update the state to indicate the image is now unblurred
            } else {
                // If the image is unblurred and clicked again, check if we are in thread view
                const isThreadView = img.closest('.fileThumb'); // Check if the image is in thread view
                if (isThreadView) {
                    img.style.filter = 'blur(15px)'; // Reapply the blur effect
                    isBlurred = true; // Update the state to indicate the image is now blurred
                } else {
                    // If in catalog view, allow navigation
                    const link = img.closest('a'); // Find the closest anchor tag (link) around the image
                    if (link) {
                        window.location.href = link.href; // Navigate to the thread URL found in the link's href attribute
                    }
                }
            }
        });
    }

    // Function to apply blur to images in both thread and catalog views
    function blurAllImages() {
        // Select all images in thread view
        const threadImages = document.querySelectorAll('.fileThumb img');
        // Select all images in catalog view using the class "thumb"
        const catalogImages = document.querySelectorAll('.thumb');

        // Apply the blur effect to all selected images
        [...threadImages, ...catalogImages].forEach(applyBlur);
    }

    // Call the function to apply blur to images initially
    blurAllImages();

    // Create a MutationObserver to watch for new images added to the page dynamically
    const observer = new MutationObserver(mutations => {
        // Iterate through each mutation (change) detected
        mutations.forEach(mutation => {
            // For each added node in the mutation
            mutation.addedNodes.forEach(node => {
                // Check if the added node is an element node and matches the image selectors
                if (
                    node.nodeType === 1 && // Ensure it's an element node
                    (node.matches('.fileThumb img') || node.matches('.thumb')) // Match either thread or catalog images
                ) {
                    applyBlur(node); // Apply the blur effect to the new image
                }
            });
        });
    });

    // Start observing the document body for changes in its child nodes
    observer.observe(document.body, { childList: true, subtree: true });
})();