Grayscaler

Render entire page in grayscale (greyscale). Updated 2017-07-08.

  1. // ==UserScript==
  2. // @name Grayscaler
  3. // @description Render entire page in grayscale (greyscale). Updated 2017-07-08.
  4. // @author Jefferson "jscher2000" Scher
  5. // @namespace JeffersonScher
  6. // @copyright Copyright 2017 Jefferson Scher
  7. // @license MIT
  8. // @include *
  9. // @version 0.5.2
  10. // @grant GM_registerMenuCommand
  11. // @run-at document-start
  12. // ==/UserScript==
  13. function toggleGrayscale(){
  14. var s=document.getElementById('grayscaler_css');
  15. if(s){
  16. if (s.innerHTML.indexOf('(100%)') > -1) {
  17. s.innerHTML='body{transition: filter .2s ease-in-out; filter: grayscale(0%)}';
  18. } else {
  19. s.innerHTML='body{transition: filter .2s ease-in-out; filter: grayscale(100%) !important}';
  20. }
  21. } else {
  22. s=document.createElement('style');
  23. s.id='grayscaler_css';
  24. s.innerHTML='body{filter: grayscale(100%) !important}';
  25. document.getElementsByTagName("head")[0].appendChild(s);
  26. }
  27. }
  28. // Inject style rule when only <html><head>...</head></html> exists
  29. if (document.getElementsByTagName("head").length > 0){
  30. // do not style stand alone image pages
  31. if (document.getElementsByTagName("head")[0].innerHTML.indexOf('TopLevelImageDocument.css') == -1){
  32. toggleGrayscale();
  33. }
  34. }
  35.  
  36. // Add menu item
  37. GM_registerMenuCommand("Toggle Grayscaler (Alt+g)", toggleGrayscale);
  38.  
  39. // Add keyboard shortcut: Ctrl+Shift+g
  40. function Gray_hotkey(evt){
  41. if (evt.key == 'g' && evt.altKey) {
  42. toggleGrayscale();
  43. evt.preventDefault();
  44. evt.stopPropagation();
  45. }
  46. }
  47. document.onreadystatechange = function () {
  48. if (document.readyState === "interactive") {
  49. document.body.addEventListener("keypress", Gray_hotkey, true);
  50. }
  51. };