☰

Transparent standalone images

By default, a transparency of an image opened in a separate tab is indicated by a gray color. This script replaces it with a checkerboard pattern

  1. // ==UserScript==
  2. // @name          Transparent standalone images
  3. // @description   By default, a transparency of an image opened in a separate tab is indicated by a gray color. This script replaces it with a checkerboard pattern
  4. // @version       2.0.0
  5. // @match         *://*/*
  6. // @author        Konf
  7. // @namespace     https://greasyfork.org/users/424058
  8. // @icon          https://i.imgur.com/KoWq1T8.png
  9. // @compatible    Chrome
  10. // @compatible    Opera
  11. // @compatible    Firefox
  12. // @run-at        document-end
  13. // @grant         GM_addStyle
  14. // @noframes
  15. // ==/UserScript==
  16.  
  17. /* jshint esversion: 6 */
  18.  
  19. (function() {
  20.   'use strict';
  21.  
  22.   const checkerboardsTypes = {
  23.     base64: 'base64',
  24.     gradient: 'gradient',
  25.   };
  26.  
  27.   // Edit this to checkerboardsTypes.gradient
  28.   // if base64 is looking weird on your scaling
  29.   const SELECTED_CHECKERBOARD_TYPE = checkerboardsTypes.base64;
  30.  
  31.   const checkerboards = {
  32.     [checkerboardsTypes.base64]: [
  33.       `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/`,
  34.       `svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'`,
  35.       ` preserveAspectRatio='xMidYMid meet' viewBox='0 0 640 640' wi`,
  36.       `dth='24' height='24'%3E%3Cdefs%3E%3Cpath d='M320 0L640 0L640 `,
  37.       `320L320 320L320 0Z' id='b6DWnM2ePn'/%3E%3Cpath d='M0 320L320 `,
  38.       `320L320 640L0 640L0 320Z' id='ganUJTlXG'/%3E%3Cpath d='M0 0L3`,
  39.       `20 0L320 320L0 320L0 0Z' id='aHdoSdhJb'/%3E%3Cpath d='M320 32`,
  40.       `0L640 320L640 640L320 640L320 320Z' id='a3CbarKBKc'/%3E%3C/de`,
  41.       `fs%3E%3Cg%3E%3Cg%3E%3Cuse xlink:href='%23b6DWnM2ePn' opacity=`,
  42.       `'1' fill='%23cccccc' fill-opacity='1'/%3E%3C/g%3E%3Cg%3E%3Cus`,
  43.       `e xlink:href='%23ganUJTlXG' opacity='1' fill='%23cccccc' fill`,
  44.       `-opacity='1'/%3E%3C/g%3E%3Cg%3E%3Cuse xlink:href='%23aHdoSdhJ`,
  45.       `b' opacity='1' fill='%23ffffff' fill-opacity='1'/%3E%3C/g%3E%`,
  46.       `3Cg%3E%3Cuse xlink:href='%23a3CbarKBKc' opacity='1' fill='%23`,
  47.       `ffffff' fill-opacity='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !imp`,
  48.       `ortant`
  49.     ].join(''),
  50.     [checkerboardsTypes.gradient]: [
  51.       'repeating-conic-gradient(#ccc 0deg 90deg, #fff 90deg 180deg, ',
  52.       '#ccc 180deg 270deg, #fff 270deg 360deg) top left / 24px 24px ',
  53.       '!important'
  54.     ].join(''),
  55.   };
  56.  
  57.   GM_addStyle([`
  58.     @media not print {
  59.       body > img:first-child {
  60.         background: ${checkerboards[SELECTED_CHECKERBOARD_TYPE]};
  61.       }
  62.     }
  63.   `][0]);
  64. })();