port background to service worker

src/background/content-script.js

@@ -14,14 +14,19 @@ async function setupContentScript() {
       return;
     }
 
-    browser.tabs.executeScript(tabId, {
-      file: "content_script/input_tools.js",
+    browser.scripting
+      .registerContentScripts([
+        {
+          id: "input-tools",
+          js: ["content_script/input_tools.js"],
+          css: ["content_script/input_tools.css"],
+          persistAcrossSessions: false,
+          matches: ["*://*/*"],
           runAt: "document_idle",
-    });
-
-    browser.tabs.insertCSS(tabId, {
-      file: "content_script/input_tools.css",
-    });
+        },
+      ])
+      .then(() => console.log("registration input tools complete"))
+      .catch((err) => console.warn("unexpected error", err));
   });
 }
 

src/background/index.js

@@ -11,8 +11,6 @@ import {
 } from "./context-menu";
 import Utils from "../popup/Utils";
 
-global.isBackgroundJS = true;
-
 /**
  * Get app settings
  */
@@ -33,6 +31,9 @@ async function handleExtensionSetup() {
     const url = apiUrl + API_ROUTE.GET_API_KEY_FROM_COOKIE.path;
   const res = await fetch(url, {
     method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
     body: JSON.stringify({
       device: Utils.getDeviceName(),
     }),

src/manifest.json

@@ -14,7 +14,9 @@
   "permissions": [
     "activeTab",
     "storage",
-    "contextMenus"
+    "contextMenus",
+    "scripting",
+    "tabs"
   ],
   "host_permissions": [    
     "https://*.simplelogin.io/*",
@@ -32,6 +34,10 @@
       "128": "icons/icon_128.png"
     }
   },
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
   "browser_specific_settings": {
     "gecko": {
       "id": "addon@simplelogin"

src/popup/APIService.js

@@ -75,8 +75,9 @@ const callAPI = async function (
     method: method,
     headers: headers,
   };
-  if (method === "POST") {
+  if (method === "POST" || method === "PUT") {
     fetchParam.body = JSON.stringify(data);
+    headers["Content-Type"] = "application/json";
   }
 
   let res = await fetch(url, fetchParam);
@@ -84,6 +85,7 @@ const callAPI = async function (
     const apiRes = await res.json();
     // wrap apiRes in data to look like axios which was used before
     return {
+      status: res.status,
       data: apiRes,
     };
   } else {
@@ -91,7 +93,7 @@ const callAPI = async function (
       console.error(res);
     }
 
-    if (res.status === 401 && !global.isBackgroundJS) {
+    if (res.status === 401) {
       await handle401Error();
       return null;
     }
@@ -99,7 +101,7 @@ const callAPI = async function (
     if (errHandlerMethod === API_ON_ERR.TOAST) {
       let apiRes = await res.json();
       if (apiRes.error) {
-        Utils.showError(err.response.data.error);
+        Utils.showError(apiRes.error);
       } else {
         Utils.showError("Unknown error");
       }
@@ -107,7 +109,12 @@ const callAPI = async function (
     }
 
     if (errHandlerMethod === API_ON_ERR.THROW) {
-      throw new Error("Request failed");
+      throw {
+        response: {
+          status: res.status,
+          data: await res.json()
+        }
+      };
     }
   }
 };