☰

Greasy Fork is available in English.

Search by Image Context Menu

Add menu in browser context menu when you right click on an image to search that image on search engines.

  1. /*
  2.     Search by Image Context Menu
  3.     Add menu in browser context menu when you right click on
  4.     an image to search that image on search engines.
  5.     Copyright (C) 2012 LouCypher
  6.  
  7.     This program is free software: you can redistribute it and/or modify
  8.     it under the terms of the GNU General Public License as published by
  9.     the Free Software Foundation, either version 3 of the License, or
  10.     (at your option) any later version.
  11.  
  12.     This program is distributed in the hope that it will be useful,
  13.     but WITHOUT ANY WARRANTY; without even the implied warranty of
  14.     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  15.     GNU General Public License for more details.
  16.  
  17.     You should have received a copy of the GNU General Public License
  18.     along with this program. If not, see <http://www.gnu.org/licenses/>
  19. */
  20.  
  21. // ==UserScript==
  22. // @name            Search by Image Context Menu
  23. // @namespace       http://userscripts.org/users/12
  24. // @description     Add menu in browser context menu when you right click on an image to search that image on search engines.
  25. // @version         2.2
  26. // @author          LouCypher
  27. // @license         GPL
  28. // @resource        license https://raw.github.com/LouCypher/userscripts/master/licenses/GPL/LICENSE.txt
  29. // @include         *
  30. // @exclude         file://*
  31. // @grant           GM_openInTab
  32. // @grant           GM.openInTab
  33. // ==/UserScript==
  34.  
  35. function initMenu(aEvent) {
  36. // Executed when user right click on web page body
  37. // aEvent.target is the element you right click on
  38.   let item = document.querySelector("#userscript-search-by-image");
  39.   if (aEvent.target.localName == "img") {
  40.     body.setAttribute("contextmenu", "userscript-search-by-image");
  41.     item.setAttribute("imageURL", aEvent.target.src);
  42.   } else {
  43.     body.removeAttribute("contextmenu");
  44.     item.removeAttribute("imageURL");
  45.   }
  46. }
  47.  
  48. function addParamsToForm(aForm, aKey, aValue) {
  49.   let hiddenField = document.createElement("input");
  50.   hiddenField.setAttribute("type", "hidden");
  51.   hiddenField.setAttribute("name", aKey);
  52.   hiddenField.setAttribute("value", aValue);
  53.   aForm.appendChild(hiddenField);
  54. }
  55.  
  56. // Executed when user click on menuitem
  57. // aEvent.target is the <menu> element
  58. function searchImage(aEvent) {
  59.   let imageURL = document.querySelector("#userscript-search-by-image").getAttribute("imageURL");
  60.   console.log(aEvent.target);
  61.   if (imageURL.indexOf("data:") == 0) {
  62.     let base64Offset = imageURL.indexOf(",");
  63.     if (base64Offset != -1) {
  64.       let inlineImage = imageURL.substring(base64Offset + 1)
  65.                                 .replace(/\+/g, "-")
  66.                                 .replace(/\//g, "_")
  67.                                 .replace(/\./g, "=");
  68.  
  69.       let form = document.createElement("form");
  70.       form.setAttribute("method", "POST");
  71.       form.setAttribute("action", "//www.google.com/searchbyimage/upload");
  72.       form.setAttribute("enctype", "multipart/form-data");
  73.       form.setAttribute("target", "_blank");
  74.       addParamsToForm(form, "image_content", inlineImage);
  75.       addParamsToForm(form, "filename", "");
  76.       addParamsToForm(form, "image_url", "");
  77.       body.appendChild(form);
  78.       form.submit();
  79.     }
  80.   } else {
  81.     let url = aEvent.target.getAttribute("url") +
  82.               (aEvent.target.hasAttribute("noescape")
  83.               ? imageURL : encodeURIComponent(imageURL));
  84.     if (typeof GM_openInTab == "function") {
  85.       GM_openInTab(url, false);
  86.     } else if (typeof GM.openInTab == "function") {
  87.       GM.openInTab(url, false);
  88.     } else {
  89.       open(url);
  90.     }
  91.   }
  92. }
  93.  
  94. if (!("contextMenu" in document.documentElement &&
  95.       "HTMLMenuItemElement" in window)) return;
  96.  
  97. var body = document.body;
  98. body.addEventListener("contextmenu", initMenu, false);
  99.  
  100. var services = [
  101.   {
  102.     "name": "Google",
  103.     "host": "https://www.google.com/",
  104.     "query": "searchbyimage?image_url="
  105.   }, {
  106.     "name": "Bing",
  107.     "host": "https://www.bing.com/",
  108.     "query": "images/search?view=detailv2&iss=sbi&q=imgurl:"
  109.   }, {
  110.     "name": "Yandex",
  111.     "host": "https://yandex.com/",
  112.     "query": "images/search?rpt=imageview&url="
  113.   }, {
  114.     "name": "Baidu",
  115.     "host": "https://graph.baidu.com/",
  116.     "query": "details?carousel=0&image="
  117.   }, {
  118.     "name": "TinEye",
  119.     "host": "https://tineye.com/",
  120.     "query": "search?sort=size&order=desc&url="
  121.   }, {
  122.     "name": "SauceNAO",
  123.     "host": "https://saucenao.com/",
  124.     "query": "search.php?url="
  125.   }, {
  126.     "name": "IQDB",
  127.     "host": "https://iqdb.org/",
  128.     "query": "?url="
  129.   }, {
  130.     "name": "Karma Decay",
  131.     "host": "http://karmadecay.com/",
  132.     "query": "search?q="
  133.   }, {
  134.     "name": "ImgOps",
  135.     "host": "http://imgops.com/",
  136.     "query": ""
  137.   }
  138. ];
  139.  
  140. var menucontainer = body.appendChild(document.createElement("menu"));
  141. menucontainer.setAttribute("id", "userscript-search-by-image");
  142. menucontainer.setAttribute("type", "context");
  143.  
  144. var menu = menucontainer.appendChild(document.createElement("menu"));
  145. menu.setAttribute("label", "Search Image via\u2026");
  146.  
  147. for (let i in services) {
  148.   let menuitem = menu.appendChild(document.createElement("menuitem"));
  149.   menuitem.setAttribute("label", services[i].name);
  150.   menuitem.setAttribute("icon", services[i].host + "favicon.ico");
  151.   menuitem.setAttribute("url", services[i].host + services[i].query);
  152.   if (services[i].query == "")
  153.     menuitem.setAttribute("noescape", "");
  154. }
  155.  
  156. document.querySelector("#userscript-search-by-image>menu")
  157.         .addEventListener("click", searchImage, false);