☰

Reddit image de-framer

Removes the frame from reddit images and replaces it with a minimalist image viewer.

  1. // ==UserScript==
  2. // @name        Reddit image de-framer
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://www.reddit.com/media*
  5. // @require     https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.js
  6. // @resource    customCSS https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.css
  7. // @grant       GM_getResourceText
  8. // @grant       GM_addStyle
  9. // @version     1.02
  10. // @author      ape-that-presses-keys
  11. // @license     MIT
  12. // @description Removes the frame from reddit images and replaces it with a minimalist image viewer.
  13. // ==/UserScript==
  14.  
  15. // add the image viewer source files to the page
  16. var customCSS = GM_getResourceText("customCSS");
  17. GM_addStyle(customCSS);
  18.  
  19. // replace the body with the elements needed for the image viewer
  20. let image_url = document.querySelector("zoomable-img > img").src;
  21. document.body.innerHTML = `
  22. <div style="
  23.     background-color: #282828;
  24.     height: 100%;
  25.     width: 100%;
  26.     position: fixed;"
  27. ></div>
  28. <div>
  29.     <img id="image" src="${image_url}" alt="Picture">
  30. </div>
  31. `;
  32.  
  33. // setup and show the viewer
  34. const viewer = new Viewer(document.getElementById('image'), {
  35.     backdrop: false,
  36.     button: false,
  37.     navbar: false,
  38.     title: false,
  39.     toolbar: false,
  40.     initialCoverage: 1.0,
  41.     inline: false,
  42.     rotatable: false,
  43.     scalable: false,
  44.     zoomable: true
  45. });
  46. viewer.show();
  47.  
  48. // image has been shown and viewed in the viewer
  49. let i = document.querySelector("#image");
  50. i.style.display = "none";