Reddit Direct Image Display

Show only the image on Reddit CDN media pages, remove all HTML wrapper
安裝腳本 ?
換行
// ==UserScript==
// @name         Reddit Direct Image Display
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Show only the image on Reddit CDN media pages, remove all HTML wrapper
// @author       pshot
// @license      MIT
// @match        *://reddit.com/*
// @match        *://www.reddit.com/*
// @match        *://i.redd.it/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Check if we're on a CDN media page
    function isCDNMediaPage() {
        return document.querySelector('[pagetype="cdn_media_page"]') !== null;
    }

    function extractAndDisplayImage() {
        // Try to find the image element
        const imgElement = document.querySelector('img[src*="redd.it"]');

        if (imgElement) {
            const imageSrc = imgElement.src;
            const imageAlt = imgElement.alt || 'Image';

            // Clear the entire page
            document.documentElement.innerHTML = '';
            document.body.innerHTML = '';

            // Set background to black for better image viewing
            document.documentElement.style.backgroundColor = '#000';
            document.documentElement.style.margin = '0';
            document.documentElement.style.padding = '0';

            document.body.style.backgroundColor = '#000';
            document.body.style.margin = '0';
            document.body.style.padding = '0';
            document.body.style.display = 'flex';
            document.body.style.justifyContent = 'center';
            document.body.style.alignItems = 'center';

            // Create new image element
            const newImg = document.createElement('img');
            newImg.src = imageSrc;
            newImg.alt = imageAlt;
            newImg.style.maxHeight = '100vh';
            newImg.style.maxWidth = '100vw';
            newImg.style.objectFit = 'contain';

            // Add click to zoom functionality
            newImg.addEventListener('click', function() {
                if (this.style.maxHeight === '100vh') {
                    this.style.maxHeight = 'none';
                    this.style.maxWidth = 'none';
                    this.style.objectFit = 'auto';
                } else {
                    this.style.maxHeight = '100vh';
                    this.style.maxWidth = '100vw';
                    this.style.objectFit = 'contain';
                }
            });
            document.body.style.display = "block";
            document.body.appendChild(newImg);
        }
    }

    // Run when page loads
    window.addEventListener('load', function() {
        if (isCDNMediaPage()) {
            // Small delay to ensure DOM is fully ready
            setTimeout(extractAndDisplayImage, 100);
        }
    });

    // Also try immediately in case page is already loaded
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        if (isCDNMediaPage()) {
            setTimeout(extractAndDisplayImage, 100);
        }
    }
})();