☰

ValueEdge: Show images in original size

Images in descriptions cannot be viewed in original size. This script adds an overlay that does exactly that.

  1. // ==UserScript==
  2. // @name         ValueEdge: Show images in original size
  3. // @namespace    https://github.com/ahr-huber/monkey-scripts/
  4. // @version      2025-03-28
  5. // @description  Images in descriptions cannot be viewed in original size. This script adds an overlay that does exactly that.
  6. // @license      MIT
  7. // @author       Andreas Huber
  8. // @match        https://*.saas.microfocus.com/*
  9. // @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVBzuIOmRodbGLijiWKhbBQmkrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEXXBSdJES/5cUWsR4cNyPd/ced+8AoVllqtkTA1TNMtKJuJjLr4qBV/gxigAimJCYqSczi1l4jq97+Ph6F+VZ3uf+HANKwWSATySOMd2wiDeIZzctnfM+cYiVJYX4nHjSoAsSP3JddvmNc8lhgWeGjGx6njhELJa6WO5iVjZU4hnisKJqlC/kXFY4b3FWq3XWvid/YbCgrWS4TnMMCSwhiRREyKijgiosRGnVSDGRpv24h3/E8afIJZOrAkaOBdSgQnL84H/wu1uzOD3lJgXjQO+LbX9EgMAu0GrY9vexbbdOAP8zcKV1/LUmMPdJeqOjhY+AwW3g4rqjyXvA5Q4w/KRLhuRIfppCsQi8n9E35YGhW6B/ze2tvY/TByBLXS3fAAeHwHiJstc93t3X3du/Z9r9/QDakHLQl3fAPwAAAAZiS0dEAO8A7wDvwcyDBQAAAAlwSFlzAAAN1wAADdcBQiibeAAAActJREFUOMutk8trU1EQxn8zuUnqq6Du1I1ulCwtguCj6W3xH5Do0p2iIsabEJdpuxKrtKU7RcxKXLhzIaKGQgPiQnwuhFisLlqEiqGtkOccF7U18UZQdGAOHL7zfcOc+Qb+MaTjlhqO6ZelUTMpIBwF+wxUEDlAxLujrUbWiuNBOyXSIbDtYK/TepnIhgpam8Pz5mjZPOJ9pLVx3ml9lp39xqdSdY3itfM1Vpu0hlzWWC1jjydzbVAFgHz+vZaWbxucCjczmLlIMt8DwLHsbvwg1bXpQ7kt+MHZ9aI/lBXHC/qpA1BvfsWsTD6vIYFqpYqz12vY6lFamcJzHxgZMQCmJyqI7mBm+UxI4PmNBrhFnVm5ujqFocxhTBcojs2GHidzu4g0T+CIdm3HyUvF2Ce0boXAvtNR0eZDNRIKW7sliAepVET8S68YCI53CPhBWgYyj/7MSH7WF+ymizcSPJiqMXh+u7h4WXAFc/ouzLIFiuP3f06heK2I8IZaNA2gLj4MvEXYpGp9vybI/rCVh9J7xPSZQ08KdteZJJi+vvhXu6B+MObggjjuWcQK4V/nG08mnv5+mZLnNqv0XHHI3u7lbMkd6U2t++V/xHcXZav/DXBUYwAAAABJRU5ErkJggg==
  10. // @grant        none
  11. // @sandbox      DOM
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.    function imageEnlarge() {
  18.         const style = document.createElement("style");
  19.         style.textContent = `
  20.             .largeImgContainer {
  21.                 background-color: #000000db;
  22.                 display: flex;
  23.                 align-items: center;
  24.                 justify-content: center;
  25.                 position: fixed;
  26.                 top: 0;
  27.                 left: 0;
  28.                 width: 100vw;
  29.                 height: 100vh;
  30.                 overflow: scroll;
  31.  
  32.                 img {
  33.                  max-width: 98vw;/**/
  34.                  max-height: 98vh;/**/
  35.                 }
  36.                 button.close{
  37.                    position:fixed;
  38.                    top:0;
  39.                    right:3em;
  40.                    color: black;
  41.                    font-weight: bold;
  42.                    background: white;
  43.                    border:none;
  44.                    width: 2em;
  45.                    height: 2em;
  46.                    border-radius: 50%;
  47.  
  48.                 }
  49.             }
  50.         `;
  51.         document.body.appendChild(style);
  52.         imageEnlargeInternal();
  53.     }
  54.  
  55.     function imageEnlargeInternal(){
  56.         const images = document.querySelectorAll(".fr-wrapper img");
  57.         if(images.length == 0){
  58.             window.setTimeout(()=>{imageEnlargeInternal()}, 500);
  59.         }else{
  60.             images.forEach(img => {
  61.                 console.log("enlarger for" , img);
  62.                 const btnEnlarge = document.createElement("button");
  63.                 btnEnlarge.textContent = "⊕";
  64.  
  65.                 img.addEventListener("click", (e) => {
  66.                     e.preventDefault();
  67.                     const largeImgContainer = document.createElement("div");
  68.                     largeImgContainer.classList.add("largeImgContainer");
  69.  
  70.                     const largeImg = document.createElement("img");
  71.                     largeImg.setAttribute("src", img.getAttribute("src"));
  72.                     largeImgContainer.appendChild(largeImg);
  73.  
  74.                     const closeButton = document.createElement("button");
  75.                     closeButton.textContent = "X";
  76.                     closeButton.addEventListener("click", () => {largeImgContainer.remove()});
  77.                     closeButton.classList.add("close");
  78.                     largeImgContainer.appendChild(closeButton);
  79.  
  80.                     document.body.appendChild(largeImgContainer);
  81.                 });
  82.  
  83.             });
  84.         }
  85.     }
  86.  
  87.     imageEnlarge(); // add click handler to show images in original size
  88. })();