☰

Image Background Color

Sets a checkerboard (or color) background on images viewed standalone.

当前为 2023-06-25 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Image Background Color
// @namespace   leaumar
// @match       *://*/*
// @grant       none
// @version     1
// @author      [email protected]
// @description Sets a checkerboard (or color) background on images viewed standalone.
// @license     MPL-2.0
// ==/UserScript==

const checkerBoard = {
  backgroundColor: 'darkgrey',
  backgroundImage: 'linear-gradient(45deg, grey 25%, transparent 25%, transparent 75%, grey 75%, grey), linear-gradient(45deg, grey 25%, transparent 25%, transparent 75%, grey 75%, grey)',
  backgroundPosition: '0 0, 2vmin 2vmin',
  backgroundSize: '4vmin 4vmin',
};

function setBackground(node) {
  Object.assign(node.style, checkerBoard);
  // or assign a fixed color if you want
  // node.style.backgroundColor = '#333';
}

function getStandaloneImage() {
  const tags = [...document.body.childNodes]
    .filter(node => node.nodeName !== '#text');

  return tags.length === 1 && tags[0].nodeName === 'IMG' ? tags[0] : null;
}

function clearAllBackgrounds(upFrom) {
  let current = upFrom;
  while (current?.style != null) {
    current.style.background = 'unset';
    current = current.parentNode;
  }
}

(function main() {
  const img = getStandaloneImage();
  if (img != null) {
    clearAllBackgrounds(img);
    setBackground(document.body);
  }
})();