Reddit Toggle Custom CSS

Persistently disable/re-enable custom subreddit styles via a userscript command

Versión del día 20/11/2020. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name          Reddit Toggle Custom CSS
// @description   Persistently disable/re-enable custom subreddit styles via a userscript command
// @author        chocolateboy
// @copyright     chocolateboy
// @version       1.4.3
// @namespace     https://github.com/chocolateboy/userscripts
// @license       GPL: http://www.gnu.org/copyleft/gpl.html
// @include       http://reddit.com/r/*
// @include       https://reddit.com/r/*
// @include       http://*.reddit.com/r/*
// @include       https://*.reddit.com/r/*
// @grant         GM_deleteValue
// @grant         GM_getValue
// @grant         GM_setValue
// @grant         GM_registerMenuCommand
// @run-at        document-start
// @inject-into   auto
// ==/UserScript==

// inspired by: http://userscripts-mirror.org/scripts/show/109818

const CUSTOM_CSS = 'link[ref^="applied_subreddit_"]'
const DISABLE_CSS = false
const SUBREDDIT = location.pathname.match(/\/r\/(\w+)/)[1]

function disableCss () {
    // NOTE we need to disable the display rather than setting its visibility to
    // hidden as the latter doesn't hide the background (which leads to a flash
    // of styled content (FOSC) on subreddits with a custom background color
    // and/or image)

    // XXX hide the HTML element rather than the BODY element as the latter
    // still results in a FOSC on some subreddits e.g. /r/firefox

    // the definition of document-start varies between userscript engines and
    // may vary for the same userscript engine across different browsers.
    // currently, the following userscript-engines/browsers all expose
    // document.documentElement (in fact, they all expose document.head as well,
    // currently, though that is not guaranteed [1] [2]):
    //
    // - Greasemonkey 4 [3]
    // - Tampermonkey for Firefox
    // - Violentmonkey for Chrome
    // - Violentmonkey for Firefox
    //
    // [1] https://github.com/violentmonkey/violentmonkey/releases/tag/v2.12.8rc16
    // [2] https://github.com/Tampermonkey/tampermonkey/issues/211#issuecomment-317116595
    // [3] Greasemonkey isn't supported as it doesn't support GM_registerMenuCommand

    const { style } = document.documentElement

    style.display = 'none'

    document.addEventListener('DOMContentLoaded', () => {
        const customCss = document.querySelector(CUSTOM_CSS)

        // not defined on all subreddit pages, e.g.:
        //
        //   ✔ /r/<subreddit>/about/rules/
        //   x /r/<subreddit>/about/moderators/

        if (customCss) {
            customCss.disabled = true
        }

        style.removeProperty('display')
    })
}

function toggle () {
    const disableCss = !GM_getValue(SUBREDDIT, DISABLE_CSS)

    document.querySelector(CUSTOM_CSS).disabled = disableCss

    if (disableCss === DISABLE_CSS) {
        GM_deleteValue(SUBREDDIT)
    } else {
        GM_setValue(SUBREDDIT, disableCss)
    }
}

if (GM_getValue(SUBREDDIT, DISABLE_CSS)) {
    disableCss()
}

GM_registerMenuCommand('Toggle Custom CSS', toggle)