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 dimensions
const 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
const 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 below
const images = document.querySelectorAll('[data-ow]:not(.image-dimensions-added)');
// Loop through all thumbnails
for (let i = 0; i < images.length; i++) {
const image = images[i];
// Get original width from 'data-ow' attribute
const width = image.getAttribute('data-ow');
// Get original height from 'data-oh' attribute
const height = image.getAttribute('data-oh');
// Create DIV and insert text
const dimensionsDiv = document.createElement("div");
const dimensionsContent = document.createTextNode(width + " × " + height);
dimensionsDiv.appendChild(dimensionsContent);
// Assign CSS class
dimensionsDiv.classList.add("image-dimensions");
// Append everything to thumbnail
image.firstChild.appendChild(dimensionsDiv);
// Add "already handled" type of class to the thumbnail
image.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?