☰

Show Google Image Size

Add image sizes to Google Image search results.

  1. // ==UserScript==
  2. // @name        Show Google Image Size
  3. // @namespace   https://github.com/amcginn/
  4. // @match       https://www.google.com/search*
  5. // @grant       none
  6. // @version     1.0
  7. // @author      amcginn
  8. // @license     MIT
  9. // @description Add image sizes to Google Image search results.
  10. // ==/UserScript==
  11.  
  12. function createSizeEl(width, height) {
  13.   let container = document.createElement('div');
  14.   container.innerText = width + 'x' + height;
  15.  
  16.   container.style.position = 'absolute';
  17.   container.style.bottom = '8px';
  18.   container.style.right = '10px';
  19.   container.style.padding = '2px 3px';
  20.   container.style.borderRadius = '4px';
  21.   container.style.pointerEvents = 'none';
  22.   container.style.cursor = 'inherit';
  23.   container.style.fontSize = '14px';
  24.   container.style.backgroundColor = 'rgba(0, 0, 0, .6)';
  25.   container.style.color = 'white';
  26.  
  27.   return container;
  28. }
  29.  
  30. function showImgSizes() {
  31.   let searchImageResults = document.querySelectorAll('h3:has(a[href] g-img):not(.image-size)');
  32.  
  33.   searchImageResults.forEach((result) => {
  34.     try {
  35.       let link = result.firstChild;
  36.       if (link) {
  37.         let linkParams = new URL(link.href, window.location.origin).searchParams;
  38.         let width = linkParams.get('w');
  39.         let height = linkParams.get('h');
  40.  
  41.         if (width && height) {
  42.           let imgSizeEl = createSizeEl(width, height);
  43.           result.insertAdjacentElement("afterend", imgSizeEl);
  44.           result.classList.add('image-size');
  45.         }
  46.       }
  47.     } catch (er) {
  48.       console.log(er);
  49.     }
  50.   });
  51. }
  52.  
  53. window.addEventListener('load', () => {
  54.   setInterval(showImgSizes, 1000);
  55. });