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
// ==UserScript== // @name Transparent standalone images // @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 // @version 2.0.0 // @match *://*/* // @author Konf // @namespace https://greasyfork.org/users/424058 // @icon https://i.imgur.com/KoWq1T8.png // @compatible Chrome // @compatible Opera // @compatible Firefox // @run-at document-end // @grant GM_addStyle // @noframes // ==/UserScript== /* jshint esversion: 6 */ (function() { 'use strict'; const checkerboardsTypes = { base64: 'base64', gradient: 'gradient', }; // Edit this to checkerboardsTypes.gradient // if base64 is looking weird on your scaling const SELECTED_CHECKERBOARD_TYPE = checkerboardsTypes.base64; const checkerboards = { [checkerboardsTypes.base64]: [ `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/`, `svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'`, ` preserveAspectRatio='xMidYMid meet' viewBox='0 0 640 640' wi`, `dth='24' height='24'%3E%3Cdefs%3E%3Cpath d='M320 0L640 0L640 `, `320L320 320L320 0Z' id='b6DWnM2ePn'/%3E%3Cpath d='M0 320L320 `, `320L320 640L0 640L0 320Z' id='ganUJTlXG'/%3E%3Cpath d='M0 0L3`, `20 0L320 320L0 320L0 0Z' id='aHdoSdhJb'/%3E%3Cpath d='M320 32`, `0L640 320L640 640L320 640L320 320Z' id='a3CbarKBKc'/%3E%3C/de`, `fs%3E%3Cg%3E%3Cg%3E%3Cuse xlink:href='%23b6DWnM2ePn' opacity=`, `'1' fill='%23cccccc' fill-opacity='1'/%3E%3C/g%3E%3Cg%3E%3Cus`, `e xlink:href='%23ganUJTlXG' opacity='1' fill='%23cccccc' fill`, `-opacity='1'/%3E%3C/g%3E%3Cg%3E%3Cuse xlink:href='%23aHdoSdhJ`, `b' opacity='1' fill='%23ffffff' fill-opacity='1'/%3E%3C/g%3E%`, `3Cg%3E%3Cuse xlink:href='%23a3CbarKBKc' opacity='1' fill='%23`, `ffffff' fill-opacity='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !imp`, `ortant` ].join(''), [checkerboardsTypes.gradient]: [ 'repeating-conic-gradient(#ccc 0deg 90deg, #fff 90deg 180deg, ', '#ccc 180deg 270deg, #fff 270deg 360deg) top left / 24px 24px ', '!important' ].join(''), }; GM_addStyle([` @media not print { body > img:first-child { background: ${checkerboards[SELECTED_CHECKERBOARD_TYPE]}; } } `][0]); })();