It works, but only on first batch of r###lts

First of all - you did a good job, thank you! The script works as described, but there's one problem: it only runs once when the page is loaded. Once you start scrolling, the new r###lts won't have the image dimension tags.

May I propose updating the script with the good ol' MutationObserver, like this:

1. Give the self-executing function name, something like function main(). It doesn't even have to stay self-executing since the observer will run it when needed.
2. Define MutationObserver instance after the main function and initialize it:```var observer = new MutationObserver(function(mutations) {observer.disconnect();main();observer.observe(document, config);});

var config = {childList: true,subtree: true};

observer.observe(document, config);

Voila - now every new r###lts page will be handled by your very useful script

I completely forgot that it also has to have a mechanism to avoid adding the dimensions div to the thumbnails that already have it. I'll look into it as soon as i got time and report back... Unless the author or somebody else will beat me to it

Well, I've just looked into it and here's a possible and working approach (most likely not the most optimized one):

'use strict';// Copy Google's own CSS used for image dimensionsconst 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 documentconst styleSheet = document.createElement("style");styleSheet.type = "text/css";styleSheet.innerText = styles;document.head.appendChild(styleSheet);function main() {// Find all thumbnails// Exclude the "already handled" class we set belowconst images = document.querySelectorAll('[data-ow]:not(.image-dimensions-added)');// Loop through all thumbnailsfor (let i = 0; i < images.length; i++) {const image = images[i];// Get original width from 'data-ow' attributeconst width = image.getAttribute('data-ow');// Get original height from 'data-oh' attributeconst height = image.getAttribute('data-oh');// Create DIV and insert textconst dimensionsDiv = document.createElement("div");const dimensionsContent = document.createTextNode(width + " × " + height);dimensionsDiv.appendChild(dimensionsContent);// Assign CSS classdimensionsDiv.classList.add("image-dimensions");// Append everything to thumbnailimage.firstChild.appendChild(dimensionsDiv);// Add "already handled" type of class to the thumbnailimage.classList.add("image-dimensions-added");}}var observer = new MutationObserver(function(mutations) {observer.disconnect();main();observer.observe(document, config);});var config = {childList: true,subtree: true};observer.observe(document, config);

Thank you for the great feedback and even a proposed solution!That case is honestly something I completely missed.I'll fix it asap.Once again, really appreciate your help.

Fixed version is now live. Thanks once again!

Great! It's always a pleasure to help out, especially with something that I find useful myself!

Hey @mr.dev,
are you still using the script? If so, does it work for you as intended?