Apply prettier format

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 100
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at [email protected]. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

README.md

@@ -11,8 +11,7 @@ Anime Reverse Search WebExtension for Chrome, Firefox and Opera
 [![Opera Addon](https://img.shields.io/badge/Opera-Add--on-red.svg?style=flat-square)](https://addons.opera.com/en/extensions/details/search-anime-by-screenshot/)
 [![Edge Extension](https://img.shields.io/badge/Edge-Extension-blue.svg?style=flat-square)](https://microsoftedge.microsoft.com/addons/detail/search-anime-by-screensho/bkigcpancdclbiekidfbcghedaielbda)
 
-
-Use anime screenshots to search where this scene is taken from.
+Use anime screenshots to search the scene it is taken from.
 
 It tells you which anime, which episode, and exactly which moment this scene appears in Japanese Anime.
 
@@ -33,10 +32,12 @@ More info about the anime shown below provided by [ANILIST](https://anilist.co)
 ![](https://addons.cdn.mozilla.net/user-media/previews/full/209/209947.png)
 
 ## Features
+
 - Fetch, resize, compress the search image locally within browser, avoid re-download if possible
 - Able to grab images that is not accessible from public internet
 - Able to extract a frame from HTML5 video to search
 
 ## Known issues
-- Video and GIF on some websites like Twitter has frames on top of the video, so the context menu won't show up on right click.
-- Some websites like Facebook has modified the click event so the default context menu has been overridden.
+
+- Some websites like Twitter has elements on top of the video / images, so the search options does not appear in context menu.
+- Some websites like Facebook / Youtube has its own context menu which overrides the browser's default.

background.html

@@ -1,3 +1,3 @@
 <html>
-    <script type="text/javascript" src="bg.js"></script>
-</html>
+  <script type="text/javascript" src="bg.js"></script>
+</html>

bg.js

@@ -3,151 +3,149 @@ if (!self.browser && self.chrome) {
 }
 
 browser.contextMenus.create({
-  id: 'search-on-trace.moe',
-  title: 'Search on trace.moe',
-  contexts: ['image', 'video']
+  id: "search-on-trace.moe",
+  title: "Search on trace.moe",
+  contexts: ["image", "video"],
 });
 
 var imageDataURL;
 
-var handleMessage = function(request, sender, sendResponse) {
+var handleMessage = function (request, sender, sendResponse) {
   if (request.type === "getImageDataURL" && imageDataURL) {
     sendResponse({
-      imageDataURL: imageDataURL
+      imageDataURL: imageDataURL,
     });
     imageDataURL = null;
   }
   return true;
-}
+};
 
 browser.runtime.onMessage.addListener(handleMessage);
 
-
-var search = function(dataURL) {
+var search = function (dataURL) {
   imageDataURL = dataURL;
   browser.tabs.create({
-    url: 'https://trace.moe'
-  })
-}
+    url: "https://trace.moe",
+  });
+};
 
-var toDataURL = function(source) {
+var toDataURL = function (source) {
   try {
     var canvas = document.createElement("canvas");
-    canvas.crossOrigin = 'anonymous';
+    canvas.crossOrigin = "anonymous";
     canvas.height = 720;
     if (source.nodeName === "VIDEO") {
-      canvas.width = source.videoWidth / source.videoHeight * canvas.height;
+      canvas.width = (source.videoWidth / source.videoHeight) * canvas.height;
     } else {
-      canvas.width = source.width / source.height * canvas.height;
+      canvas.width = (source.width / source.height) * canvas.height;
     }
-    canvas.getContext('2d').drawImage(source, 0, 0, canvas.width, canvas.height);
+    canvas.getContext("2d").drawImage(source, 0, 0, canvas.width, canvas.height);
     return canvas.toDataURL("image/jpeg", 0.9);
   } 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 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 fetchImage = function (src) {
   var img = new Image();
-  img.crossOrigin = 'anonymous';
-  img.onload = function() {
+  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 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 fetchVideo = function (src, currentTime) {
   var player = document.createElement("video");
-  player.crossOrigin = 'anonymous';
+  player.crossOrigin = "anonymous";
   player.src = src;
   player.width = player.videoWidth;
   player.height = player.height;
   player.currentTime = currentTime;
   player.volume = 0;
-  player.onloadeddata = function() {
+  player.onloadeddata = function () {
     search(toDataURL(player));
   };
-}
+};
 
-browser.contextMenus.onClicked.addListener(function(info, tab) {
-
+browser.contextMenus.onClicked.addListener(function (info, tab) {
   if (info.srcUrl) {
-    if (info.srcUrl.indexOf('blob:') === 0) {
+    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) {
+      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) {
+      getDataURL(info.srcUrl).then(
+        function (dataURL) {
           search(dataURL);
-        }, function() {
+        },
+        function () {
           fetchImage(info.srcUrl);
-        });
-
+        }
+      );
     } else if (info.mediaType === "video") {
-      getDataURL(info.srcUrl)
-        .then(function(dataURL) {
+      getDataURL(info.srcUrl).then(
+        function (dataURL) {
           search(dataURL);
-        }, function() {
-          getCurrentTime(info.srcUrl)
-            .then(function(currentTime) {
-              fetchVideo(info.srcUrl, currentTime);
-            });
-        });
+        },
+        function () {
+          getCurrentTime(info.srcUrl).then(function (currentTime) {
+            fetchVideo(info.srcUrl, currentTime);
+          });
+        }
+      );
     }
   }
 });