Fetch image within WebExtension

README.md

@@ -8,7 +8,6 @@ Anime Reverse Search WebExtension for Chrome, Firefox and Opera
 [![Chrome Web Store](https://img.shields.io/badge/Chrome-Extension-green.svg?maxAge=86400)](https://chrome.google.com/webstore/detail/search-anime-by-screensho/gkamnldpllcbiidlfacaccdoadedncfp)
 [![Firefox Addon](https://img.shields.io/badge/Firefox-Add--on-orange.svg?maxAge=86400)](https://addons.mozilla.org/en-US/firefox/addon/search-anime-by-screenshot/)
 [![Opera Addon](https://img.shields.io/badge/Opera-Add--on-red.svg?maxAge=86400)](https://addons.opera.com/en/extensions/details/search-anime-by-screenshot/)
-[![Edge Extension](https://img.shields.io/badge/Edge-Extension-blue.svg?maxAge=86400)]()
 
 Use anime screenshots to search where this scene is taken from.
 

bg.js

@@ -1,27 +1,152 @@
-if (!self.browser && self.chrome) {
-  browser = chrome;
-}
-
-browser.runtime.onInstalled.addListener(() => {
-  browser.contextMenus.create({
-    id: 'search-on-whatanime.ga',
-    title: 'Search on whatanime.ga',
-    contexts: ['image']
-  })
-});
-
-browser.contextMenus.onClicked.addListener((info, tab) => {
-  if (info.menuItemId !== "search-on-whatanime.ga") {
-    return;
-  }
-
-  browser.storage.local.get('autoSearch', (res) => {
-    let searchURL = 'https://whatanime.ga/?auto&url=' + info.srcUrl
-    if (res.autoSearch === false) {
-      searchURL = 'https://whatanime.ga/?url=' + info.srcUrl
-    }
-    browser.tabs.create({
-      url: searchURL
-    })
-  })
+if (!self.browser && self.chrome) {
+  browser = chrome;
+}
+
+browser.contextMenus.create({
+  id: 'search-on-whatanime.ga',
+  title: 'Search on whatanime.ga',
+  contexts: ['image', 'video']
+});
+
+var imageDataURL;
+
+var handleMessage = function(request, sender, sendResponse) {
+  if (request.type === "getImageDataURL" && imageDataURL) {
+    sendResponse({
+      imageDataURL: imageDataURL
+    });
+    imageDataURL = null;
+  }
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+
+
+var search = function(dataURL) {
+  imageDataURL = dataURL;
+  browser.tabs.create({
+    url: 'https://whatanime.ga'
+  })
+}
+
+var toDataURL = function(source) {
+  try {
+    var canvas = document.createElement("canvas");
+    canvas.crossOrigin = 'anonymous';
+    canvas.height = 720;
+    if (source.nodeName === "VIDEO") {
+      canvas.width = source.videoWidth / source.videoHeight * canvas.height;
+    } else {
+      canvas.width = source.width / source.height * canvas.height;
+    }
+    canvas.getContext('2d').drawImage(source, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL("image/jpeg", 0.8);
+  } catch (err) {
+    return null;
+  }
+}
+
+var getDataURL = function(target) {
+  return new Promise(
+    function(resolve, reject) {
+      browser.tabs.query({
+          'active': true
+        },
+        function(tabs) {
+          browser.tabs.sendMessage(
+            tabs[0].id, {
+              action: "getDataURL",
+              target: target
+            },
+            function(response) {
+              if (response && response.dataURL) {
+                resolve(response.dataURL);
+              } else {
+                reject(Error("CORS Error"));
+              }
+            }
+          );
+        });
+    }
+  );
+}
+
+var fetchImage = function(src) {
+  var img = new Image();
+  img.crossOrigin = 'anonymous';
+  img.onload = function() {
+    search(toDataURL(this));
+  };
+  img.src = src;
+}
+
+var getCurrentTime = function(target) {
+  return new Promise(
+    function(resolve, reject) {
+      browser.tabs.query({
+          'active': true
+        },
+        function(tabs) {
+          browser.tabs.sendMessage(
+            tabs[0].id, {
+              action: "getCurrentTime",
+              target: target
+            },
+            function(response) {
+              resolve(response.currentTime);
+            }
+          );
+        }
+      );
+    }
+  );
+};
+
+var fetchVideo = function(src, currentTime) {
+  var player = document.createElement("video");
+  player.crossOrigin = 'anonymous';
+  player.src = src;
+  player.width = player.videoWidth;
+  player.height = player.height;
+  player.currentTime = currentTime;
+  player.volume = 0;
+  player.onloadeddata = function() {
+    search(toDataURL(player));
+  };
+}
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  console.log(info);
+  if (info.srcUrl) {
+    if (info.srcUrl.indexOf('blob:') === 0) {
+      // must capture on context script
+      // for video it will return capture at currentTime
+      getDataURL(info.srcUrl)
+        .then(function(dataURL) {
+          search(dataURL);
+        });
+
+    } else if (info.mediaType === "image" && info.srcUrl.indexOf('data:') === 0) {
+      search(info.srcUrl);
+
+    } else if (info.mediaType === "image") {
+      getDataURL(info.srcUrl)
+        .then(function(dataURL) {
+          search(dataURL);
+        }, function() {
+          fetchImage(info.srcUrl);
+        });
+
+    } else if (info.mediaType === "video") {
+      getDataURL(info.srcUrl)
+        .then(function(dataURL) {
+          search(dataURL);
+        }, function() {
+          getCurrentTime(info.srcUrl)
+            .then(function(currentTime) {
+              fetchVideo(info.srcUrl, currentTime);
+            });
+        });
+    }
+  }
 });

content.js

@@ -0,0 +1,58 @@
+if (!self.browser && self.chrome) {
+  browser = chrome;
+}
+
+var toDataURL = function(source) {
+  try {
+    var canvas = document.createElement("canvas");
+    canvas.crossOrigin = 'anonymous';
+    canvas.height = 720;
+    if (source.nodeName === "VIDEO") {
+      canvas.width = source.videoWidth / source.videoHeight * canvas.height;
+    } else {
+      canvas.width = source.width / source.height * canvas.height;
+    }
+    canvas.getContext('2d').drawImage(source, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL("image/jpeg", 0.8);
+  } catch (err) {
+    return null;
+  }
+}
+
+var absolutePath = function(href) {
+  var link = document.createElement("a");
+  link.href = href;
+  return (link.protocol + "//" + link.host + link.pathname + link.search + link.hash);
+}
+
+var handleMessage = (request, sender, sendResponse) => {
+  if (request.action === "getCurrentTime") {
+    var currentTime = 0;
+    var videos = document.querySelectorAll("video");
+    for (var i = 0; i < videos.length; ++i) {
+      if (absolutePath(videos[i].src).indexOf(request.target)) {
+        currentTime = videos[i].currentTime;
+        break;
+      }
+      var sources = videos[i].querySelectorAll("source");
+      for (var j = 0; j < sources.length; ++j) {
+        if (absolutePath(sources[j].src).indexOf(request.target)) {
+          currentTime = videos[i].currentTime;
+        }
+        break;
+      }
+    }
+    sendResponse({
+      currentTime: currentTime
+    });
+  } else if (request.action === "getDataURL") {
+    //assume only one element match the blob URL
+    let source = document.querySelector(`*[src='${request.target}']`);
+    sendResponse({
+      dataURL: toDataURL(source)
+    });
+  }
+
+}
+
+browser.runtime.onMessage.addListener(handleMessage);

manifest.json

@@ -1,26 +1,43 @@
-{
-    "author": "soruly",
-    "background": {
-        "scripts": [
-            "bg.js"
-        ],
-		"persistent": false
-    },
-    "description": "Use anime screenshots to search where this scene is taken from.",
-    "icons": {
-        "128": "icon128.png",
-        "16": "icon16.png",
-        "48": "icon48.png"
-    },
-    "manifest_version": 2,
-    "name": "Search Anime by Screenshot",
-    "options_ui": {
-        "page": "options.html"
-    },
-    "permissions": [
-        "contextMenus",
-        "storage",
-        "https://whatanime.ga/*"
-    ],
-    "version": "2.3.0"
-}
+{
+    "author": "soruly",
+    "background": {
+        "persistent": true,
+        "scripts": [
+            "bg.js"
+        ]
+    },
+    "content_scripts": [
+        {
+            "js": [
+                "content.js"
+            ],
+            "matches": [
+                "http://*/*",
+                "https://*/*"
+            ]
+        },{
+           "js": [
+                "whatanime.ga.js"
+            ],
+            "matches": [
+                "https://whatanime.ga/"
+            ] 
+        }
+    ],
+    "description": "Use anime screenshots to search where this scene is taken from.",
+    "icons": {
+        "128": "icon128.png",
+        "16": "icon16.png",
+        "48": "icon48.png"
+    },
+    "manifest_version": 2,
+    "name": "Search Anime by Screenshot",
+    "permissions": [
+        "contextMenus",
+        "activeTab",
+        "tabs",
+        "http://*/*",
+        "https://*/*"
+    ],
+    "version": "3.0.0"
+}

whatanime.ga.js

@@ -0,0 +1,12 @@
+if (!self.browser && self.chrome) {
+  browser = chrome;
+}
+
+browser.runtime.sendMessage({
+  type: "getImageDataURL"
+}, (response) => {
+  if (response) {
+    //document.querySelector("#autoSearch").checked = true;
+    document.querySelector("#originalImage").src = response.imageDataURL;
+  }
+});