☰

Reddit Enhancer (Modern + Old Support)

Enhance Reddit UI: dark mode, wide layout, remove promoted/suggested, auto-expand comments, bottom-right floating gear menu, and more. Supports both new and old Reddit layouts.

// ==UserScript==
// @name         Reddit Enhancer (Modern + Old Support)
// @namespace    https://greasyfork.org/en/users/123456-eliminater74
// @version      1.2
// @description  Enhance Reddit UI: dark mode, wide layout, remove promoted/suggested, auto-expand comments, bottom-right floating gear menu, and more. Supports both new and old Reddit layouts.
// @author       Eliminater74
// @license      MIT
// @match        https://www.reddit.com/*
// @match        https://old.reddit.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function () {
    'use strict';

    const settingsKey = 'redditEnhancerSettings';
    const defaultSettings = {
        darkMode: false,
        hidePromoted: true,
        hideSuggested: true,
        wideMode: true,
        fontSize: '15px',
        lineHeight: '1.6',
        autoExpandComments: true,
        autoRefresh: false
    };

    let settings = JSON.parse(localStorage.getItem(settingsKey)) || defaultSettings;

    function saveSettings() {
        localStorage.setItem(settingsKey, JSON.stringify(settings));
    }

    function applySettings() {
        document.body.style.setProperty('--custom-font-size', settings.fontSize);
        document.body.style.setProperty('--custom-line-height', settings.lineHeight);
        document.body.classList.toggle('re-wide-mode', settings.wideMode);
        document.body.classList.toggle('re-dark-mode', settings.darkMode);
    }

    function hideElements() {
        const isOldReddit = location.hostname.startsWith('old.');

        if (settings.hidePromoted) {
            if (isOldReddit) {
                document.querySelectorAll('.promotedlink').forEach(el => el.remove());
            } else {
                document.querySelectorAll('span').forEach(el => {
                    if (el.textContent.toLowerCase().includes('promoted')) {
                        el.closest('div[data-testid="post-container"]')?.remove();
                    }
                });
            }
        }

        if (settings.hideSuggested) {
            if (isOldReddit) {
                document.querySelectorAll('.thing').forEach(el => {
                    const txt = el.innerText.toLowerCase();
                    if (txt.includes('because you follow') || txt.includes('suggested')) {
                        el.remove();
                    }
                });
            } else {
                document.querySelectorAll('div[data-testid="post-container"]').forEach(el => {
                    const txt = el.innerText.toLowerCase();
                    if (txt.includes('because you follow') || txt.includes('suggested')) {
                        el.remove();
                    }
                });
            }
        }
    }

    function autoExpandComments() {
        if (!settings.autoExpandComments) return;
        const isOldReddit = location.hostname.startsWith('old.');

        if (isOldReddit) {
            document.querySelectorAll('.morecomments a').forEach(btn => btn.click());
        } else {
            document.querySelectorAll('button[data-testid="comment_expand_button"]').forEach(btn => btn.click());
        }
    }

    function autoRefreshFeed() {
        if (settings.autoRefresh) {
            setTimeout(() => location.reload(), 1000 * 60 * 5); // 5 min
        }
    }

    function createSettingsMenu() {
        const menu = document.createElement('div');
        menu.id = 'reddit-enhancer-menu';
        menu.innerHTML = `
            <button id="re-toggle" title="Reddit Enhancer Settings">⚙️</button>
            <div id="re-panel">
                <label><input type="checkbox" id="re-darkMode"> Dark Mode</label><br>
                <label><input type="checkbox" id="re-hidePromoted"> Hide Promoted Posts</label><br>
                <label><input type="checkbox" id="re-hideSuggested"> Hide Suggested Posts</label><br>
                <label><input type="checkbox" id="re-wideMode"> Wide Layout</label><br>
                <label><input type="checkbox" id="re-autoExpandComments"> Auto Expand Comments</label><br>
                <label><input type="checkbox" id="re-autoRefresh"> Auto Refresh Feed</label><br>
                <label>Font Size: <input type="text" id="re-fontSize" value="${settings.fontSize}"></label><br>
                <label>Line Height: <input type="text" id="re-lineHeight" value="${settings.lineHeight}"></label><br>
                <button id="re-save">Save</button>
            </div>
        `;
        document.body.appendChild(menu);

        document.getElementById('re-darkMode').checked = settings.darkMode;
        document.getElementById('re-hidePromoted').checked = settings.hidePromoted;
        document.getElementById('re-hideSuggested').checked = settings.hideSuggested;
        document.getElementById('re-wideMode').checked = settings.wideMode;
        document.getElementById('re-autoExpandComments').checked = settings.autoExpandComments;
        document.getElementById('re-autoRefresh').checked = settings.autoRefresh;

        document.getElementById('re-toggle').onclick = () =>
            document.getElementById('re-panel').classList.toggle('open');

        document.getElementById('re-save').onclick = () => {
            settings.darkMode = document.getElementById('re-darkMode').checked;
            settings.hidePromoted = document.getElementById('re-hidePromoted').checked;
            settings.hideSuggested = document.getElementById('re-hideSuggested').checked;
            settings.wideMode = document.getElementById('re-wideMode').checked;
            settings.autoExpandComments = document.getElementById('re-autoExpandComments').checked;
            settings.autoRefresh = document.getElementById('re-autoRefresh').checked;
            settings.fontSize = document.getElementById('re-fontSize').value;
            settings.lineHeight = document.getElementById('re-lineHeight').value;
            saveSettings();
            applySettings();
            hideElements();
        };
    }

    function addStyles() {
        GM_addStyle(`
            #reddit-enhancer-menu {
                position: fixed;
                bottom: 10px;
                right: 10px;
                z-index: 99999;
                font-family: sans-serif;
            }
            #re-toggle {
                font-size: 18px;
                background: #333;
                color: #fff;
                border: none;
                border-radius: 6px;
                padding: 6px 8px;
                cursor: pointer;
            }
            #re-panel {
                display: none;
                position: absolute;
                bottom: 40px;
                right: 0;
                background: #fff;
                border: 1px solid #ccc;
                padding: 10px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0,0,0,0.2);
                background: #f9f9f9;
                color: #000;
                width: 240px;
            }
            #re-panel.open {
                display: block;
            }
            body.re-wide-mode ._1OVBBWLtHoSPfGCRaPzpTf,
            body.re-wide-mode .content,
            body.re-wide-mode .listing-outer {
                max-width: 100% !important;
                width: 100% !important;
            }
            body.re-dark-mode {
                background-color: #121212 !important;
                color: #e0e0e0 !important;
            }
            body.re-dark-mode #re-panel {
                background: #222;
                color: #eee;
                border-color: #444;
            }
        `);
    }

    function init() {
        addStyles();
        createSettingsMenu();
        applySettings();
        hideElements();
        autoExpandComments();
        autoRefreshFeed();
        new MutationObserver(hideElements).observe(document.body, { childList: true, subtree: true });
    }

    window.addEventListener('load', init);
})();