No view-image-button when an image from search results is opened on its own page

[gingerbeardman]

I'm using the Extensions gallery version in Safari 11.1.2 (13605.3.8) on High Sierra

If I do a search for an image and click one of them, I see more information expand "inline" and the view image button is there. Works well!

However, if I cmd+click an image from the search results, the extended info is opened in a new tab (not inline) and on this page the view button is not present.

example URL below:

https://www.google.com/imgres?imgurl=http%3A%2F%2Fstatic.mobyware.net%2Fdata%2Fprograms%2Fimages%2Fappforgebooster.gif&imgrefurl=http://://://%3A%2F%2Fwww.mobyware.net%2Fappforge-booster-palm-download-105.html&docid=3isNpkphXDLE3M&tbnid=xsYg3z-4Nkju6M%3A&vet=10ahUKEwi95aDCltzhAhVoc98KHXz0Dm4QMwhBKAEwAQ..i&w=160&h=160&itg=1&client=safari&bih=1116&biw=1207&q=appforge%20booster%20palm&ved=0ahUKEwi95aDCltzhAhVoc98KHXz0Dm4QMwhBKAEwAQ&iact=mrc&uact=8

Screenshot

[quoid]

@gingerbeardman thanks for reporting this

I think I know why this is happening. The current implementation is using a mutation observer to watch a specific element on the google images results page. When changes occur, the addButton function is called.

When cmd+clicking an image, not only does the criteria not get met for for addButton function, but the mutation observer changes won't occur to trigger that function - in other words it won't work.

The good news is that it would be a simple fix for these pages - the bad news is that I am not able to update this extension because "legacy" extension are no longer supported by Apple.

---

Take a look at my other repo, Userscripts. This enables the same type of functionality that I made in this, Google Images, extension but is much more extensible - the user can add any bits of Javascript they like to get injected into the webpages they visit. I use it for Google Image "button adding", redirecting, etc...

It's not accepted into the Safari Extension Gallery, and likely won't be because they aren't accepting new extension since "legacy" ones are getting canned very soon, but I have a working Swift/Safari App Extension version that I will be putting on the Mac App Store soon. I can send you a beta version if want, just give me your email.

[gingerbeardman]

Thanks!

I am working on porting some of my own extensions to the new app-format, but it's low priority.

I am still on High Sierra due to Safari Extensions. I use Quickscript and Tampermonkey.

Cheers, would love to test your beta!

[quoid]

@gingerbeardman

Sounds good, I will shoot you an email via your website.

I am still on High Sierra due to Safari Extensions. I use Quickscript and Tampermonkey.

If you're using Tampermonkey, you could likely just use the script below to get most of the google image pages to show a button (I haven't updated the code for the most recent issue you brought up), but it is more updated than the code in the extension I have in the extension gallery.

function check_google_page() {
  var p = document.querySelector(".hdtb-msel");
  if (p != null && p.innerText === "Images") {
    var targetNode = document.getElementById("gsr");
    var config = { childList: true, subtree: true };
    var callback = function(mutationsList, observer) {
      for(var mutation of mutationsList) {
            var nodes = mutation.addedNodes;
        nodes.forEach(function(node) {
            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains("irc_mi")) {
                add_google_view_image_button(node);
            }
        });
      }
    };
    var observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
  }
}

function add_google_view_image_button(el) {
  var img_src = el.getAttribute("src");
  var container = el.closest(".irc_c");
  var my_givi_button;
  var clone_button;
  
  if (container.querySelector(".irc_ab")) {
    var buttons = container.querySelector(".irc_ab");
    my_givi_button = buttons.querySelector(".my_givi_button");
    if (my_givi_button === null) {
      clone_button = buttons.querySelector("a");
      var icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4C4 4 1 12 1 12s3 8 11 8 11-8 11-8-3-8-11-8zm0 3a5 5 0 1 1-.001 10.001A5 5 0 0 1 12 7zm0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>';
      my_givi_button = clone_button.cloneNode(true);
      my_givi_button.classList.add("my_givi_button");
      my_givi_button.style.marginLeft = "8px";
      my_givi_button.querySelector("div").style.paddingLeft = "10px";
      my_givi_button.querySelector("span:nth-child(1)").innerHTML = icon;
      my_givi_button.querySelector("span:nth-child(2)").innerText = "View Image";
      my_givi_button.removeAttribute("jsaction");
        my_givi_button.removeAttribute("data-noload");
        my_givi_button.removeAttribute("data-ved");
    
        buttons.appendChild(my_givi_button);
    }
    my_givi_button.href = img_src;
  } else if (container.querySelector(".irc_but_r tr")) {
    var buttons = container.querySelector(".irc_but_r tr");
    my_givi_button = buttons.querySelector(".my_givi_button");
    if (my_givi_button === null) {
      var clone_button = buttons.querySelector("td");
      my_givi_button = buttons.querySelector("td");
      my_givi_button = clone_button.cloneNode(true);
      my_givi_button.classList.add("my_givi_button");
      my_givi_button.querySelector("a span:nth-child(2)").innerText = "View Image";
      my_givi_button.querySelector("a span:nth-child(1)").className = "";
      my_givi_button.querySelector("a span:nth-child(1)").innerHTML = "";
      
      var link = my_givi_button.querySelector("a");
      link.href = img_src;
      link.className = "";
      link.removeAttribute("data-cthref");
      link.removeAttribute("jsaction");

      buttons.appendChild(my_givi_button);
    }
    var link = my_givi_button.querySelector("a");
    link.href = img_src;
  }
}

I am not sure how quickscript or tampermonkey handle checking which page the user is on, but in my extension (which is really bare bones) I do it manually like this:

function check_page_host() {
  var h = location.host;
  if (h.indexOf("www.") === 0) {
    h = h.replace("www.","");
  }
  if (h === "google.com") {
  	window.addEventListener("load", check_google_page);
  }
}

check_page_host();

[gingerbeardman]

I just went through a bunch of extensions that I "love living with", made by myself or others, and you're correct that a handful of them could easily be replaced with some UserScripts — exciting! And less work for me to do before I move to Safari 12+ and/or macOS 10.14+