bijij / ViewImage

Extension to re-implement the "View Image" and "Search by image" buttons into google images.
MIT License
780 stars 106 forks source link

Show image dimensions again #211

Open terrorist96 opened 4 years ago

terrorist96 commented 4 years ago

Is your feature request related to a problem? Please describe. Google previously used to allow you to show the image dimensions in the Tools menu. That went away but you could still hover your mouse over each image to see the dimensions. Now that is gone too.

Describe the solution you'd like Please add an option to show image sizes like before.

Describe alternatives you've considered The only alternative now is to actually click on each individual image then hover your mouse over the image in the panel on the right.

Additional context https://ww.9to5google.com/2020/02/25/google-images-dimensions/

needforsuv commented 4 years ago

Google Images Restore already shows the hover dimensions, but it includes other changes not wanted

I am not quite good enough to cut the bit out that's needed for it

mikhoul commented 4 years ago

@needforsuv commented on 27 mars 2020 à 07:35 UTC−4:

Google Images Restore already shows the hover dimensions, but it includes other changes not wanted

I am not quite good enough to cut the bit out that's needed for it

Look here I've isolated this part of the extension:, my last comment explain how to do it: https://github.com/fanfare/googleimagesrestored/issues/49

Yhe only thing it does now is that it bring back image size by default so you don't have to hover the image and also it don't conflict with other extensions.

It's a dirty hack but it work fine. googleimagesrestored-master.zip

Just rename the .zip to .CRX.

needforsuv commented 4 years ago

I too have figured it out:

Main results:


// ==UserScript==
// @name        Google Images Size Labels
// @namespace   http://localhost
// @description Adds image size labels to broken google images
// @version     1.0
// @include     http*://*.google.tld/search*tbm=isch*
// @include     http*://*.google.tld/*imgres?*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

let gisversion = 1;

if ( document.querySelectorAll(`div[data-ri="0"]`).length > 0   && document.querySelectorAll(`[jscontroller="Q7Rsec"]`).length === 0 ) {
  gisversion = 2;
}

console.log(`frontend gisversion ${gisversion}`);

var jscontroller = "Q7Rsec";
try {
  jscontroller = document.querySelectorAll(`div[data-ri="0"]`)[0].getAttribute("jscontroller");
}
catch(e) {

}

// mutationobserver --

// new jscontroller elements to append size stats

let lastthumbcount = 0;

function propagatesizeinfo() {

  let jscontrollercount = document.querySelectorAll(`div[jscontroller="${jscontroller}"]`).length;
  if (jscontrollercount === lastthumbcount) {
    // nothing to do
    return;
  }
  else {
    lastthumbcount = document.querySelectorAll(`div[jscontroller="${jscontroller}"]`).length;
  }
  // loop through each that dont have it
  let notmarked = document.querySelectorAll(`div[jscontroller="${jscontroller}"]:not(.sizepropagated)`);
  for (let i=0;i<notmarked.length;i++) {
    try {
      notmarked[i].classList.add("sizepropagated");
      let gisow = notmarked[i].dataset.ow || 0;
      let gisoh = notmarked[i].dataset.oh || 0;
      notmarked[i].insertAdjacentHTML("beforeend", `<div class="gishoverinfo">${gisow} × ${gisoh}</div>`);
    }
    catch(e) {
      if (gisdebugmode) {
        console.error(e);
      }
    }
  }
  //console.log(notmarked)
}

propagatesizeinfo();

var observer = new MutationObserver(function(mutations) {
  setTimeout(()=>{propagatesizeinfo(),500});

});

observer.observe(document.getElementById("islrg"), {attributes: false, childList: true, characterData: false, subtree:true});

related results

// ==UserScript==
// @name        Related images Size (Oct 19)
// @namespace   http://localhost
// @description Adds image size to broken related images
// @version     1.0
// @include     http*://*.google.tld/search*tbm=isch*
// @include     http*://*.google.tld/*imgres?*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==

waitForKeyElements (".l7VXJc.pZqGvd", actionFunctiongisrelsize);

function actionFunctiongisrelsize () {
    var gisdebugmode = false;

  let notmarked = document.querySelectorAll(`div.isv-r.jdp5U:not(.sizepropagated)`);
  for (let i=0;i<notmarked.length;i++) {
    try {
      notmarked[i].classList.add("sizepropagated");
      let gisow = notmarked[i].dataset.ow || 0;
      let gisoh = notmarked[i].dataset.oh || 0;
      notmarked[i].insertAdjacentHTML("beforeend", `<div class="gishoverinfo">${gisow} × ${gisoh}</div>`);
    }
    catch(e) {
      if (gisdebugmode) {
        console.error(e);
      }
    }
  }

}
needforsuv commented 4 years ago

you could probably tidy that up so it is all internally contained