add "create random alias" to context menu

src/background.js

@@ -1,54 +0,0 @@
-import { callAPI, API_ROUTE, API_ON_ERR } from "./popup/APIService";
-import APIService from "./popup/APIService";
-import SLStorage from "./popup/SLStorage";
-import Utils from "./popup/Utils";
-
-global.browser = require("webextension-polyfill");
-
-const onMessageHandler = async function (request, sender) {
-  if (request.tag === "NEW_RANDOM_ALIAS") {
-    const hostname = await Utils.getHostName(sender.tab);
-    try {
-      const res = await callAPI(
-        API_ROUTE.NEW_RANDOM_ALIAS,
-        {
-          hostname,
-        },
-        {
-          note: `Used on ${hostname}`,
-        }
-      );
-
-      return res.data;
-    } catch (err) {
-      // rate limit reached
-      if (err.response.status === 429) {
-        return {
-          error:
-            "Rate limit exceeded - please wait 60s before creating new alias",
-        };
-      } else if (err.response.data.error) {
-        return {
-          error: err.response.data.error,
-        };
-      } else {
-        return {
-          error: "Unknown error",
-        };
-      }
-    }
-  } else if (request.tag === "GET_APP_SETTINGS") {
-    return {
-      showSLButton:
-        (await SLStorage.get(SLStorage.SETTINGS.API_KEY)) !== "" &&
-        (await SLStorage.get(SLStorage.SETTINGS.SHOW_SL_BUTTON)),
-      SLButtonPosition: await SLStorage.get(
-        SLStorage.SETTINGS.SL_BUTTON_POSITION
-      ),
-    };
-  }
-};
-
-global.browser.runtime.onMessage.addListener(onMessageHandler);
-
-APIService.initService();

src/background/context-menu.js

@@ -0,0 +1,72 @@
+import { handleNewRandomAlias } from './create-alias';
+
+function generateDialogJS(message) {
+  const content = `
+    function showSLDialog() {
+      let slDialog = document.createElement("div");
+      slDialog.style.position = "fixed";
+      slDialog.style.bottom = "0";
+      slDialog.style.right = "0";
+      slDialog.style.margin = "0.7em";
+      slDialog.style.padding = "0.7em";
+      slDialog.style.fontFamily = "Verdana, Arial, Helvetica, sans-serif";
+      slDialog.style.fontSize = "1em";
+      slDialog.style.pointerEvents = "none";
+      slDialog.style.zIndex = "999999";
+      slDialog.style.background = "rgba(255, 255, 255, 0.7)";
+      slDialog.innerText = ${JSON.stringify(message)};
+
+      document.body.appendChild(slDialog);
+
+      setTimeout(function () {
+        document.body.removeChild(slDialog);
+      }, 3000);
+    }
+
+    showSLDialog();
+  `;
+
+  return content;
+}
+
+function generateAliasHandlerJS(tab, res) {
+  const dialogJS = generateDialogJS(res.alias ? res.alias + ' copied to clipboard' : 'ERROR: ' + res.error);
+  const js = `
+    function copyTextToClipboard(text) {
+      if (!text) return;
+      var textArea = document.createElement("textarea");
+      textArea.value = text;
+
+      textArea.style.top = "0";
+      textArea.style.left = "0";
+      textArea.style.position = "fixed";
+    
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+    
+      try {
+        document.execCommand("copy");
+      } catch (err) {}
+    
+      document.body.removeChild(textArea);
+    }
+
+    ${dialogJS}
+
+    copyTextToClipboard(${JSON.stringify(res.alias)});
+  `;
+  console.log(js);
+  global.browser.tabs.executeScript(tab.id, {
+    code: js,
+  });
+}
+
+async function handleOnClickContextMenu(info, tab) {
+  const res = await handleNewRandomAlias(tab);
+  generateAliasHandlerJS(tab, res);
+}
+
+export {
+  handleOnClickContextMenu,
+};

src/background/create-alias.js

@@ -0,0 +1,43 @@
+import { callAPI, API_ROUTE, API_ON_ERR } from "../popup/APIService";
+import Utils from "../popup/Utils";
+
+/**
+ * Create random alias
+ * @param {*} tab 
+ */
+async function handleNewRandomAlias(tab) {
+  const hostname = await Utils.getHostName(tab);
+  try {
+    const res = await callAPI(
+      API_ROUTE.NEW_RANDOM_ALIAS,
+      {
+        hostname,
+      },
+      {
+        note: `Used on ${hostname}`,
+      }
+    );
+
+    return res.data;
+  } catch (err) {
+    // rate limit reached
+    if (err.response.status === 429) {
+      return {
+        error:
+          "Rate limit exceeded - please wait 60s before creating new alias",
+      };
+    } else if (err.response.data.error) {
+      return {
+        error: err.response.data.error,
+      };
+    } else {
+      return {
+        error: "Unknown error",
+      };
+    }
+  }
+}
+
+export {
+  handleNewRandomAlias,
+};

src/background/index.js

@@ -0,0 +1,43 @@
+import APIService from "../popup/APIService";
+import SLStorage from "../popup/SLStorage";
+
+import { handleNewRandomAlias } from './create-alias';
+import { handleOnClickContextMenu } from "./context-menu";
+
+global.browser = require("webextension-polyfill");
+
+/**
+ * Get app settings
+ */
+async function handerGetAppSettings() {
+  return {
+    showSLButton:
+      (await SLStorage.get(SLStorage.SETTINGS.API_KEY)) !== "" &&
+      (await SLStorage.get(SLStorage.SETTINGS.SHOW_SL_BUTTON)),
+    SLButtonPosition: await SLStorage.get(
+      SLStorage.SETTINGS.SL_BUTTON_POSITION
+    ),
+  };
+}
+
+/**
+ * Register onMessage listener
+ */
+global.browser.runtime.onMessage.addListener(async function (request, sender) {
+  if (request.tag === "NEW_RANDOM_ALIAS") {
+    return await handleNewRandomAlias(sender.tab);
+  } else if (request.tag === "GET_APP_SETTINGS") {
+    return await handerGetAppSettings();
+  }
+});
+
+/**
+ * Register context menu
+ */
+global.browser.contextMenus.create({
+  title: 'Create random email alias (copied)',
+  contexts: [ 'all' ],
+  onclick: handleOnClickContextMenu,
+});
+
+APIService.initService();

src/manifest.json

@@ -11,6 +11,7 @@
     "activeTab",
     "storage",
     "cookies",
+    "contextMenus",
     "https://*.simplelogin.io/*"
   ],
   "browser_action": {

webpack.config.js

@@ -15,7 +15,7 @@ const config = {
   mode: process.env.NODE_ENV,
   context: __dirname + '/src',
   entry: {
-    'background': './background.js',
+    'background': './background/index.js',
     'popup/popup': './popup/popup.js',
   },
   output: {