Google Image Search - Show Image Dimensions

Displays image dimensions (eg. "1920 × 1080") for each thumbnail on the Google Image Search results page.

当前为 2020-04-21 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Google Image Search - Show Image Dimensions
  3. // @name:de Google Bildersuche - Bildabmessungen anzeigen
  4. // @name:fr Google Image Search - Afficher les dimensions de l'image
  5. // @name:es Búsqueda de imágenes de Google - Mostrar las dimensiones de la imagen
  6. // @name:it Ricerca immagini su Google - Mostra le dimensioni delle immagini
  7. // @name:pl Wyszukiwanie obrazów Google - Pokaż wymiary obrazu
  8. // @name:ru Поиск изображений Google - Показать размеры изображений
  9. // @description Displays image dimensions (eg. "1920 × 1080") for each thumbnail on the Google Image Search results page.
  10. // @description:de Zeigt die Bildabmessungen (z. B. "1920 × 1080") für jedes Vorschaubild auf der Ergebnisseite der Google-Bildsuche an.
  11. // @description:fr Affiche les dimensions de l'image (par exemple, "1920 × 1080") pour chaque miniature sur la page de résultats de Google Image Search.
  12. // @description:es Muestra las dimensiones de la imagen (p. ej., "1920 × 1080") para cada miniatura de la página de resultados de Google Image Search.
  13. // @description:it Visualizza le dimensioni dell'immagine (ad es. "1920 × 1080") per ogni miniatura nella pagina dei risultati della ricerca immagini di Google.
  14. // @description:pl Wyświetla wymiary obrazu (np. "1920 × 1080") dla każdej miniaturki na stronie wyników wyszukiwania obrazów Google.
  15. // @description:ru Отображает размеры изображения (например, "1920 × 1080") для каждой миниатюры на странице результатов поиска изображений Google.
  16. // @namespace https://gf.qytechs.cn/de/users/522821-taddiboy
  17. // @version 1.0.0
  18. // @license MIT
  19. // @author Taddiboy
  20. // @icon https://i.imgur.com/7OeXVaf.png
  21. // @include https://*.google.tld/*tbm=isch*
  22. // @grant none
  23. // ==/UserScript==
  24.  
  25. (function () {
  26. 'use strict';
  27.  
  28. // Find all thumbnails
  29. const images = document.querySelectorAll('[data-ow]');
  30.  
  31. // Copy Google's own CSS used for image dimensions
  32. const styles = `
  33. .image-dimensions {
  34. background-color: rgba(0,0,0,.5);
  35. border-radius: 2px 0 0 0;
  36. bottom: 0;
  37. box-shadow: 0 0 1px 0 rgba(0,0,0,.16);
  38. box-sizing: border-box;
  39. color: #f1f3f4;
  40. font-family: Roboto-Medium,Roboto,arial,sans-serif;
  41. font-size: 10px;
  42. right: 0;
  43. line-height: 12px;
  44. overflow: hidden;
  45. padding: 4px;
  46. position: absolute;
  47. white-space: nowrap;
  48. }
  49. `;
  50.  
  51. // Append stylesheet to the document
  52. const styleSheet = document.createElement("style");
  53. styleSheet.type = "text/css";
  54. styleSheet.innerText = styles;
  55. document.head.appendChild(styleSheet);
  56.  
  57. // Loop through all thumbnails
  58. for (let i = 0; i < images.length; i++) {
  59. const image = images[i];
  60.  
  61. // Get original width from 'data-ow' attribute
  62. const width = image.getAttribute('data-ow');
  63.  
  64. // Get original height from 'data-oh' attribute
  65. const height = image.getAttribute('data-oh');
  66.  
  67. // Create DIV and insert text
  68. const dimensionsDiv = document.createElement("div");
  69. const dimensionsContent = document.createTextNode(width + " × " + height);
  70. dimensionsDiv.appendChild(dimensionsContent);
  71.  
  72. // Assign CSS class
  73. dimensionsDiv.classList.add("image-dimensions");
  74.  
  75. // Append everything to thumbnail
  76. image.firstChild.appendChild(dimensionsDiv);
  77. }
  78. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址