Remove the Reddit Image Overlay

04/08/2023, 3:54:16 pm
// ==UserScript==
// @name        Remove the Reddit Image Overlay
// @namespace   RedditIngFix
// @include     https://i.redd.it/*.*
// @grant       none
// @version     1.2
// @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_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>`;

  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");
    }
  });
}