handle right click alias creation

src/background/context-menu.js

@@ -1,67 +1,62 @@
 import { handleNewRandomAlias } from "./create-alias";
 import browser from "webextension-polyfill";
 
-function generateDialogJS(message) {
+function displayAndCopy(alias, error) {
-  return `
+  function copyTextToClipboard(text) {
-    function showSLDialog() {
+    if (!text) return;
-      let slDialog = document.createElement("div");
+    var textArea = document.createElement("textarea");
-      slDialog.style.position = "fixed";
+    textArea.value = text;
-      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);
+    textArea.style.top = "0";
+    textArea.style.left = "0";
+    textArea.style.position = "fixed";
 
-      setTimeout(function () {
+    document.body.appendChild(textArea);
-        document.body.removeChild(slDialog);
+    textArea.focus();
-      }, 3000);
+    textArea.select();
-    }
 
-    showSLDialog();
+    try {
-  `;
+      document.execCommand("copy");
+    } catch (err) {}
+
+    document.body.removeChild(textArea);
+  }
+
+  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);
+
+    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) {
-  const dialogJS = generateDialogJS(
+  chrome.scripting
-    res.alias ? res.alias + " copied to clipboard" : "ERROR: " + res.error
+    .executeScript({
-  );
+      target: { tabId: tab.id },
-  const js = `
+      func: displayAndCopy,
-    function copyTextToClipboard(text) {
+      args: [res.alias || null, res.error || null],
-      if (!text) return;
+    })
-      var textArea = document.createElement("textarea");
+    .then(() => console.log("injected a function"));
-      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)});
-  `;
-  browser.tabs.executeScript(tab.id, {
-    code: js,
-  });
 }
 
 async function handleOnClickContextMenu(info, tab) {

src/background/index.js

@@ -28,7 +28,7 @@ async function handleGetAppSettings() {
 async function handleExtensionSetup() {
   const apiUrl = await SLStorage.get(SLStorage.SETTINGS.API_URL);
 
-    const url = apiUrl + API_ROUTE.GET_API_KEY_FROM_COOKIE.path;
+  const url = apiUrl + API_ROUTE.GET_API_KEY_FROM_COOKIE.path;
   const res = await fetch(url, {
     method: "POST",
     headers: {
@@ -37,7 +37,7 @@ async function handleExtensionSetup() {
     body: JSON.stringify({
       device: Utils.getDeviceName(),
     }),
-    });
+  });
 
   if (res.ok) {
     const apiRes = await res.json();
@@ -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(),
-        }
+        },
       };
     }
   }