☰

Reddit Toggle Custom CSS

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

  1. // ==UserScript==
  2. // @name          Reddit Toggle Custom CSS
  3. // @description   Persistently disable/re-enable custom subreddit styles via a userscript command
  4. // @author        chocolateboy
  5. // @copyright     chocolateboy
  6. // @version       1.5.2
  7. // @namespace     https://github.com/chocolateboy/userscripts
  8. // @license       GPL: http://www.gnu.org/copyleft/gpl.html
  9. // @include       http://reddit.com/r/*
  10. // @include       https://reddit.com/r/*
  11. // @include       http://*.reddit.com/r/*
  12. // @include       https://*.reddit.com/r/*
  13. // @grant         GM_deleteValue
  14. // @grant         GM_getValue
  15. // @grant         GM_setValue
  16. // @grant         GM_registerMenuCommand
  17. // @run-at        document-start
  18. // @inject-into   auto
  19. // ==/UserScript==
  20.  
  21. // inspired by: http://userscripts-mirror.org/scripts/show/109818
  22.  
  23. // XXX the @inject-into directive is needed for the script to work on
  24. // Violentmonkey if JavaScript is disabled (i.e. not because of CSP):
  25. // https://github.com/violentmonkey/violentmonkey/issues/302#issuecomment-485271317
  26.  
  27. const CUSTOM_CSS = 'link[ref^="applied_subreddit_"]'
  28. const DEFAULT_DISABLE_CSS = false
  29. const SUBREDDIT = location.pathname.match(/\/r\/(\w+)/)[1]
  30. const DISABLE_CSS = GM_getValue(SUBREDDIT, DEFAULT_DISABLE_CSS)
  31.  
  32. function toggle (customCss) {
  33.     const oldDisableCss = GM_getValue(SUBREDDIT, DEFAULT_DISABLE_CSS)
  34.     const disableCss = !oldDisableCss
  35.  
  36.     customCss.disabled = disableCss
  37.  
  38.     if (disableCss === DEFAULT_DISABLE_CSS) {
  39.         GM_deleteValue(SUBREDDIT)
  40.     } else {
  41.         GM_setValue(SUBREDDIT, disableCss)
  42.     }
  43. }
  44.  
  45. // the definition of document-start varies across userscript engines and may
  46. // vary for the same userscript engine across different browsers. currently, the
  47. // following userscript-engines/browsers all expose document.documentElement (in
  48. // fact, they all expose document.head as well, though that's not guaranteed [1]
  49. // [2]):
  50. //
  51. //   - Greasemonkey 4 [3]
  52. //   - Tampermonkey for Firefox
  53. //   - Violentmonkey for Chrome
  54. //   - Violentmonkey for Firefox
  55. //
  56. // [1] https://github.com/violentmonkey/violentmonkey/issues/420
  57. // [2] https://github.com/Tampermonkey/tampermonkey/issues/211#issuecomment-317116595
  58. // [3] Greasemonkey isn't supported as it doesn't support GM_registerMenuCommand
  59. const { style } = document.documentElement
  60.  
  61. if (DISABLE_CSS) {
  62.     // 1) hide the page 2) disable the stylesheet 3) unhide the page
  63.     //
  64.     // NOTE we need to use `display: none` rather than `visibility: hidden` as
  65.     // the latter doesn't hide the background (which leads to a flash of styled
  66.     // content (FOSC) on subreddits with a custom background color and/or image)
  67.     //
  68.     // XXX hide the HTML element rather than the BODY element as the latter
  69.     // still results in a FOSC on some subreddits e.g. /r/firefox
  70.     style.display = 'none' // 1) hide the page
  71. }
  72.  
  73. document.addEventListener('DOMContentLoaded', () => {
  74.     // the custom stylesheet (LINK element) doesn't exist on all subreddit
  75.     // pages, e.g.:
  76.     //
  77.     //   ✔ /r/<subreddit>/about/rules/
  78.     //   x /r/<subreddit>/about/moderators/
  79.     const customCss = document.querySelector(CUSTOM_CSS)
  80.  
  81.     if (DISABLE_CSS) {
  82.         if (customCss) {
  83.             customCss.disabled = true // 2) disable the stylesheet
  84.         }
  85.  
  86.         style.removeProperty('display') // 3) unhide the page
  87.     }
  88.  
  89.     // don't show the toggle command if there's no custom stylesheet to toggle
  90.     if (customCss) {
  91.         GM_registerMenuCommand('Toggle Custom CSS', () => toggle(customCss))
  92.     }
  93. })