Fix saving to Google Drive on Edge + issues with naming / adding to folder

Author: alyssaxuu

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "__MSG_extName__",
   "description": "__MSG_extDesc__",
   "default_locale": "en",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "background": {
     "service_worker": "background.bundle.js"
   },

src/pages/Background/drive/handleSaveToDrive.js

@@ -53,21 +53,19 @@ const getAuthTokenFromStorage = async () => {
       try {
         payload = JSON.parse(atob(token.split(".")[1]));
       } catch {
-        chrome.identity.getAuthToken({ interactive: true }, (newToken) => {
-          if (chrome.runtime.lastError)
-            reject(new Error(chrome.runtime.lastError));
-          else resolve(newToken);
-        });
+        // Token is invalid, sign in again
+        const newToken = await signIn();
+        if (!newToken) reject(new Error("Sign-in failed"));
+        else resolve(newToken);
         return;
       }
 
       const exp = payload.exp * 1000;
       if (Date.now() >= exp) {
-        chrome.identity.getAuthToken({ interactive: true }, (newToken) => {
-          if (chrome.runtime.lastError)
-            reject(new Error(chrome.runtime.lastError));
-          else resolve(newToken);
-        });
+        // Token is expired, sign in again
+        const newToken = await signIn();
+        if (!newToken) reject(new Error("Sign-in failed"));
+        else resolve(newToken);
       } else {
         resolve(token);
       }
@@ -80,46 +78,53 @@ const saveToDrive = async (videoBlob, fileName) => {
     const token = await getAuthTokenFromStorage();
     if (!token) throw new Error("Sign-in failed");
 
-    // Upload the raw media
+    const folderId = await findOrCreateScreenityFolder(token);
+
+    const metadata = {
+      name: fileName,
+      parents: [folderId],
+    };
+
+    const boundary = "-------314159265358979323846";
+    const delimiter = `\r\n--${boundary}\r\n`;
+    const close_delim = `\r\n--${boundary}--`;
+
+    const reader = new FileReader();
+
+    const base64Data = await new Promise((resolve) => {
+      reader.onload = (e) => resolve(e.target.result.split(",")[1]);
+      reader.readAsDataURL(videoBlob);
+    });
+
+    const multipartBody =
+      delimiter +
+      `Content-Type: application/json; charset=UTF-8\r\n\r\n` +
+      JSON.stringify(metadata) +
+      delimiter +
+      `Content-Type: ${videoBlob.type}\r\n` +
+      `Content-Transfer-Encoding: base64\r\n\r\n` +
+      base64Data +
+      close_delim;
+
     const uploadResponse = await fetch(
-      "https://www.googleapis.com/upload/drive/v3/files?uploadType=media",
+      "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart",
       {
         method: "POST",
         headers: {
           Authorization: `Bearer ${token}`,
-          "Content-Type": videoBlob.type,
+          "Content-Type": `multipart/related; boundary=${boundary}`,
         },
-        body: videoBlob,
+        body: multipartBody,
       }
     );
 
-    if (!uploadResponse.ok)
+    if (!uploadResponse.ok) {
       throw new Error(`Upload failed: ${uploadResponse.status}`);
+    }
 
     const { id: fileId } = await uploadResponse.json();
-    if (!fileId) throw new Error("File ID is undefined");
-
-    // Add metadata and move to folder
-    const folderId = await findOrCreateScreenityFolder(token);
-    const metadataResponse = await fetch(
-      `https://www.googleapis.com/drive/v3/files/${fileId}`,
-      {
-        method: "PATCH",
-        headers: {
-          Authorization: `Bearer ${token}`,
-          "Content-Type": "application/json; charset=UTF-8",
-        },
-        body: JSON.stringify({
-          name: fileName,
-          parents: [folderId],
-        }),
-      }
-    );
-
-    if (!metadataResponse.ok)
-      throw new Error(`Metadata update failed: ${metadataResponse.status}`);
+    if (!fileId) throw new Error("File ID missing after upload");
 
-    // Open the file in Drive
     chrome.tabs.create({
       url: `https://drive.google.com/file/d/${fileId}/view`,
     });

src/pages/Background/modules/signIn.js

@@ -1,23 +1,84 @@
-const signIn = async () => {
-  try {
-    const token = await chrome.identity.getAuthToken({ interactive: true });
+const isEdge = navigator.userAgent.includes("Edg");
 
-    if (!token) {
-      throw new Error("User cancelled sign-in or failed to get token");
-    }
+const EDGE_CLIENT_ID =
+  "560517327251-856rbcshgori6mft9slnsaq34p21td3n.apps.googleusercontent.com";
+const REDIRECT_URI = isEdge ? chrome.identity.getRedirectURL() : "";
+
+const signInEdge = async () => {
+  const authUrl = new URL("https://accounts.google.com/o/oauth2/v2/auth");
+  authUrl.searchParams.set("client_id", EDGE_CLIENT_ID);
+  authUrl.searchParams.set("response_type", "token");
+  authUrl.searchParams.set("redirect_uri", REDIRECT_URI);
+  authUrl.searchParams.set(
+    "scope",
+    "https://www.googleapis.com/auth/drive.file"
+  );
+
+  return new Promise((resolve, reject) => {
+    chrome.identity.launchWebAuthFlow(
+      {
+        url: authUrl.href,
+        interactive: true,
+      },
+      async (redirectUrl) => {
+        if (chrome.runtime.lastError) {
+          reject(new Error(chrome.runtime.lastError.message));
+          return;
+        }
 
-    // Save token to storage
-    await new Promise((resolve) =>
-      chrome.storage.local.set({ token: token.token }, () => resolve())
+        if (!redirectUrl) {
+          reject(new Error("User cancelled sign-in or failed to get token"));
+          return;
+        }
+
+        // Extract token from redirect URL
+        const url = new URL(redirectUrl);
+        const params = new URLSearchParams(url.hash.substring(1));
+        const token = params.get("access_token");
+
+        if (!token) {
+          reject(new Error("Failed to extract token from redirect"));
+          return;
+        }
+
+        // Save token to storage
+        await new Promise((res) =>
+          chrome.storage.local.set({ token }, () => res())
+        );
+
+        resolve(token);
+      }
     );
+  });
+};
 
-    const userInfo = await chrome.identity.getProfileUserInfo();
+const signInChrome = async () => {
+  const token = await chrome.identity.getAuthToken({ interactive: true });
 
-    return token.token; // Return the token if sign-in is successful
+  if (!token) {
+    throw new Error("User cancelled sign-in or failed to get token");
+  }
+
+  // Save token to storage
+  await new Promise((resolve) =>
+    chrome.storage.local.set({ token: token.token }, () => resolve())
+  );
+
+  //const userInfo = await chrome.identity.getProfileUserInfo();
+
+  return token.token;
+};
+
+const signIn = async () => {
+  try {
+    if (isEdge) {
+      return await signInEdge();
+    } else {
+      return await signInChrome();
+    }
   } catch (error) {
     console.error("Error signing in:", error.message);
     return null;
-    throw error; // Reject the Promise if sign-in fails
   }
 };