Remove the Reddit Image Overlay

04/08/2023, 3:54:16 pm
当前为 2023-08-04 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Remove the Reddit Image Overlay
// @namespace   RedditIngFix
// @include     https://i.redd.it/*.*
// @grant       none
// @version     1.1
// @author      Kane
// @license     MIT
// @description 04/08/2023, 3:54:16 pm
// ==/UserScript==

if (window.attachEvent) {window.attachEvent('onload', check_and_kill);}
else if (window.addEventListener) {window.addEventListener('load', check_and_kill, false);}
else {document.addEventListener('load', check_and_kill, false);}

function check_and_kill() {
  let overlay_enabled = document.getElementsByTagName("shreddit-app").length > 0;
  if (overlay_enabled) {

    let img_src = document.getElementsByTagName("img")[0].src;
    create_img_template(img_src);
  }
}

function addCSS(cssText) {
  const styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssText;
  } else {
    styleElement.appendChild(document.createTextNode(cssText));
  }

  document.head.appendChild(styleElement);
}

function getFilenameFromURL(url) {
  const segments = url.split('/');
  const filename = segments[segments.length - 1];
  return filename.split('?')[0].split('#')[0];
}

function create_img_template(img_src) {
  console.log("Create img template...");
  console.log(img_src);
  let string_css = `
      html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .image-container {
      position: relative;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }

    .image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }

    .image.full-size {
      top: 0;
      left: 0;
      width: auto;
      height: auto;
      width: unset;
      height: unset;
      z-index: 9999;
    }`;
  let string_js = `
    document.addEventListener("DOMContentLoaded", function() {
    const imageContainer = document.querySelector(".image-container");
    const image = document.querySelector(".image");

    imageContainer.addEventListener("click", function() {
      if (image.classList.contains("full-size")) {
        // Revert to scaled size
        image.classList.remove("full-size");
      } else {
        // Go full size
        image.classList.add("full-size");
      }
    });
  });`;
  let string_html_head = `
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>${getFilenameFromURL(img_src)}</title>
      <style>${string_css}</style>
    `;
  let string_html_body = `
      <div class="image-container">
        <img src="${img_src}" alt="Image" class="image">
      </div>
      <script>${string_js}</script>`;

  document.body.innerHTML = string_html_body;
  document.head.innerHTML = string_html_head;

  const imageContainer = document.getElementsByClassName("image-container")[0];
  const image = document.getElementsByClassName("image")[0];

  imageContainer.addEventListener("click", function() {
    if (image.classList.contains("full-size")) {
      // Revert to scaled size
      image.classList.remove("full-size");
    } else {
      // Go full size
      image.classList.add("full-size");
    }
  });
}

function add_default_css() {
  let new_css = 'img {cursor: zoom-in;image-orientation: from-image;text-align: center;position: absolute;inset: 0;margin: auto;display: block;color: #eee;}';
  new_css += '@media not print {:root { color: #eee;background: url("chrome://global/skin/media/imagedoc-darknoise.png") fixed;}';
  addCSS(new_css);

  let scc_str = `
    body {margin: 0;}

    @media not print {
      .fullZoomOut {
        cursor: zoom-out;
      }

      .fullZoomIn {
        cursor: zoom-in;
      }

      .shrinkToFit {
        cursor: zoom-in;
      }

      .overflowingVertical, .overflowingHorizontalOnly {
        cursor: zoom-out;
      }
    }

    .isInObjectOrEmbed {
      width: 100%;
      height: 100vh;
    }

    img {
      display: block;
    }

    @media not print {
      :root {
        color: #eee;
        background: url("chrome://global/skin/media/imagedoc-darknoise.png") fixed;
      }

      img.transparent {
        color: #222;
        background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png");
      }

      img {
        text-align: center;
        position: absolute;
        inset: 0;
        margin: auto;
      }

      img.overflowingVertical {
        /* If we're overflowing vertically, we need to set margin-top to
           0.  Otherwise we'll end up trying to vertically center, and end
           up cutting off the top part of the image. */
        margin-top: 0;
      }

      .completeRotation {
        transition: transform 0.3s ease 0s;
      }
    }

    img {
      image-orientation: from-image;
    }
  `;
  addCSS(scc_str);
}