☰

Reddit Toggle Custom CSS

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

目前为 2020-11-20 提交的版本。查看 最新版本。

  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.1
  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. const CUSTOM_CSS = 'link[ref^="applied_subreddit_"]'
  24. const DEFAULT_DISABLE_CSS = false
  25. const SUBREDDIT = location.pathname.match(/\/r\/(\w+)/)[1]
  26. const DISABLE_CSS = GM_getValue(SUBREDDIT, DEFAULT_DISABLE_CSS)
  27.  
  28. // the definition of document-start varies across userscript engines and may
  29. // vary for the same userscript engine across different browsers. currently, the
  30. // following userscript-engines/browsers all expose document.documentElement (in
  31. // fact, they all expose document.head as well, though that's not guaranteed [1]
  32. // [2]):
  33. //
  34. //   - Greasemonkey 4 [3]
  35. //   - Tampermonkey for Firefox
  36. //   - Violentmonkey for Chrome
  37. //   - Violentmonkey for Firefox
  38. //
  39. // [1] https://github.com/violentmonkey/violentmonkey/releases/tag/v2.12.8rc16
  40. // [2] https://github.com/Tampermonkey/tampermonkey/issues/211#issuecomment-317116595
  41. // [3] Greasemonkey isn't supported as it doesn't support GM_registerMenuCommand
  42. const { style } = document.documentElement
  43.  
  44. function toggle (customCss) {
  45.     const oldDisableCss = GM_getValue(SUBREDDIT, DEFAULT_DISABLE_CSS)
  46.     const disableCss = !oldDisableCss
  47.  
  48.     customCss.disabled = disableCss
  49.  
  50.     if (disableCss === DEFAULT_DISABLE_CSS) {
  51.         GM_deleteValue(SUBREDDIT)
  52.     } else {
  53.         GM_setValue(SUBREDDIT, disableCss)
  54.     }
  55. }
  56.  
  57. if (DISABLE_CSS) {
  58.     // 1) hide the page 2) disable the stylesheet 3) unhide the page
  59.     //
  60.     // NOTE we need to use `display: none` rather than `visibility: hidden` as
  61.     // the latter doesn't hide the background (which leads to a flash of styled
  62.     // content (FOSC) on subreddits with a custom background color and/or image)
  63.     //
  64.     // XXX hide the HTML element rather than the BODY element as the latter
  65.     // still results in a FOSC on some subreddits e.g. /r/firefox
  66.     style.display = 'none' // 1) hide the page
  67. }
  68.  
  69. document.addEventListener('DOMContentLoaded', () => {
  70.     // the custom stylesheet (LINK element) doesn't exist on all subreddit
  71.     // pages, e.g.:
  72.     //
  73.     //   ✔ /r/<subreddit>/about/rules/
  74.     //   x /r/<subreddit>/about/moderators/
  75.     const customCss = document.querySelector(CUSTOM_CSS)
  76.  
  77.     if (DISABLE_CSS) {
  78.         if (customCss) {
  79.             customCss.disabled = true // 2) disable the stylesheet
  80.         }
  81.  
  82.         style.removeProperty('display') // 3) unhide the page
  83.     }
  84.  
  85.     // don't show the toggle command if there's no custom stylesheet to toggle
  86.     if (customCss) {
  87.         GM_registerMenuCommand('Toggle Custom CSS', () => toggle(customCss))
  88.     }
  89. })