☰

Qwant Image Size Highlighter

Highlights images with different borders depending on their size (>3Mpx: green, >2Mpx: yellow, >1Mpx: orange, <=1Mpx: red)

  1. // ==UserScript==
  2. // @name Qwant Image Size Highlighter
  3. // @name:it Evidenzia la dimensione delle immagini su Qwant
  4. // @namespace StephenP
  5. // @version 1.0.1
  6. // @description Highlights images with different borders depending on their size (>3Mpx: green, >2Mpx: yellow, >1Mpx: orange, <=1Mpx: red)
  7. // @description:it Evidenzia le immagini usando bordi differenti a seconda della loro dimensione (>3Mpx: verde, >2Mpx: giallo, >1Mpx: arancio, <=1Mpx: rosso)
  8. // @author      StephenP
  9. // @match https://www.qwant.com/*
  10. // @license AGPL-3.0-or-later
  11. // @run-at document-idle
  12. // ==/UserScript==
  13.  
  14. (() => {
  15.     const XXL = 3000000; // Minimum width * height to highlight
  16.     const XL = 2000000; // Minimum width * height to highlight
  17.     const L = 1000000; // Minimum width * height to highlight
  18.     var pageURL="";
  19.  
  20.     function checkReload(){
  21.         if(document.location.href!=pageURL){
  22.           if((document.location.href.includes("t=images"))&&(!pageURL.includes("t=images"))){
  23.             checkImageSizes(document.body);
  24.             // Create mutation observer
  25.             const observer = new MutationObserver(observerCallback);
  26.  
  27.             // Start observing the document for changes in images
  28.             observer.observe(document.body, {
  29.                 childList: true,
  30.                 subtree: true
  31.             });
  32.           }
  33.           pageURL=document.location.href;
  34.         }
  35.     }
  36.  
  37.     function checkImageSizes() {
  38.         const images = document.querySelectorAll('[data-testid="imageResult"]');
  39.  
  40.         images.forEach(image => {
  41.             const sizeContainer = image.querySelector('._3kuJS._21z97._2huh0');
  42.  
  43.             if (sizeContainer) {
  44.                 const dimensions = sizeContainer.textContent.split('×');
  45.                 const width = parseInt(dimensions[0]);
  46.                 const height = parseInt(dimensions[1]);
  47.  
  48.                 if (width * height > XXL) {
  49.                     image.style.borderColor = 'green';
  50.                     image.style.borderWidth = '5px';
  51.                     image.style.borderStyle = 'solid';
  52.                     image.style.borderRadius = 'var(--border-radius-150)';
  53.                 }
  54.                 else if (width * height > XL) {
  55.                     image.style.borderColor = 'yellow';
  56.                     image.style.borderWidth = '4px';
  57.                     image.style.borderStyle = 'solid';
  58.                     image.style.borderRadius = 'var(--border-radius-150)';
  59.                 }
  60.                 else if (width * height > L) {
  61.                     image.style.borderColor = 'orange';
  62.                     image.style.borderWidth = '3px';
  63.                     image.style.borderStyle = 'solid';
  64.                     image.style.borderRadius = 'var(--border-radius-150)';
  65.                 }
  66.                 else{
  67.                     image.style.borderColor = 'red';
  68.                     image.style.borderWidth = '2px';
  69.                     image.style.borderStyle = 'solid';
  70.                     image.style.borderRadius = 'var(--border-radius-150)';
  71.                 }
  72.             }
  73.         });
  74.     }
  75.  
  76.     function observerCallback(mutations) {
  77.         mutations.forEach(mutation => {
  78.             if (mutation.addedNodes.length > 0) {
  79.                 checkImageSizes(mutation.addedNodes);
  80.             }
  81.         });
  82.     }
  83.  
  84.  
  85.  
  86.     // Check initial image sizes
  87.     checkReload();
  88.     setInterval(checkReload,1000);
  89.  
  90. })();