☰

Image BG Toggle

Toggles the background colour for images in the browser

  1. // ==UserScript==
  2. // @name         Image BG Toggle
  3. // @namespace    pxgamer
  4. // @version      1.3
  5. // @description  Toggles the background colour for images in the browser
  6. // @author       pxgamer
  7. // @include      /.*\.(JPG|PNG|GIF|JPEG).*/
  8. // @require      https://code.jquery.com/jquery-2.2.4.min.js
  9. // @grant        none
  10. // ==/UserScript==
  11. /*jshint multistr: true */
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     function changeImageBG() {
  17.         if (col == 'black') {
  18.             $('body').css('background-color', col);
  19.             if (allowGrey) { col = 'grey'; }
  20.             else { col = 'white'; }
  21.         }
  22.         else if (col == 'grey') {
  23.             $('body').css('background-color', col);
  24.             col = 'white';
  25.         }
  26.         else if (col == 'white') {
  27.             $('body').css('background-color', col);
  28.             col = 'black';
  29.         }
  30.         else {
  31.             $('body').css('background-color', 'white');
  32.             col = 'black';
  33.         }
  34.     }
  35.  
  36.     var allowGrey = false;
  37.     var col = 'black';
  38.     if (document.contentType.indexOf('image') > -1) {
  39.         $('body').append('<span id="bgToggle" style="right: 15px; top: 5px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 999999; position: fixed; float: right; background-color: white; border: 1px solid grey; border-radius: 2px; margin: 5px; padding: 2px; font-family: fantasy;">TOGGLE BG</span>');
  40.  
  41.         $('#bgToggle').on('click', function() {changeImageBG(); });
  42.         var keys = {
  43.             ctrl: false,
  44.             b: false
  45.         };
  46.         $(document.body).on('keydown', function (e) {
  47.             if (event.keyCode == 17) {
  48.                 keys.ctrl = true;
  49.             } else if (event.keyCode == 66) {
  50.                 keys.b = true;
  51.             }
  52.             if (keys.ctrl && keys.b) {
  53.                 changeImageBG();
  54.             }
  55.         });
  56.         $(document.body).keyup(function(e) {
  57.             if (event.keyCode == 17) {
  58.                 keys.ctrl = false;
  59.             } else if (event.keyCode == 66) {
  60.                 keys.b = false;
  61.             }
  62.         });
  63.     }
  64. })();