handle right click alias creation

src/background/context-menu.js

@@ -1,40 +1,7 @@
 import { handleNewRandomAlias } from "./create-alias";
 import browser from "webextension-polyfill";
 
-function generateDialogJS(message) {
-  return `
-    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 = "white";
-      slDialog.style.border = "2px solid #777";
-      slDialog.style.borderRadius = "5px";
-      slDialog.innerText = ${JSON.stringify(message)};
-
-      document.body.appendChild(slDialog);
-
-      setTimeout(function () {
-        document.body.removeChild(slDialog);
-      }, 3000);
-    }
-
-    showSLDialog();
-  `;
-}
-
-function generateAliasHandlerJS(tab, res) {
-  const dialogJS = generateDialogJS(
-    res.alias ? res.alias + " copied to clipboard" : "ERROR: " + res.error
-  );
-  const js = `
+function displayAndCopy(alias, error) {
   function copyTextToClipboard(text) {
     if (!text) return;
     var textArea = document.createElement("textarea");
@@ -55,13 +22,41 @@ function generateAliasHandlerJS(tab, res) {
     document.body.removeChild(textArea);
   }
 
-    ${dialogJS}
+  function showSLDialog(message) {
+    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 = "white";
+    slDialog.style.border = "2px solid #777";
+    slDialog.style.borderRadius = "5px";
+    slDialog.innerText = JSON.stringify(message);
 
-    copyTextToClipboard(${JSON.stringify(res.alias)});
-  `;
-  browser.tabs.executeScript(tab.id, {
-    code: js,
-  });
+    document.body.appendChild(slDialog);
+
+    setTimeout(function () {
+      document.body.removeChild(slDialog);
+    }, 3000);
+  }
+
+  showSLDialog(alias ? alias + " copied to clipboard" : "ERROR: " + error);
+  copyTextToClipboard(alias);
+}
+
+function generateAliasHandlerJS(tab, res) {
+  chrome.scripting
+    .executeScript({
+      target: { tabId: tab.id },
+      func: displayAndCopy,
+      args: [res.alias || null, res.error || null],
+    })
+    .then(() => console.log("injected a function"));
 }
 
 async function handleOnClickContextMenu(info, tab) {

src/background/index.js

@@ -131,11 +131,13 @@ browser.runtime.onMessage.addListener(async function (request, sender) {
  * Register context menu
  */
 browser.contextMenus.create({
+  id: "sl-random",
   title: "Create random email alias (copied)",
   contexts: ["all"],
-  onclick: handleOnClickContextMenu,
 });
 
+browser.contextMenus.onClicked.addListener(handleOnClickContextMenu);
+
 /**
  * Shortcuts and hotkeys listener
  */

src/popup/APIService.js

@@ -112,8 +112,8 @@ const callAPI = async function (
       throw {
         response: {
           status: res.status,
-          data: await res.json()
-        }
+          data: await res.json(),
+        },
       };
     }
   }