Greasy Fork

Only works on the first 100 images + Errors in the log

Only the first 100 images get their dimensions shown, the rest do not.

Example: https://www.google.com/search?tbm=isch&q=cat&tbs=imgo:1

I switched to the following script, which works on all images: https://greasyfork.org/en/scripts/404103-google-image-search-show-image-dimensions

The console log shows the following errors:

ERROR: Execution of script 'Google Image Search - Show Image Dimensions' failed! MutationObserver.observe: Argument 1 is not an object. Google Image Search - Show Image Dimensions.user.js:1:403
    <anonymous> moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google Image Search - Show Image Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:1
    <anonymous> moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google Image Search - Show Image Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:1
    <anonymous> moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google Image Search - Show Image Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:87
    <anonymous> moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google Image Search - Show Image Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:89
    n eval:3
    c eval:2
    E_u eval:3
    la eval line 1 > Function:60
    create eval line 1 > Function:71
    d eval line 1 > Function:13
    (Async: setTimeout handler)
    n eval:3
    b eval:9
    g eval line 1 > Function:12
    runListeners eval line 1 > Function:13
    anonymous eval line 1 > Function:72
    R eval:11

tms_2642de0a_6e25_4657_81e3_a8909943188f/<@moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google%20Image%20Search%20-%20Show%20Image%20Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:85:20
tms_2642de0a_6e25_4657_81e3_a8909943188f@moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google%20Image%20Search%20-%20Show%20Image%20Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:86:3
F_a/n</<@eval:3:90
@moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google%20Image%20Search%20-%20Show%20Image%20Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:1:101
@moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google%20Image%20Search%20-%20Show%20Image%20Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:1:635
@moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google%20Image%20Search%20-%20Show%20Image%20Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:87:6
@moz-extension://cead213d-0b91-4b93-8155-6cc7de3bb687/userscripts/Google%20Image%20Search%20-%20Show%20Image%20Dimensions.user.js?id=2642de0a-6e25-4657-81e3-a8909943188f:89:3
F_a/n</<@eval:3:90
c@eval:2:142
E_u/<@eval:3:259
la@eval line 1 > Function:60:53
create@eval line 1 > Function:71:327
d@eval line 1 > Function:13:89
setTimeout handler*F_a/n</<@eval:3:90
d[b]@eval:9:292
g/<@eval line 1 > Function:12:459
runListeners@eval line 1 > Function:13:52
anonymous/</</<@eval line 1 > Function:72:302
R@eval:11:120

Thanks for the heads up! I just updated the script, it should work as intended now.

Thanks for the heads up! I just updated the script, it should work as intended now.

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

simply delete observer and create loop, all work :

function googleIMG () {
'use strict';

// Add Google's own CSS used for image dimensions
addGlobalStyle(`
.img-dims p {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 4px;
color: #f1f3f4;
background-color: rgba(0,0,0,.5);
border-radius: 2px 0 0 0;
font-family: Roboto-Medium,Roboto,Arial,sans-serif;
font-size: 10px;
line-height: 12px;
}
`);

function showDims() {
// Find all thumbnails & exclude the "already handled" class we set below
const images = document.querySelectorAll('[data-ow]:not(.img-dims)');

// 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 P Tag and insert text
const dimensionsDiv = document.createElement("p");
const dimensionsContent = document.createTextNode(width + " × " + height);
dimensionsDiv.appendChild(dimensionsContent);

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

// Add CSS class to the thumbnail
image.classList.add("img-dims");
}
}

// Run script once on document ready
showDims();

// Initialize new MutationObserver
//const mutationObserver = new MutationObserver(showDims);

// Let MutationObserver target the grid containing all thumbnails
//const targetNode = document.querySelector('div[data-cid="GRID_STATE0"]');

// Run MutationObserver
//mutationObserver.observe(targetNode, { childList: true, subtree: true });

function addGlobalStyle(css) {
const head = document.getElementsByTagName('head')[0];
if (!head) { return; }
const style = document.createElement('style');
style.textContent = css;
head.appendChild(style);
}
}


setInterval(function () {
googleIMG()
}, 1000);

Seems the script isn't working now... :(

Hey @Mr Zea, thanks for the heads up! It's fixed with the new version 1.3.3