☰

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.0
  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 disableCss = !GM_getValue(SUBREDDIT, DEFAULT_DISABLE_CSS)
  46.  
  47.     customCss.disabled = disableCss
  48.  
  49.     if (disableCss === DEFAULT_DISABLE_CSS) {
  50.         GM_deleteValue(SUBREDDIT)
  51.     } else {
  52.         GM_setValue(SUBREDDIT, disableCss)
  53.     }
  54. }
  55.  
  56. if (DISABLE_CSS) {
  57.     // 1) hide the page 2) disable the stylesheet 3) unhide the page
  58.     //
  59.     // NOTE we need to use `display: none` rather than `visibility: hidden` as
  60.     // the latter doesn't hide the background (which leads to a flash of styled
  61.     // content (FOSC) on subreddits with a custom background color and/or image)
  62.     //
  63.     // XXX hide the HTML element rather than the BODY element as the latter
  64.     // still results in a FOSC on some subreddits e.g. /r/firefox
  65.     style.display = 'none' // 1) hide the page
  66. }
  67.  
  68. document.addEventListener('DOMContentLoaded', () => {
  69.     // the custom stylesheet (LINK element) doesn't exist on all subreddit
  70.     // pages, e.g.:
  71.     //
  72.     //   ✔ /r/<subreddit>/about/rules/
  73.     //   x /r/<subreddit>/about/moderators/
  74.     const customCss = document.querySelector(CUSTOM_CSS)
  75.  
  76.     if (DISABLE_CSS) {
  77.         if (customCss) {
  78.             customCss.disabled = true // 2) disable the stylesheet
  79.         }
  80.  
  81.         style.removeProperty('display') // 3) unhide the page
  82.     }
  83.  
  84.     // don't show the toggle command if there's no custom stylesheet to toggle
  85.     if (customCss) {
  86.         GM_registerMenuCommand('Toggle Custom CSS', () => toggle(customCss))
  87.     }
  88. })