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) {
-  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)};
+function displayAndCopy(alias, error) {
+  function copyTextToClipboard(text) {
+    if (!text) return;
+    var textArea = document.createElement("textarea");
+    textArea.value = text;
 
-      document.body.appendChild(slDialog);
+    textArea.style.top = "0";
+    textArea.style.left = "0";
+    textArea.style.position = "fixed";
 
-      setTimeout(function () {
-        document.body.removeChild(slDialog);
-      }, 3000);
-    }
+    document.body.appendChild(textArea);
+    textArea.focus();
+    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(
-    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)});
-  `;
-  browser.tabs.executeScript(tab.id, {
-    code: js,
-  });
+  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

@@ -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(),
+        },
       };
     }
   }