Greasy Fork

Greasy Fork is available in English.

Google Image Search - Show Image Dimensions

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

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

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name            Google Image Search - Show Image Dimensions
// @name:de         Google Bildersuche - Bildabmessungen anzeigen
// @name:fr         Google Image Search - Afficher les dimensions de l'image
// @name:es         Búsqueda de imágenes de Google - Mostrar las dimensiones de la imagen
// @name:it         Ricerca immagini su Google - Mostra le dimensioni delle immagini
// @name:pl         Wyszukiwanie obrazów Google - Pokaż wymiary obrazu
// @name:ru         Поиск изображений Google - Показать размеры изображений
// @description     Displays image dimensions (eg. "1920 × 1080") for each thumbnail on the Google Image Search results page.
// @description:de  Zeigt die Bildabmessungen (z. B. "1920 × 1080") für jedes Vorschaubild auf der Ergebnisseite der Google-Bildsuche an.
// @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.
// @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.
// @description:it  Visualizza le dimensioni dell'immagine (ad es. "1920 × 1080") per ogni miniatura nella pagina dei risultati della ricerca immagini di Google.
// @description:pl  Wyświetla wymiary obrazu (np. "1920 × 1080") dla każdej miniaturki na stronie wyników wyszukiwania obrazów Google.
// @description:ru  Отображает размеры изображения (например, "1920 × 1080") для каждой миниатюры на странице результатов поиска изображений Google.
// @namespace       http://greasyfork.icu/de/users/522821-taddiboy
// @version         0.1
// @license         MIT
// @author          Taddiboy
// @icon            https://i.imgur.com/7OeXVaf.png
// @include         https://*.google.tld/*tbm=isch*
// @grant           none
// ==/UserScript==

(function() {
    'use strict';

    // Find all thumbnails
    var images = document.querySelectorAll('[data-ow]');

    // Copy Google's own CSS used for image dimensions
    var styles = `
        .image-dimensions {
            background-color: rgba(0,0,0,.5);
            border-radius: 2px 0 0 0;
            bottom: 0;
            box-shadow: 0 0 1px 0 rgba(0,0,0,.16);
            box-sizing: border-box;
            color: #f1f3f4;
            font-family: Roboto-Medium,Roboto,arial,sans-serif;
            font-size: 10px;
            right: 0;
            line-height: 12px;
            overflow: hidden;
            padding: 4px;
            position: absolute;
            white-space: nowrap;
        }
    `;

    // Append stylesheet to the document
    var styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);

    // Loop through all thumbnails
    for (var i = 0; i < images.length; i++) {
        var image = images[i];

        // Get original width from 'data-ow' attribute
        var width = image.getAttribute('data-ow');

        // Get original height from 'data-oh' attribute
        var height = image.getAttribute('data-oh');

        // Create DIV and insert text
        var dimensionsDiv = document.createElement("div");
        var dimensionsContent = document.createTextNode(width + " × " + height);
        dimensionsDiv.appendChild(dimensionsContent);

        // Assign CSS class
        dimensionsDiv.classList.add("image-dimensions");

        // Append everything to tumbnail
        image.firstChild.appendChild(dimensionsDiv);
    }
})();