Open google images in page instead of new tab
// ==UserScript==
// @name Super google
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Open google images in page instead of new tab
// @author Faris Hijazi
// @include https://www.google.*
// @include https://encrypted.google.com*
// @grant GM_setValue
// @grant GM_getValue
// @grant unsafeWindow
// @require http://code.jquery.com/jquery-latest.js
// @require https://greasyfork.org/scripts/38996-faris-handy-webdev-javascript-functions/code/Faris%20Handy%20Webdev%20JavaScript%20functions.user.js
// @run-at document-end
// ==/UserScript==
// @require https://github.com/buzamahmooza/Helpful-Web-Userscripts/raw/master/Handy%20AF%20functions%20Faris.user.js
// noinspection ES6ConvertVarToLetConst
var debug;
if (typeof debug === 'undefined') {
debug = false;
}
if (typeof log === 'undefined') {
log = function (msg) {
if (debug) console.log('Log:', msg);
};
}
const gImgSearchUrl = "https://encrypted.google.com/search?&hl=en&tbm=isch&q=";
const AUTO_SAVE_UBL_SITES = false;
const REPLACE_IMG_DATA = false;
if (typeof GM === 'undefined') // PRE GM4
{
GM = {};
// noinspection JSUnresolvedVariable
GM.getValue = GM_getValue;
// noinspection JSUnresolvedVariable
GM.setValue = GM_setValue;
}
let storedSuccessfulUrlsSet = GM_getValue('unblocked sites of og images', new Set(['forumophilia.com']));
let ublSitesMap = GM_getValue('ublSitesMap', new Map([['forumphilia.com', '']]));
let successfulUrlsSet = new Set();
if (typeof unsafeWindow === "undefined") {
unsafeWindow = window;
}
window.addEventListener("keydown", onkeydown, true);
// addToSet(storedSuccessfulUrlsSet, successfulUrlsSet);
storedSuccessfulUrlsSet.forEach(function (e, i, a) {
successfulUrlsSet.add(e);
});
// log('Stored successfulUrlsSet:', storedSuccessfulUrlsSet);
// log('successfulUrlsSet:', successfulUrlsSet);
if (AUTO_SAVE_UBL_SITES) setInterval(storeSuccessfulUrlsSet, 5000);
function updateSuccessfulUrlsSet() {
qa('.display-original-image').forEach(function (elt, index, array) {
let siteUrl = "" + getHostname(getGimgRUrl(elt));
if (/google\.com/.test(siteUrl)) siteUrl = getHostname(elt.getAttribute('rg_meta_ru'));
if (/tumblr\.com/.test(siteUrl)) siteUrl = siteUrl.replace(/^\d*?\./);
successfulUrlsSet.add(siteUrl);
console.log('adding ubl site:', siteUrl);
});
console.log('in updateSuccessfulUrlsSet:', Array.from(successfulUrlsSet));
return successfulUrlsSet; // returning just cuz it could be handy
}
function storeSuccessfulUrlsSet() {
updateSuccessfulUrlsSet();
var merged = new Set();
var stored = GM_getValue('unblocked sites of og images');
addToSet(merged, successfulUrlsSet);
addToSet(merged, stored);
var diff = Array.from(successfulUrlsSet).filter(x => Array.from(stored).indexOf(x) < 0);
console.log("Found unblocked site that isn't in the database:", diff);
// successfulUrlsSet;
// addToSet(successfulUrlsSet, storedSuccessfulUrlsSet);
GM_setValue('unblocked sites of og images', Array.from(merged));
console.log('stored set:', GM_getValue('unblocked sites of og images'));
// console.log('merged successfulUrlsSet:', Array.from(merged));
}
function observeDocument(callback) {
callback(document.body);
new MutationObserver(function (mutations) {
for (let i = 0; i < mutations.length; i++) {
if (!mutations[i].addedNodes.length)
continue;
callback(mutations[i].target);
}
}).observe(document.body, {
childList: true, subtree: true,
attributes: false, characterData: false
});
}
function observePanel(callback) {
new MutationObserver(function (mutations) {
for (let i = 0; i < mutations.length; i++) {
if (!mutations[i].addedNodes.length)
continue;
callback(mutations[i].target);
}
}).observe(ImagePanel.mainPanel, {
childList: true, subtree: true,
attributes: true, characterData: false
});
}
for (let elt of Array.from(getAllImgEls)) {
createAndAddAttribute(elt, 'download-name', getGimgDescription(elt));
}
let GIUtOST_MutOb = (window.MutationObserver) ? window.MutationObserver : window.WebKitMutationObserver;
if (REPLACE_IMG_DATA) {
replaceImgData();
observeDocument(replaceImgData);
}
if (GIUtOST_MutOb) {
const GIUtOST_chgMon = new GIUtOST_MutOb(function (mutationSet) {
mutationSet.forEach(function (mutation) {
for (let i = 0; i < mutation.addedNodes.length; i++) { // noinspection EqualityComparisonWithCoercionJS
if (mutation.addedNodes[i].nodeType == 1)
GIUtOST_checkNode(mutation.addedNodes[i]);
}
});
}); // attach chgMon to document.body
const opts = {childList: true, subtree: true};
GIUtOST_chgMon.observe(document.body, opts);
}
GIUtOST_checkNode(document.elements);
function getAllImgEls() {
return qa('img.rg_ic.rg_i');
}
/**abbreviation for querySelectorAll()*/
function qa(selector) {
let x = document.querySelectorAll(selector);
return x ? x : null;
}
function q(selector) {
let x = document.querySelector(selector);
return x ? x : null;
}
// Google images
function GIUtOST_checkNode(els) {
clickLoadMoreImages(els);
// showFullImageSiteURL(els);
// var picBoxes = qa('[pic-not-found]'); if(picBoxes.length <= 0) return;
// for(var i=0; i<picBoxes.length; i++) picBoxes[i] = picBoxes[i].parentNode.parentNode;
// document.getElementsByClassName("rg_bx rg_di rg_el ivg-i");
// if (picBoxes.length > 0) deleteElements(picBoxes);
}
function getImageBlocks() {
return qa('.rg_bx');
}
function showFullImageSiteURL(els) {
//siteAnchors
try {
if (els === null) return;
var as = els.querySelectorAll('div.Q7Rsec');
// console.log("as.length:" +as.length);
for (var i = 0; i < as.length; i++) {
var a = as[i];
var getLocation = function (href) {
var l = document.createElement("a");
l.href = href;
return l.hostname;
};
// if(a.classList.contains("ShowFullImageSiteURL")) break;
// if(a.href.match("/null")) {console.log("match with null");break;}
var host = getLocation(as[1].href);
// siteSearchAnchor
var ssa = document.createElement('a');
ssa.href = (GoogleImagesSearchURL + "site:" + (host));
// console.log("as["+i+"]: " +a.href);
// console.log(i+"Ssa.href: "+ ssa.href);
ssa.innerHTML = "site search[" + host + "]";
let span = document.createElement('span');
span.appendChild(ssa);
a.parentNode.appendChild(span);
a.classList.add("ShowFullImageSiteURL");
}
} catch (Exception) {
}
}
// working :)
function clickLoadMoreImages(els) {
var el = document.getElementById("smb");
if (!el) return;
el.click();
// if(debug)console.log("Load more images");
}
//[Google.com images]
function getDataElement(imgN) {
return imgN.parentNode.nextSibling;
}
function getDataText(imgN) {
let data = "Not a main image, No data text available";
try {
data = getDataElement(imgN).innerHTML;
} catch (exception) {
}
// console.log('Data text:', data);
return data;
}
function getGimgDescription(imgN) {
let txt = getDataText(imgN);
let title = extractFromText(txt, "ru");
let desc = extractFromText(txt, "s");
return title + "_" + desc;
// desc.length > 1 ? desc : title; // choosing one of them (prioratizing the description over the title)
}
function getGimgTitle(imgN) {
return extractImgData(imgN, 'pt');
}
function getGimgRUrl(imgN) {
return extractImgData(imgN, 'ru');
}
function getGimgDimensions(imgN) {
return extractImgData(imgN, 'ow') + 'x' + extractImgData(imgN, 'oh');
}
function extractImgData(imgN, key) {
return extractFromText(getDataText(imgN), key);
}
/** The fallback will be the value returned if no results were found. */
function extractFromText(txt, key, fallback) {
let data = typeof fallback === undefined ? fallback : ("no image data found for key: '" + key + "'");
let regex = new RegExp('(?<="' + key + '":")(.+?)(?=")');
if (!txt) return data;
let matches = txt.match(regex);
data = (matches) ? matches[0] : data;
return data;
}
if (false) window.onbeforeunload = function (e) { // on tab exit
ublSites = new Set(ublSites, GM_getValue('unblocked sites of og images'));
console.log('ublSites:', ublSites);
GM_setValue('unblocked sites of og images', Array.from(ublSites));
var message = "Saving unblocked sites (confirmation).", e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
};
// replaces the image description link text
function replaceImgData(dataEls) {
if (typeof dataEls === 'undefined') return;
dataEls.querySelectorAll('.rg_meta').forEach(function (dataEl) {
if (dataEl.classList.contains('rg_meta-modified')) return;
try {
let dataText = dataEl.innerHTML;
// console.log('modifying meta data text:', dataText);
let siteUrl = extractFromText(dataText, 'ru');
let description = extractFromText(dataText, 's');
let subTitle = extractFromText(dataText, 'st');
let imageAnchor = dataEl.previousSibling;
createAndAddAttribute(imageAnchor, 'rg_meta_st', subTitle);
createAndAddAttribute(imageAnchor, 'rg_meta_ru', siteUrl);
let hostname = getHostname(siteUrl).replace('www.', '');
let siteSearchUrl = GoogleImagesSearchURL + "site:" + encodeURIComponent(hostname);
dataEl.innerHTML = dataEl.innerHTML
.replace(subTitle, 'site search: ' + hostname) // replace SubTitle text with site HOSTNAME
.replace(siteUrl, siteSearchUrl) // replace title lin with site siteSearch link
// .replace(description, HOSTNAME)
;
dataEl.classList.add('rg_meta-modified');
} catch (exception) {
console.error("Caught exception while changin rg_meta:", exception);
}
});
}
function makeImageDescriptionsClickable() {
ImagePanel.mainPanel.forEach(function (panel) {
var description = panel.querySelector('div.irc_b.i8152.irc_mmc > div.i30053 > div > div.irc_it > div.irc_hd > div[dir="ltr"] > font > font');
description.addEventListener("click", function (e) {
var search = gImgSearchUrl + this.innerHTML;
window.open(search, "_blank");
});
});
}
unsafeWindow.extractImgData = extractImgData;
unsafeWindow.getGimgTitle = getGimgTitle;
unsafeWindow.getGimgRUrl = getGimgRUrl;
unsafeWindow.getGimgDescription = getGimgDescription;
unsafeWindow.reverseImgSearch = reverseImgSearch;
//[Google.com images]
unsafeWindow.saveUblSites = function () {
storeSuccessfulUrlsSet();
console.log('Site links of unblocked images "display-original-image"es:', Array.from(successfulUrlsSet));
};
function addToSet(mainSet, otherSet) {
if (typeof mainSet === 'undefined' || typeof otherSet === 'undefined') return;
try {
// if(isIterable(otherSet) && isIterable(mainSet))
otherSet.forEach(function (elt, i, a) {
if (typeof elt === 'string') {
mainSet.add(elt);
}
});
} catch (exc) {
}
console.log('merged sets:', Array.from(mainSet));
return mainSet;
}
function reverseImgSearch(imageUrl) {
window.open("https://encrypted.google.com/searchbyimage?&image_url=" + imageUrl, "_blank");
}
/**Here's a vanilla js example to trigger any event:
*
<code> triggerEvent(targetElement, 'keyup', 13); // simulate mouse/enter key press</code>*/
function triggerEvent(el, type, keyCode) {
// focus on the input element
el.focus();
if ('createEvent' in document) {
// modern browsers, IE9+
var e = document.createEvent('HTMLEvents');
e.keyCode = keyCode;
e.initEvent(type, false, true);
el.dispatchEvent(e);
} else {
// IE 8
var e = document.createEventObject();
e.keyCode = keyCode;
e.eventType = type;
el.fireEvent('on' + e.eventType, e);
}
}
/* Understanding Google Images
###Image Boxes:
Image boxes are contained in one parent element with the selector: `div#rg_s`.
Every image box contains an `img`, and a `div` containing the data.
Attributes |Selector| Notes
--- | --- | ---
**img** |
*ClassName =*| **nicely**
###The Image Panel:
There is one big panel containing 3 sub-panels, you only get to see one sub-panel at a time.
Moving to the next image will rotate the 3 sub-panels, and you will visit each one as they rotate.
* Main panel selector: `#irc_cc`
* Sub-panels contain a `data-ved` attribute, only the active one will have data, the other 2 will be `null`.
* Active sub-panel selector: `#irc_cc div.irc_t:not([data-ved="null"])`
*/
class ImageBox extends Element {
}//TODO:
class ImagePanel {
constructor(element) {
if (typeof element !== 'undefined') {
this.element = element;
}
this.makeDescriptionClickable();
// this.relatedImagesDiv = {divElement: this.element,}
}
makeDescriptionClickable() {
this.descriptionEl.addEventListener("click", function (e) {
const search = gImgSearchUrl + this.innerHTML;
window.open(search, "_blank");
});
}
get isFocused() {
return "translate3d(0px, 0px, 0px)".test(this.getAttribute('style'));
}
static get mainPanel() {
const mainPanelEl = q("#irc_cc");
return mainPanelEl ? new ImagePanel(mainPanelEl) : false;
}
get titleAndDescriptionDiv() {
this.element.querySelector('._cjj > .irc_it');
}
/**
* @returns {ElementTagNameMap[] | Element}
*/
get descriptionEl() {
if (this.titleAndDescriptionDiv)
this.titleAndDescriptionDiv.querySelector('div.irc_hd > div[dir="ltr"] > font > font, div.irc_hd > div[dir="ltr"]');
}
get titleEl() {
if (this.titleAndDescriptionDiv)
this.titleAndDescriptionDiv.querySelector('span ~ a');
}
get title() {
return this.titleEl.innerHTML;
}
get subtitleEl() {
if (this.titleAndDescriptionDiv)
this.titleAndDescriptionDiv.querySelector('span a.irc_lth._ZR');
}
get subtitle() {
return this.subtitleEl.innerHTML;
}
/**
* returns that small square at the bottom right (the focused one)
* @returns {ElementTagNameMap[string] | Element}
*/
get focusedRelativeImage() {
return this.element.querySelector('div.irc_rimask.irc_rist');
}
get imageUrl() {
this.focusedRelativeImage.querySelector('a').href;
}
get image() {
return this.element.querySelector('img#irc_mi,img.irc_mut');
}
/**
* @returns {ElementTagNameMap[string] | Element} returns the panel that is currently in focus (there are 3 panels)
*/
static get focusedPanel() {
var p = this.mainPanel ? this.mainPanel.querySelector('div.irc_c[style*="translate3d(0px, 0px, 0px)"]') : null;
console.log('mainPanel:', p);
return p;
}
// TODO: getters:
// description
// title
// subtitle
}
function mainPanel() {
const mainPanelEl = q("#irc_cc");
return mainPanelEl;
}
// hot-keys
let KeyEvent;
if (typeof KeyEvent === "undefined") {
KeyEvent = {
DOM_VK_SPACE: 32,
DOM_VK_LEFT: 37,
DOM_VK_UP: 38,
DOM_VK_RIGHT: 39,
DOM_VK_DOWN: 40,
DOM_VK_A: 65,
DOM_VK_D: 68,
DOM_VK_P: 80,
DOM_VK_Q: 81,
DOM_VK_R: 82,
DOM_VK_S: 83,
DOM_VK_V: 86,
DOM_VK_W: 87,
DOM_VK_COMMA: 188,
DOM_VK_DOT: 190,
DOM_VK_NUMPAD1: 97,
DOM_VK_NUMPAD2: 98,
DOM_VK_NUMPAD3: 99,
DOM_VK_NUMPAD4: 100,
DOM_VK_NUMPAD_LEFT: 100,
DOM_VK_NUMPAD5: 101,
DOM_VK_NUMPAD6: 102,
DOM_VK_NUMPAD_RIGHT: 102,
DOM_VK_NUMPAD7: 103,
DOM_VK_NUMPAD8: 104,
DOM_VK_NUMPAD9: 105,
DOM_VK_NUMPAD_DIVIDE: 106,
DOM_VK_NUMPAD_MULTIPLY: 111,
DOM_VK_NUMPAD_ENTER: 113,
DOM_VK_F5: 116
};
}
function onkeydown(b) {
const a = (window.event) ? b.keyCode : b.which;
/** @type {{CTRL_ONLY: boolean, SHIFT_ONLY: boolean, ALT_ONLY: boolean, NONE: boolean}} */
const ModifierKeys = {
CTRL_ONLY: b.ctrlKey && !b.altKey && !b.shiftKey && !b.metaKey,
SHIFT_ONLY: !b.ctrlKey && !b.altKey && b.shiftKey && !b.metaKey,
ALT_ONLY: !b.ctrlKey && b.altKey && !b.shiftKey && !b.metaKey,
NONE: !b.ctrlKey && !b.shiftKey && !b.altKey && !b.metaKey
};
// if(b.ctrlKey && a == KeyEvent.DOM_VK_S)
// {
// if(i)
// {
// a = protected_createElement("a");
// a.href = i.src;
// a.download = ""; // HTML5
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);
// }
// return;
// }
// if (b.altKey || b.metaKey || (b.ctrlKey && a != KeyEvent.DOM_VK_SPACE && a != KeyEvent.DOM_VK_F5 && a != KeyEvent.DOM_VK_R))
// {
// return;
// }
// var by = Math.round(window.innerHeight * 0.10);
const panel = mainPanel().querySelector('div.irc_c[style*="translate3d(0px, 0px, 0px)"]'); //ImagePanel.focusedPanel; // the active panel
if (!panel) {
console.error("SUBPANEL NOT FOUND!!");
return false;
}
const focusedRelatedImage = panel.querySelector('div.irc_rimask.irc_rist');//panel.focusedRelativeImage;
const panelImage = panel.querySelector('img#irc_mi,img.irc_mut');
/**
* @type {any | NodeListOf<Element>}
* 0 - Visit
* 1 - Save
* 2 - View saved
* 3 - Share
*/
const buttons = panel.querySelectorAll('.irc_but_r > tbody > tr a');
const visitPageButton = buttons[0];
const titleAndDescriptionDiv = panel.querySelector('._cjj > .irc_it');
const titleEl = titleAndDescriptionDiv.querySelector('span ~ a');
const subtitleEl = titleAndDescriptionDiv.querySelector('span a.irc_lth._ZR');
log("titleAndDescriptionDiv:", titleAndDescriptionDiv);
if (!titleEl) console.error("Title element not found");
if (!subtitleEl) console.error("SubTitle element not found");
const title = titleEl.innerHTML;
// panel.querySelector('a._ZR.irc_hol.i3724.irc_lth');
const subtitle = subtitleEl.innerHTML;
// image drop-down panel: #irc_bg
/**Goes to the previous main image*/
function previousImage() {
// triggerEvent(q("#irc_bg"), "keyup", KeyEvent.DOM_VK_LEFT);
q('#irc_la').click();
}
/**Goes to the next main image*/
function nextImage() {
// triggerEvent(q("#irc_bg"), "keyup", KeyEvent.DOM_VK_LEFT);
q('#irc_ra').click();
}
function lookupTitle() {
const extractedTitleSearchText = (title.length < subtitle.length ? subtitle : title); // use the longer title
openInTab(GoogleReverseImagesSearchURL + extractedTitleSearchText);
}
function siteSearch() {
const hostname = getHostname(subtitleEl.href);
console.log('Site search:', hostname);
openInTab(siteSearchUrl(getHostname(subtitleEl.href)));
}
switch (a) {
// Search by image/ site search
case KeyEvent.DOM_VK_V:
case KeyEvent.DOM_VK_NUMPAD1:
const focusedRelatedImageUrl = focusedRelatedImage.querySelector('a').href;
console.log('currentPanelImage', focusedRelatedImageUrl);
if (typeof panelImage !== "undefined") {
reverseImgSearch(focusedRelatedImageUrl);
log("focusedRelatedImageUrl:", focusedRelatedImageUrl);
} else
console.error('Image not found', focusedRelatedImageUrl);
break;
// TODO:
case KeyEvent.DOM_VK_NUMPAD4:
nextImage();
break;
case KeyEvent.DOM_VK_NUMPAD6:
previousImage();
break;
// Open related images (press the bottom right square in the corner) in new tab
case KeyEvent.DOM_VK_NUMPAD3:
const moreRelatedImagesLink = q('.irc_rismo.irc_rimask a');
if (typeof moreRelatedImagesLink !== 'undefined')
openInTab(moreRelatedImagesLink.href);
break;
case KeyEvent.DOM_VK_NUMPAD5:
if (ModifierKeys.NONE) {
openInTab(focusedRelatedImage.querySelector('a').href);
} else if (ModifierKeys.CTRL_ONLY) {
download(focusedRelatedImage.querySelector('a').href, undefined, undefined, focusedRelatedImage);
}
break;
// Previous related image
case KeyEvent.DOM_VK_COMMA:
case KeyEvent.DOM_VK_NUMPAD8:
let previousElementSibling = focusedRelatedImage.previousElementSibling;
(previousElementSibling) ?
previousElementSibling.click() :
previousImage();
break;
// Next related image
case KeyEvent.DOM_VK_DOT:
case KeyEvent.DOM_VK_NUMPAD2:
let nextElementSibling = focusedRelatedImage.nextElementSibling;
(nextElementSibling && !nextElementSibling.classList.contains('irc_rismo')) ?
nextElementSibling.click() :
nextImage();
break;
// lookup the images title.
// Opens a new window with the search query as the image title
case KeyEvent.DOM_VK_NUMPAD7:
// I have options, I'll choose the best later
const visitUrl = buttons[0].href;
const visitTitleUrl = subtitleEl.href;
console.log('Visit:', visitUrl);
openInTab(visitUrl);
break;
//TODO: Search using title
//TODO: Visit website/ GIMG Site.Search the website
case KeyEvent.DOM_VK_NUMPAD9:
if (ModifierKeys.NONE) {
lookupTitle();
} else if (ModifierKeys.CTRL_ONLY) { // site search
siteSearch();
}
break;
case KeyEvent.DOM_VK_S:
siteSearch();
break;
}
}
function openInTab(url) {
window.open(url, "_blank");
}
// data-cthref = /url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=2ahUKEwjW84KFwbzZAhUvT98KHX4fA6UQjB16BAgAEAU&url=http%3A%2F%2Frwby.wikia.com%2Fwiki%2FFile%3ATEAM_PAJAMA_RWBY!.jpg&psig=AOvVaw2HgCMglmhtGPN4QfLzDi4P&ust=1519491410121543