Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Userscript version of the View Image chrome extension
// ==UserScript==
// @name Google Search "View Image" Button
// @name:ru Google Search кнопка "Показать в полном размере"
// @name:sl Gumb "Ogled slike" na Google Slikah
// @name:uk Google Search кнопка "Показати зображення"
// @name:lt Google paieškos mygtukas "Rodyti vaizdą"
// @name:pl Przycisk "Pokaż obraz" w wyszukiwarce obrazów Google
// @name:ja Google検索「画像を表示」ボタン
// @name:nl Google zoeken "Afbeelding bekijken" knop
// @namespace https://github.com/devunt/make-gis-great-again
// @icon https://raw.githubusercontent.com/devunt/make-gis-great-again/master/icons/icon.png
// @version 1.4.1
// @description This userscript adds "View Image" button to Google Image Search results.
// @description:ru Этот скрипт добавляет кнопку "Показать в полном размере" к результатам Google Image Search.
// @description:sl Ponovno prikaže gumb "Ogled slike" na Google Slikah.
// @description:uk Цей скрипт додає кнопку "Показати зображення" до результатів Google Image Search
// @description:lt Šis vartotojo skriptas prideda mygtuką "Rodyti vaizdą" į Google vaizdo paieškos rezultatus.
// @description:pl Ten skrypt przywraca przycisk "Pokaż obraz" do wyszukiwarki obrazów Google
// @description:ja このUserScriptはGoogle検索結果に「画像を表示」ボタンを追加します。
// @description:nl Voegt de "Afbeelding bekijken" knop aan toe aan Google Afbeeldingen.
// @author Bae Junehyeon
// @run-at document-end
// @include http*://*.google.tld/search*tbm=isch*
// @updateURL https://gist.github.com/trlkly/cb4f9a349259f1df4eeef6e3f438600c/raw/make-gis-great-again.user.js
// ==/UserScript==
const lang = {
en: 'View image',
ru: 'Показать в полном размере',
'zh-CN': '查看原图',
ja: '画像を表示',
he: 'הצג תמונה',
fr: 'Voir l\'image',
sl: 'Ogled slike',
ar: 'عرض الصورة',
de: 'Bild ansehen',
tr: 'Resmi görüntüle',
pt: 'Ver imagem',
lt: 'Rodyti vaizdą',
pl: 'Pokaż obraz',
nl: 'Afbeelding bekijken',
se: 'Visa bild',
uk: 'Показати зображення',
it: 'Apri immagine'
};
const localizedViewImage = lang[(lang[navigator.language] ? navigator.language : 'en')];
function addButton(node) {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node.classList.contains('irc_ris')) {
let container = node.closest('.irc_c');
let similarImages = node.querySelectorAll('.rg_l');
[].forEach.call(similarImages, (image) => {
image.addEventListener('click', updateLinkAfterClickOnSimilar);
});
let thumbnail = node.querySelector('.irc_rimask.irc_rist');
let src = unescape(thumbnail.querySelector('.rg_l').href.match(/imgurl=([^&]+)/)[1]);
let buttons = container.querySelector('.irc_but_r tr');
let button = buttons.querySelector('td.mgisga');
if (button === null) {
let openButton = buttons.querySelector('td');
button = openButton.cloneNode(true);
button.classList.add('mgisga');
button.querySelector('a span:nth-child(2)').innerText = localizedViewImage;
let link = button.querySelector('a');
link.href = src;
link.className = '';
link.removeAttribute('data-cthref');
link.removeAttribute('jsaction');
openButton.after(button);
}
let link = button.querySelector('a');
link.href = src;
}
}
}
function updateLinkAfterClickOnSimilar({target:node}) {
let src = unescape(node.closest('.rg_l').href.match(/imgurl=([^&]+)/)[1]);
let container = node.closest('.irc_c');
let button = container.querySelector('.mgisga');
let link = button.querySelector('a');
link.href = src;
}
function addLinks(node) {
if (!node.closest) return;
var object = node.closest('.irc_c');
if (object === null) return;
const local = {
en: 'Search by Image',
ru: 'Поиск по картинке',
'zh-CN': '以图搜图',
'zh-TW': '以圖搜圖',
ja: '画像を検索',
he: 'חפש לפי תמונה',
fr: 'Recherche par image',
sl: 'Iskanje s sliko',
ar: 'البحث عن الصورة',
de: 'Zur "Bildersuche"',
tr: 'Görselle Ara',
pt: 'Pesquisar por imagem',
lt: 'Ieškoti paveikslėlio',
pl: 'Wyszukiwanie obrazem',
nl: 'Afbeelding zoeken',
se: 'Fler storlekar',
uk: 'Шукати зображення',
it: 'Ricerca tramite immagine'
};
var searchByImageMessage = local[(local[navigator.language] ? navigator.language : 'en')];
var imageText = object.querySelector('._cjj > .irc_it > .irc_hd > ._r3') ||
object.querySelector('.Qc8zh > .irc_it > .irc_hd > .rn92ee');
// Create more sizes button
var moreSizes = document.createElement('a');
moreSizes.setAttribute('href', '#'); // TODO: Figure out how to generate a more sizes url
moreSizes.setAttribute('class', 'ext_addon _ZR irc_hol irc_lth _r3');
moreSizes.setAttribute('style', 'pointer-events:none'); // Disable click for now
// Insert text into more sizes button
var moreSizesText = document.createElement('span');
moreSizesText.innerHTML = object.querySelector('.irc_idim').innerHTML;
moreSizes.appendChild(moreSizesText);
// Create Search by image button
var searchByImage = document.createElement('a');
var thumbnail = node.querySelector('.irc_rimask.irc_rist');
if (!thumbnail) return;
var src = unescape(thumbnail.querySelector('.rg_l').href.match(/imgurl=([^&]+)/)[1]);
searchByImage.setAttribute('href', '/searchbyimage?image_url=' + src);
searchByImage.setAttribute('target', '_blank'); // COMMENT THIS TO NOT OPEN IN NEW TAB
searchByImage.setAttribute('class', 'ext_addon _ZR irc_hol irc_lth _r3');
// Insert text into Search by image button
var searchByImageText = document.createElement('span');
searchByImageText.textContent = searchByImageMessage;
searchByImage.appendChild(searchByImageText);
// Append More sizes & Search by image buttons
imageText.append('\xa0\xa0\xa0 ');
imageText.appendChild(moreSizes);
imageText.append('\xa0\xa0\xa0 ');
imageText.appendChild(searchByImage);
}
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
const addedNodes = mutation.addedNodes || [];
[].forEach.call(addedNodes, (newNode) => {
addButton(newNode);
addLinks(newNode);
});
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
addButton(document.body);
addLinks(document.body);
// ==UserScript==
// @name View Image
// @namespace https://github.com/bijij/ViewImage
// @version 1.9.3.2
// @description This userscript re-implements the "View Image" and "Search by image" buttons into google images.
// @author Bae Junehyeon
// @run-at document-end
// @include http*://*.google.tld/search*tbm=isch*
// @include http*://*.google.tld/imgres*
// @updateURL https://gist.github.com/trlkly/cb4f9a349259f1df4eeef6e3f438600c/raw/viewimage.user.js
// ==/UserScript==
'use strict';
// Locale
var searchByImageMessage = 'Search by image';
var viewImageMessage = 'View Image';
function addLinks(node) {
var object = node.closest('.irc_c[style*="visibility: visible;"], .irc_c[style*="transform: translate3d(0px, 0px, 0px);"]');
if (!object)
object = node.closest('.irc_c[style*="transform: translate3d(0px, 0px, 0px);"]');
// Stop if object not found
if (object === null) {
return;
}
// Remove previously generated elements
var oldExtensionElements = object.querySelectorAll('.ext_addon');
for (var i = oldExtensionElements.length - 1; i >= 0; i--) {
var element = oldExtensionElements[i];
element.parentElement.removeChild(element);
}
// Retrive image links, and image url
var imageLinks = object.querySelector('._FKw.irc_but_r > tbody > tr');
if (!imageLinks)
imageLinks = object.querySelector('.irc_but_r > tbody > tr');
var imageText = object.querySelector('._cjj > .irc_it > .irc_hd > ._r3');
if (!imageText)
imageText = object.querySelector('.Qc8zh > .irc_it > .irc_hd > .rn92ee');
// Retrive the image;
var image = object.querySelector('img[alt^="Image result"][src]:not([src^="https://encrypted-tbn"]).irc_mut, img[src].irc_mi');
// Override url for images using base64 embeds
if (image === null || image.src === '' || image.src.startsWith('data')) {
var thumbnail = document.querySelector('img[name="' + object.dataset.itemId + '"]');
if (thumbnail === null) {
// If no thumbnail found, try getting image from URL
var url = new URL(window.location);
var imgLink = url.searchParams.get('imgurl');
if (imgLink) {
image = [];
image.src = imgLink;
}
} else {
var meta = thumbnail.closest('.rg_bx').querySelector('.rg_meta');
var metadata = JSON.parse(meta.innerHTML);
image = [];
image.src = metadata.ou;
}
// Supress error in console
if (image === null)
return;
}
// Create more sizes button
var moreSizes = document.createElement('a');
moreSizes.setAttribute('href', '#'); // TODO: Figure out how to generate a more sizes url
moreSizes.setAttribute('class', 'ext_addon _ZR irc_hol irc_lth _r3');
moreSizes.setAttribute('style', 'pointer-events:none'); // Disable click for now
// Insert text into more sizes button
var moreSizesText = document.createElement('span');
image.sizeText = moreSizesText;
moreSizesText.innerHTML = object.querySelector('.irc_idim').innerHTML;
moreSizes.appendChild(moreSizesText);
// Create Search by image button
var searchByImage = document.createElement('a');
searchByImage.setAttribute('href', '/searchbyimage?image_url=' + image.src);
searchByImage.setAttribute('target', '_blank'); // COMMENT THIS TO NOT OPEN IN NEW TAB
searchByImage.setAttribute('class', 'ext_addon _ZR irc_hol irc_lth _r3');
// Insert text into Search by image button
var searchByImageText = document.createElement('span');
searchByImageText.textContent = searchByImageMessage;
searchByImage.appendChild(searchByImageText);
// Append More sizes & Search by image buttons
imageText.appendChild(moreSizes);
imageText.appendChild(searchByImage);
// Create View image button
var viewImage = document.createElement('td');
viewImage.setAttribute('class', 'ext_addon');
// Add globe to View image button
var viewImageLink = document.createElement('a');
var globeIcon = document.querySelector('._RKw._wtf._Ptf') ||
document.querySelector('.RL3J9c');
if (globeIcon)
viewImageLink.appendChild(globeIcon.cloneNode(true));
// hide copyright text if toggle enabled
var copyWarning = object.querySelector('.irc_bimg.irc_it');
copyWarning.style = 'display: none;';
// add text to view image button
var viewImageTextClone = document.createElement('span');
viewImageTextClone.textContent = viewImageMessage;
viewImageLink.appendChild(viewImageTextClone);
// Add View image button URL
viewImageLink.setAttribute('href', image.src);
viewImageLink.setAttribute('target', '_blank');
viewImage.appendChild(viewImageLink);
// Add View image button to Image Links
var save = imageLinks.childNodes[1];
imageLinks.insertBefore(viewImage, save);
}
// Define the mutation observer
var observer = new MutationObserver(function (mutations) {
for (var i = 0; i < mutations.length; i++) {
var mutation = mutations[i];
if (mutation.addedNodes && mutation.addedNodes.length > 0) {
for (var j = 0; j < mutation.addedNodes.length; j++) {
var newNode = mutation.addedNodes[j];
if (newNode.nodeType === Node.ELEMENT_NODE) {
if (newNode.classList.contains('irc_mi') | newNode.classList.contains('irc_mut') | newNode.classList.contains('irc_ris')) {
addLinks(newNode);
}
}
}
}
}
});
// Get options and start adding links
var objects = document.querySelectorAll('.irc_c');
for (var i = 0; i < objects.length; i++) {
addLinks(objects[i]);
}
observer.observe(document.body, {
childList: true,
subtree: true
});
// inject CSS into document
var customStyle = document.createElement('style');
customStyle.textContent = '._r3:hover:before{display:inline-block;pointer-events:none} ._r3{margin: 0 4pt!important}';
document.head.appendChild(customStyle);
@psychonaut25

This comment has been minimized.

Copy link

commented Apr 7, 2018

Thank you so much

@Aiddog10

This comment has been minimized.

Copy link

commented Apr 12, 2018

Dude you are the freaking best!

@psychonaut25

This comment has been minimized.

Copy link

commented Apr 12, 2018

It seems to have stopped working

@psychonaut25

This comment has been minimized.

Copy link

commented Apr 13, 2018

Ah, I have discovered the problem: When I select one of the related images and click on "view image" it only shows me the main image, not the related image that I've selected

@Chuck2134

This comment has been minimized.

Copy link

commented Apr 17, 2018

Dude thank you so much you freaking rule

@PentagramTr

This comment has been minimized.

Copy link

commented Apr 19, 2018

It works in Chrome but it does not work in Firefox.The "View Image" button does not appear.

@apparition47

This comment has been minimized.

Copy link

commented May 16, 2018

Stopped working for me recently as well. This userscript make-gis-great-again works though.

@trlkly

This comment has been minimized.

Copy link
Owner Author

commented May 18, 2018

I should have fixed the current problem. Don't know about Firefox, though.

make-gis-great-again doesn't include the image search feature, but maybe I can modify it. This script seems to break more often than that one.

@gitguys

This comment has been minimized.

Copy link

commented Apr 27, 2019

Google changed things and it no longer works. Any plans to fix?

@Vangelis66

This comment has been minimized.

Copy link

commented Aug 19, 2019

@gitguys

... Pending an update, I've switched myself to

https://greasyfork.org/el/scripts/38953-google-image-view-image-button

It works (at least for now; no doubt evil Google will break things again at first chance...) !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.