☰

Inverter

Inverts webpages with a hotkey

目前为 2017-06-11 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Inverter
  3. // @icon         http://i.imgur.com/wBrRGXc.png
  4. // @namespace    skoshy.com
  5. // @version      0.2.25
  6. // @description  Inverts webpages with a hotkey
  7. // @author       Stefan Koshy
  8. // @run-at       document-start
  9. // @match        *://*/*
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // @grant        GM_deleteValue
  13. // ==/UserScript==
  14.  
  15. var currentSite = '';
  16. var scriptId = 'inverter';
  17.  
  18. var timers = {};
  19. timers.lastToggle = 0; // default the last toggle to nothing
  20.  
  21. var options = {};
  22. options.toggleDelayMs = 200; // number of milliseconds delay there needs to be to switch from toggle mode to save inversion mode
  23.  
  24. var css = {};
  25. css.defaults = {};
  26. css.overrides = {};
  27.  
  28. css.common = {};
  29. css.common.css = `
  30. html {
  31.   filter: invert(1);
  32.   min-height: 100%;
  33.   background-color: black;
  34. }
  35.  
  36. img, figure, video, picture {
  37.   filter: invert(1);
  38. }
  39.  
  40. figure img { /* no need to invert imgs in figures */
  41.   filter: invert(0);
  42. }
  43.  
  44. *[style*="url(/"],
  45. *[style*="blob:"],
  46. *[style*="url('https:"],
  47. *[style*="url('http:"],
  48. *[style*="url('://"],
  49. *[style*="url('blob:"],
  50. *[style*='url("https:'],
  51. *[style*='url("https:'],
  52. *[style*='url("http:'],
  53. *[style*='url("://'],
  54. *[style*='url("blob:']
  55. { filter: invert(1); }
  56.  
  57. body, body > div {
  58.   background-color: white;
  59. }
  60.  
  61. iframe[src*="youtube.com"], iframe[src*="vimeo.com"] {
  62.   filter: invert(1);
  63. }
  64.  
  65. twitterwidget::shadow .MediaCard-media {
  66.   filter: invert(1);
  67. }
  68.  
  69. twitterwidget::shadow .Avatar {
  70.   filter: invert(1);
  71. }
  72.  
  73. .gbii /* This is for multiple Google Domains to reinvert the profile icon in the top right */
  74. {filter: invert(1);}
  75. `;
  76. css.messenger = {};
  77. css.messenger.includeCommon = false;
  78. css.messenger.javascriptOnce = function() {
  79.     var chatColor = '';
  80.     
  81.     setInterval(function() {
  82.         var chatColorEl = document.querySelector('._fl2 [data-testid="info_panel_button"] svg polygon, ._fl2 [data-testid="info_panel_button"] svg path'); /* Two elements, depends on if the info button is pressed or not */
  83.         if (!chatColorEl || chatColorEl.style.fill == chatColor) return;
  84.         
  85.         chatColor = chatColorEl.style.fill;
  86.         
  87.         var newCss = `
  88.           ._43by
  89.           { background: `+chatColor.replace('rgb', 'rgba').replace(')', ', .3)')+` !important; }
  90.         `;
  91.         
  92.         addGlobalStyle(newCss, scriptId+'-css', isInverterEnabled(), scriptId+'-messengerSpecialCss');
  93.     }, 500);
  94. };
  95. css.messenger.css = `
  96. body
  97. ,._5i_d * /* Text from YouTube/video share */
  98. { color: white; }
  99.  
  100. /* Bug Fixes */
  101. ._kmc /* message box, min height fix */
  102. { min-height: 26px !important; }
  103.  
  104. ._4sp8 {
  105. background: black !important;
  106. }
  107.  
  108. ._4rv3 /* Message box container */
  109. ,._5743 * /* Top name */
  110. ,._1ht6 /* Names in the sidebar */
  111. ,._1ht3 ._1htf /* Unread message in sidebar */
  112. ,._1tqi ._4qba /* App Name */
  113. ,._5swm * /* Text from link shares */
  114. ,._hh7 a /* Link from received message */
  115. ,._55r /* video chat notices */
  116. ,._1enh ._364g /* from searching, contact names */
  117. ,._225b /* from searching, header */
  118. ,._lll * /* Intro message text for first time chatting someone */
  119. ,._3szq /* Info Box text */
  120. ,._58ak input /* Composing new message text box */
  121. ,._1jt6 ._3oh- /* Info box contact name */
  122. ,._4rph ._4rpj /* Info box group chat, add people */
  123. ,._4_j5 ._364g /* Info box group chat, additional people */
  124. ,._2jnv /* Info box group chat, chat name */
  125. { background: transparent !important; color: white !important; }
  126.  
  127. ._2y8_ * /* Popup boxes text */
  128. { color: black; }
  129.  
  130. ._29_7 ._hh7 /* receiving message boxes */
  131. { background: rgba(255,255,255,.12) !important; color: white; }
  132.  
  133. ._43by /* sent message boxes */
  134. { background: rgba(0, 132, 255,.45) !important; transition: background 0.3s ease; }
  135.  
  136. ._497p /* Timestamps and joining video chat messages in the chat */
  137. ,._1ht7 /* timestamps in sidebar */
  138. ,._ih3 /* Names in group chat */
  139. ,._5iwm ._58al::placeholder /* placeholder text for search */
  140. ,._1lj0 /* Info Box Headers */
  141. ,._3eus, ._5uh /* Info Box Person Description */
  142. ,._2y8z /* Composing new message "To" field" */
  143. ,._58ak input::placeholder /* Composing new message text box, placeholder */
  144. ,._5i_d .__6m /* Link share URL */
  145. ,._3x6v /* Info box, side text next to notifications if notifications are muted */
  146. { color: rgba(255,255,255,.6) !important; }
  147.  
  148. ._29_7 ._52mr /* Borders of message bubble stuff, like video chat notifications, links, etc, received */
  149. ,._nd_ ._52mr /* Same as above, but sent */
  150. { border-color: rgba(255,255,255,.2); }
  151.  
  152. .sp_1g5zN81j-1P /* tiny icons, like when a video chat ends */
  153. ,._5iwm ._58ak::before /* search icon */
  154. ,.sp_6SI1R2TSgtb /* more tiny icons */
  155. ,._2t5t /* more icons, like the forward icon */
  156. { filter: invert(1); }
  157.  
  158. a._4ce_ /* games icon */
  159. ,._4rv6 /* stickers icon */
  160. { opacity: .7 !important; filter: invert(1) !important; }
  161.  
  162. ._5iwm ._58al /* search box */
  163. { background: rgba(255,255,255,.3) !important; color: white !important; }
  164.  
  165. ::-webkit-scrollbar-track
  166. {
  167.   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
  168.   border-radius: 10px !important;
  169.   background-color: #333 !important;
  170. }
  171.  
  172. ::-webkit-scrollbar
  173. {
  174.   width: 12px !important;
  175.   background-color: transparent !important;
  176. }
  177.  
  178. ::-webkit-scrollbar-thumb
  179. {
  180.   border-radius: 10px !important;
  181.   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3) !important;
  182.   background-color: #555 !important;
  183. }
  184. `;
  185. css.gmail = {};
  186. css.gmail.css = `
  187. iframe[src*="hangouts.google.com"]
  188. { filter: invert(1); }
  189. `;
  190. css.inbox = {};
  191. css.inbox.css = `
  192. img[src*="ssl.gstatic.com"], img[src*="www.gstatic.com"]
  193. { filter: invert(0); }
  194. nav#GH > .b4 /* Header bar, kepp the same color */
  195. { filter: invert(1); }
  196. iframe[src*="hangouts.google.com"]
  197. { filter: invert(1); }
  198. .cf /* Shipping notification headers */
  199. { filter: invert(1); }
  200. .xW /* Shipping icon */
  201. { filter: invert(1) !important; }
  202. `;
  203. css.hangouts = {};
  204. css.hangouts.enableInIframe = true;
  205. css.hangouts.css = `
  206. .Ik:not(.uB) /* Chat Headers */
  207. { filter: invert(1); }
  208. `;
  209. css.youtube = {};
  210. css.youtube.css = `
  211. .player-api video
  212. {filter: inherit;}
  213.  
  214. #theater-background
  215. {background: white !important;}
  216.  
  217. #player-playlist,
  218. .player-api,
  219. #c4-header-bg-container /* Banner on YouTube channel page */
  220. {filter: invert(1);}
  221.  
  222. #player-playlist img,
  223. #c4-header-bg-container img /* Banner on YouTube channel page */
  224. {filter: invert(0);}
  225.  
  226. `;
  227. css.facebook = {};
  228. css.facebook.css = `
  229. i /* Emoji and other small icons */
  230. {filter: invert(1);}
  231. `;
  232. css.twitter = {};
  233. css.twitter.css = `
  234. .PermalinkOverlay-with-background /* overlay when clicking on a tweet */
  235. {background: rgba(255,255,255,.55) !important;}
  236.  
  237. iframe
  238. {background-color: white; filter: invert(1);}
  239.  
  240. .is-generic-video {
  241.   filter: invert(1);
  242. }
  243. `;
  244. css.soundcloud = {};
  245. css.soundcloud.css = `
  246. span[style]
  247. `;
  248. css.pocketcasts = {};
  249. css.pocketcasts.css = `
  250. #header {filter: invert(1);}
  251. #audio_player {filter: invert(1); background-color: black;}
  252.  
  253. #header img {filter: invert(0);}
  254. #audio_player img {filter: invert(0);}
  255.  
  256. #audio_player #audio_player_wrapper .player_top,
  257. #audio_player #audio_player_wrapper .player_bottom
  258. {background-color: transparent;}
  259. `;
  260. css.none = {};
  261. css.none.css = ``;
  262.  
  263.  
  264. function addGlobalStyle(css, className, enabled, id) {
  265.     var head, style;
  266.     head = document.getElementsByTagName('head')[0];
  267.     if (!head) { return; }
  268.     
  269.     // check to see if this element already exists, if it does override it
  270.     var oldEl = document.getElementById(id);
  271.     
  272.     style = document.createElement('style');
  273.     style.type = 'text/css';
  274.     style.innerHTML = css;
  275.     style.id = id;
  276.     style.className = className;
  277.     head.appendChild(style);
  278.     style.disabled = !enabled;
  279.     
  280.     // delete old element if it exists
  281.     if (oldEl) {
  282.         oldEl.parentNode.removeChild(oldEl);
  283.     }
  284. }
  285.  
  286. function parseCSS(parsed) {
  287.     for (attribute in css.defaults) {
  288.         exceptionToReplace = new RegExp('{{'+attribute+'}}', 'g');
  289.         parsed = parsed.replace(exceptionToReplace, css['defaults'][attribute]);
  290.     }
  291.  
  292.     return parsed;
  293. }
  294.  
  295. document.addEventListener("keydown", function(e) {
  296.   if (e.altKey === true && e.shiftKey === false && e.ctrlKey === true && e.metaKey === false && e.code == 'KeyI') {
  297.   var timestamp = new Date();
  298.   timestamp = timestamp.getTime();
  299.   
  300.   if (timers.lastToggle > timestamp-options.toggleDelayMs) {
  301.     if (isInverterEnabled()) {
  302.     GM_setValue('enabled_'+document.domain, true);
  303.     alert('Saved inversion for '+document.domain);
  304.     } else {
  305.     GM_deleteValue('enabled_'+document.domain);
  306.     alert('Deleted inversion setting for '+document.domain);
  307.     }
  308.   } else {
  309.     // toggle style
  310.     var cssEls = document.getElementsByClassName(scriptId+'-css');
  311.  
  312.     if (isInverterEnabled()) {
  313.       for (let i = 0; i < cssEls.length; i++) {
  314.           cssEls[i].disabled = true;
  315.       }
  316.     } else {
  317.       for (let i = 0; i < cssEls.length; i++) {
  318.           cssEls[i].disabled = false;
  319.       }
  320.     }
  321.   }
  322.   
  323.   timers.lastToggle = timestamp;
  324.   }
  325. });
  326.  
  327. function isInverterEnabled() {
  328.   var cssEl = document.getElementById(scriptId+'-css');
  329.   return cssEl.disabled === false;
  330. }
  331.  
  332. function getSetCurrentSite() {
  333.     var url = document.documentURI;
  334.   
  335.   currentSite = 'none'
  336.  
  337.     if (url.indexOf('messenger.com') != -1) currentSite = 'messenger';
  338.     if (url.indexOf('youtube.com') != -1) currentSite = 'youtube';
  339.     if (url.indexOf('twitter.com') != -1) currentSite = 'twitter';
  340.     if (url.indexOf('inbox.google.com') != -1) currentSite = 'inbox';
  341.   if (url.indexOf('hangouts.google.com') != -1) currentSite = 'hangouts';
  342.   if (url.indexOf('mail.google.com') != -1) currentSite = 'gmail';
  343.   if (url.indexOf('facebook.com') != -1) currentSite = 'facebook';
  344.   if (url.indexOf('play.pocketcasts.com') != -1) currentSite = 'pocketcasts';
  345.  
  346.   console.log('Detected site for '+scriptId+' script: '+currentSite);
  347.   
  348.     return currentSite;
  349. }
  350.  
  351. function init() {
  352.     getSetCurrentSite();
  353.  
  354.     var styleEnabled = GM_getValue( 'enabled_'+document.domain , false );
  355.   
  356.     console.log('Inversion Enabled for site ('+currentSite+'): '+styleEnabled);
  357.     if (inIframe() && isFalsy(css[currentSite].enableInIframe)) { styleEnabled = false; }
  358.     
  359.     var cssToInclude = '';
  360.     
  361.     if (css[currentSite].includeCommon === false) {}
  362.     else { cssToInclude += css.common.css; }
  363.     
  364.     if (css[currentSite].javascriptOnce) { css[currentSite].javascriptOnce(); }
  365.     
  366.     cssToInclude += css[currentSite].css;
  367.  
  368.     addGlobalStyle(parseCSS(
  369.         cssToInclude
  370.     ), scriptId+'-css', styleEnabled, scriptId+'-css');
  371. }
  372.  
  373. init();
  374.  
  375. /*
  376. * Utility functions
  377. */
  378.  
  379. function isTruthy(item) {
  380.   return !isFalsy(item);
  381. }
  382.  
  383. function isFalsy(item) {
  384.   if (
  385.     !item
  386.     || (typeof item == "object" && Object.keys(item).length == 0) // for empty objects, like {}, []
  387.   )
  388.     return true;
  389.   else
  390.     return false;
  391. }
  392.  
  393. function addEvent(obj, evt, fn) {
  394.     if (obj.addEventListener) {
  395.         obj.addEventListener(evt, fn, false);
  396.     }
  397.     else if (obj.attachEvent) {
  398.         obj.attachEvent("on" + evt, fn);
  399.     }
  400. }
  401.  
  402. function inIframe () {
  403.     try {
  404.         return window.self !== window.top;
  405.     } catch (e) {
  406.         return true;
  407.     }
  408. }