Fix "Login with Proton" not working on Safari

- on Safari doing an API call from the background script will not set the cookies header properly...
- ...so we do the API call from the content script instead

src/background/index.js

@@ -24,6 +24,26 @@ async function handleGetAppSettings() {
   };
 }
 
+async function finalizeExtensionSetup(apiKey) {
+  if (!apiKey) {
+    return;
+  }
+
+  await SLStorage.set(SLStorage.SETTINGS.API_KEY, apiKey);
+
+  const currentTab = await browser.tabs.query({
+    active: true,
+    currentWindow: true,
+  });
+
+  const apiUrl = await SLStorage.get(SLStorage.SETTINGS.API_URL);
+  const url = `${apiUrl}/onboarding/final`;
+  await browser.tabs.update(currentTab[0].id, {
+    url,
+  });
+}
+
+
 async function handleExtensionSetup() {
   const apiUrl = await SLStorage.get(SLStorage.SETTINGS.API_URL);
 
@@ -42,21 +62,7 @@ async function handleExtensionSetup() {
   if (res.ok) {
     const apiRes = await res.json();
     const apiKey = apiRes.api_key;
-    if (apiKey) {
-      await SLStorage.set(SLStorage.SETTINGS.API_KEY, apiKey);
-
-      const currentTab = await browser.tabs.query({
-        active: true,
-        currentWindow: true,
-      });
-
-      const url = `${apiUrl}/onboarding/final`;
-      await browser.tabs.update(currentTab[0].id, {
-        url,
-      });
-    } else {
-      console.error("Received null API Key");
-    }
+    finalizeExtensionSetup(apiKey);
   } else {
     console.error("api error");
   }
@@ -121,9 +127,13 @@ browser.runtime.onMessage.addListener(async function (request, sender) {
   if (!messageAllowed) return;
 
   if (request.tag === "EXTENSION_SETUP") {
-    return await handleExtensionSetup();
+    // On Safari the background script won't set cookies properly in API calls (see https://bugs.webkit.org/show_bug.cgi?id=260676),
+    // so we will return the API URL to the content script which will make the API call with cookies properly set
+    return process.env.MAC ? await SLStorage.get(SLStorage.SETTINGS.API_URL) : await handleExtensionSetup();
   } else if (request.tag === "EXTENSION_INSTALLED_QUERY") {
     return handleExtensionInstalledQuery();
+  } else if (request.tag === "SAFARI_FINALIZE_EXTENSION_SETUP") {
+    return await finalizeExtensionSetup(request.data);
   }
 });
 

src/content_script/input_tools.js

@@ -260,7 +260,29 @@ if (!window._hasExecutedSlExtension) {
         if (event.data.tag === "PERFORM_EXTENSION_SETUP") {
           if (!hasProcessedSetup) {
             hasProcessedSetup = true;
-            await sendMessageToBackground("EXTENSION_SETUP");
+            const apiUrl = await sendMessageToBackground("EXTENSION_SETUP");
+            // if apiUrl is undefined then the Chromium/Firefox extension has already finished setup
+            if (!apiUrl) {
+              return;
+            }
+            // else if apiUrl is defined, we are in Safari and need to setup the Safari extension
+            const url = apiUrl + '/api/api_key';
+            const res = await fetch(url, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                "X-Sl-Allowcookies": true,
+              },
+              body: JSON.stringify({
+                device: "Safari extension",
+              }),
+            });
+
+            if (res.ok) {
+              const apiRes = await res.json();
+              const apiKey = apiRes.api_key;
+              await sendMessageToBackground("SAFARI_FINALIZE_EXTENSION_SETUP", apiKey);
+            }
           }
         } else if (event.data.tag === "EXTENSION_INSTALLED_QUERY") {
           const res = await sendMessageToBackground(