Old Reddit show image in comments

This script displays images in the comments of old Reddit. It also allows you to expand the image by clicking on it!
当前为 2024-07-26 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Old Reddit show image in comments
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  This script displays images in the comments of old Reddit. It also allows you to expand the image by clicking on it!
// @author       minnie
// @match        https://old.reddit.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    // Function to find and replace <a> tags with <img> tags
    function replaceLinks() {
        // Select all <a> tags that are children of <p> elements
        const links = document.querySelectorAll('p > a');
        links.forEach(link => {
            // Check if the link's inner HTML matches '&lt;image&gt;'
            if (link.innerHTML === '&lt;image&gt;') {
                // Create a new <img> element
                const img = document.createElement('img');
                // Set the src attribute of the <img> to the href of the <a>
                img.src = link.href;
                // Apply any styles from the <a> to the <img>
                img.style = link.style.cssText;
                img.style.height = '300px'; // Set height to 300 pixels
                img.style.width = 'auto'; // Set width to auto

                // Replace the <a> with the <img> in the DOM
                link.parentNode.replaceChild(img, link);

                // Add click event listener to expand the image
                img.addEventListener('click', () => {
                    expandImage(img);
                });
            }
        });
    }

    // Function to observe for dynamically added content
    function observeDynamicContent() {
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                // Check if there are added nodes and if any is an element node
                if (mutation.addedNodes.length && Array.from(mutation.addedNodes).some(node => node.nodeType === 1)) {
                    replaceLinks();
                }
            });
        });

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

    // Function to expand image
    function expandImage(image) {
        // Create a new div element for the overlay
        const overlay = document.createElement('div');
        const expandedImage = document.createElement('img');

        expandedImage.src = image.src;
        overlay.id = 'expandedImage';




        // Apply CSS styles to the overlay
        overlay.classList.add("expandedImage");
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.display = 'flex';
        overlay.style.justifyContent = 'center';
        overlay.style.alignItems = 'center';
        overlay.style.zIndex = '1000';

        // Apply CSS to the expanded image
        expandedImage.style.width = 'auto'; // Maintain aspect ratio
        expandedImage.style.height = '90%'; // Maintain aspect ratio
        expandedImage.style.borderRadius = '3px';

        // Append the expanded image to the overlay
        overlay.appendChild(expandedImage);

        // Add custom CSS
        const expandedImageCSS = document.createElement('style');
        const css = `
            div#expandedImage {
                 background-color: rgba(0, 0, 0, 0.7) !important;
                 backdrop-filter: blur(4px) grayscale(50%);
            }
        `;
        expandedImageCSS.textContent = css;
        document.head.appendChild(expandedImageCSS);

        // Append the overlay to the body
        document.body.appendChild(overlay);

        // Add click event listener to remove the overlay
        overlay.addEventListener('click', () => {
            overlay.remove();
        });
    }

    replaceLinks();
    observeDynamicContent();
})();
欢迎访问Greasy Fork镜像
