☰

Reddit Toggle Custom CSS

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

当前为 2020-11-17 提交的版本，查看 最新版本。

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