☰

Image Resolution Display (Firefox Debug)

Display the actual resolution of images on top of images, excluding images smaller than a specified size. Works on regular pages and direct image links in Firefox.

  1. // ==UserScript==
  2. // @name         Image Resolution Display (Firefox Debug)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.6
  5. // @description  Display the actual resolution of images on top of images, excluding images smaller than a specified size. Works on regular pages and direct image links in Firefox.
  6. // @author       LF2005
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Set the minimum width and height for images to be processed
  16.     const MIN_WIDTH = 300;  // Minimum width in pixels
  17.     const MIN_HEIGHT = 300; // Minimum height in pixels
  18.  
  19.     // Function to add resolution text to an image
  20.     function addResolutionToImage(img) {
  21.         console.log('Processing image:', img.src);
  22.  
  23.         // Check if the image is already processed
  24.         if (img.dataset.resolutionAdded) return;
  25.         img.dataset.resolutionAdded = true;
  26.  
  27.         // Use naturalWidth and naturalHeight for actual resolution
  28.         const naturalWidth = img.naturalWidth;
  29.         const naturalHeight = img.naturalHeight;
  30.  
  31.         console.log('Image dimensions:', naturalWidth, 'x', naturalHeight);
  32.  
  33.         if (naturalWidth >= MIN_WIDTH && naturalHeight >= MIN_HEIGHT) {
  34.             const resolutionText = `${naturalWidth}x${naturalHeight}`;
  35.  
  36.             // Create a div to display the resolution
  37.             const resolutionDiv = document.createElement('div');
  38.             resolutionDiv.textContent = resolutionText;
  39.             resolutionDiv.style.position = 'absolute';
  40.             resolutionDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  41.             resolutionDiv.style.color = 'white';
  42.             resolutionDiv.style.padding = '2px 5px';
  43.             resolutionDiv.style.fontSize = '12px';
  44.             resolutionDiv.style.borderRadius = '3px';
  45.             resolutionDiv.style.zIndex = '1000';
  46.  
  47.             // Position the div on top of the image
  48.             const imgRect = img.getBoundingClientRect();
  49.             resolutionDiv.style.top = `${imgRect.top + window.scrollY}px`;
  50.             resolutionDiv.style.left = `${imgRect.left + window.scrollX}px`;
  51.  
  52.             console.log('Adding resolution text at:', resolutionDiv.style.top, resolutionDiv.style.left);
  53.  
  54.             // Append the div to the body
  55.             document.body.appendChild(resolutionDiv);
  56.         } else {
  57.             console.log('Image is too small:', naturalWidth, 'x', naturalHeight);
  58.         }
  59.     }
  60.  
  61.     // Function to check if the page is a direct image link
  62.     function isDirectImagePage() {
  63.         const img = document.querySelector('img');
  64.         return img && img === document.body.firstElementChild;
  65.     }
  66.  
  67.     // Process all images on the page
  68.     function processImages() {
  69.         console.log('Processing images...');
  70.  
  71.         if (isDirectImagePage()) {
  72.             console.log('Direct image link detected.');
  73.             const img = document.querySelector('img');
  74.             if (img.complete) {
  75.                 console.log('Image is already loaded.');
  76.                 addResolutionToImage(img);
  77.             } else {
  78.                 console.log('Waiting for image to load...');
  79.                 img.addEventListener('load', () => {
  80.                     console.log('Image loaded.');
  81.                     addResolutionToImage(img);
  82.                 });
  83.             }
  84.         } else {
  85.             console.log('Regular page detected.');
  86.             const images = document.querySelectorAll('img');
  87.             images.forEach(img => {
  88.                 if (img.complete) {
  89.                     console.log('Image is already loaded:', img.src);
  90.                     addResolutionToImage(img);
  91.                 } else {
  92.                     console.log('Waiting for image to load:', img.src);
  93.                     img.addEventListener('load', () => {
  94.                         console.log('Image loaded:', img.src);
  95.                         addResolutionToImage(img);
  96.                     });
  97.                 }
  98.             });
  99.         }
  100.     }
  101.  
  102.     // Run the script after the page has loaded
  103.     if (document.readyState === 'complete') {
  104.         console.log('Page is already loaded.');
  105.         processImages();
  106.     } else {
  107.         console.log('Waiting for page to load...');
  108.         window.addEventListener('load', processImages);
  109.     }
  110.  
  111.     // Optionally, handle dynamically loaded images (e.g., in infinite scroll pages)
  112.     const observer = new MutationObserver((mutations) => {
  113.         console.log('DOM mutation detected.');
  114.         mutations.forEach((mutation) => {
  115.             mutation.addedNodes.forEach((node) => {
  116.                 if (node.tagName === 'IMG') {
  117.                     console.log('New image detected:', node.src);
  118.                     if (node.complete) {
  119.                         console.log('Image is already loaded.');
  120.                         addResolutionToImage(node);
  121.                     } else {
  122.                         console.log('Waiting for image to load...');
  123.                         node.addEventListener('load', () => {
  124.                             console.log('Image loaded.');
  125.                             addResolutionToImage(node);
  126.                         });
  127.                     }
  128.                 }
  129.             });
  130.         });
  131.     });
  132.  
  133.     observer.observe(document.body, { childList: true, subtree: true });
  134. })();