Add Firebase-based cloud backup/restore for bookmark data

README.md

@@ -70,3 +70,26 @@ Gmail, Drive, YouTube, Meet, Calendar, Sheets, Gemini
 ## ⭐ If you like BookmarkFolder
 
 Give the repo a **star** 🌟 on GitHub — it helps a lot!
+
+
+## ☁️ Firebase Cloud Backup (optional)
+
+You can now back up and restore your bookmarks using Firebase so reinstalling the extension won’t lose your data.
+
+1. Create a Firebase project
+2. Enable **Authentication → Email/Password**
+3. Enable **Firestore Database** (start in test mode while developing)
+4. Open the new tab page and enter:
+   - Firebase Web API Key
+   - Firebase Project ID
+5. Sign up / sign in from the sidebar panel
+6. Use **Backup to Cloud** and **Restore from Cloud**
+
+### Firestore document path used
+`bookmarkfolderUsers/{firebaseLocalUserId}`
+
+Each document stores:
+- `data` (stringified JSON payload)
+- `updatedAt` (unix timestamp in ms)
+
+> Security note: set Firestore security rules so users can only read/write their own doc.

manifest.json

@@ -2,10 +2,14 @@
   "manifest_version": 3,
   "name": "Rishnu Dk-custom bookmark tab",
   "version": "1.0",
-
-  "permissions": ["storage"],
-
+  "permissions": [
+    "storage"
+  ],
   "chrome_url_overrides": {
     "newtab": "newtab.html"
-  }
+  },
+  "host_permissions": [
+    "https://identitytoolkit.googleapis.com/*",
+    "https://firestore.googleapis.com/*"
+  ]
 }

newtab.html

@@ -24,6 +24,29 @@ <h1>Bookmarks</h1>
     <div class="sidebar">
       <h2>Google Apps</h2>
       <div id="googleApps" class="apps"></div>
+
+      <div class="cloud-panel">
+        <h3>Firebase Backup</h3>
+
+        <input id="firebaseApiKey" type="text" placeholder="Firebase Web API Key">
+        <input id="firebaseProjectId" type="text" placeholder="Firebase Project ID">
+
+        <input id="authEmail" type="email" placeholder="Email">
+        <input id="authPassword" type="password" placeholder="Password">
+
+        <div class="cloud-actions">
+          <button id="signUpBtn" class="small-btn">Sign Up</button>
+          <button id="signInBtn" class="small-btn">Sign In</button>
+          <button id="signOutBtn" class="small-btn">Sign Out</button>
+        </div>
+
+        <div class="cloud-actions">
+          <button id="backupNowBtn" class="small-btn">Backup to Cloud</button>
+          <button id="restoreNowBtn" class="small-btn">Restore from Cloud</button>
+        </div>
+
+        <p id="cloudStatus" class="cloud-status">Not connected</p>
+      </div>
     </div>
 
   </div> <!-- END CONTAINER -->

script.js

@@ -10,12 +10,16 @@ let openFolders = {};
 let dragSourceTile = null;
 let dragPlaceholder = null;
 
+let firebaseConfigState = { apiKey: "", projectId: "" };
+let firebaseAuthState = { idToken: "", localId: "", email: "" };
+let lastUpdatedAt = Date.now();
+
 // ---------------------------------------------------------
 // LOAD EVERYTHING
 // ---------------------------------------------------------
 function loadAll() {
 
-  chrome.storage.sync.get(["bookmarks", "folders", "openFolders"], res => {
+  chrome.storage.sync.get(["bookmarks", "folders", "openFolders", "firebaseConfig", "firebaseAuth", "lastUpdatedAt"], async res => {
 
     const raw = res.bookmarks || [];
 
@@ -35,11 +39,18 @@ function loadAll() {
       }
     });
 
-    chrome.storage.sync.set({ bookmarks, folders, openFolders });
+    firebaseConfigState = res.firebaseConfig || { apiKey: "", projectId: "" };
+    lastUpdatedAt = res.lastUpdatedAt || Date.now();
+    firebaseAuthState = res.firebaseAuth || { idToken: "", localId: "", email: "" };
+
+    chrome.storage.sync.set({ bookmarks, folders, openFolders, firebaseConfig: firebaseConfigState, firebaseAuth: firebaseAuthState, lastUpdatedAt });
 
     renderFolders();
     populateFolderSelect();
     renderGoogleApps();
+    initializeCloudUI();
+
+    await restoreFromCloud(false);
   });
 }
 loadAll();
@@ -48,7 +59,9 @@ loadAll();
 // SAVE ALL
 // ---------------------------------------------------------
 function saveAll() {
-  chrome.storage.sync.set({ bookmarks, folders, openFolders });
+  lastUpdatedAt = Date.now();
+  chrome.storage.sync.set({ bookmarks, folders, openFolders, firebaseConfig: firebaseConfigState, firebaseAuth: firebaseAuthState, lastUpdatedAt });
+  backupToCloud(false);
 }
 
 // ---------------------------------------------------------
@@ -584,3 +597,198 @@ function renderGoogleApps() {
     div.appendChild(item);
   });
 }
+
+
+// ---------------------------------------------------------
+// FIREBASE CLOUD BACKUP (REST API)
+// ---------------------------------------------------------
+function initializeCloudUI() {
+  const apiKeyInput = document.getElementById("firebaseApiKey");
+  const projectIdInput = document.getElementById("firebaseProjectId");
+  const emailInput = document.getElementById("authEmail");
+  const passwordInput = document.getElementById("authPassword");
+
+  if (!apiKeyInput || !projectIdInput) return;
+
+  apiKeyInput.value = firebaseConfigState.apiKey || "";
+  projectIdInput.value = firebaseConfigState.projectId || "";
+  emailInput.value = firebaseAuthState.email || "";
+
+  apiKeyInput.addEventListener("change", () => {
+    firebaseConfigState.apiKey = apiKeyInput.value.trim();
+    persistCloudState();
+    setCloudStatus("Firebase config updated.");
+  });
+
+  projectIdInput.addEventListener("change", () => {
+    firebaseConfigState.projectId = projectIdInput.value.trim();
+    persistCloudState();
+    setCloudStatus("Firebase config updated.");
+  });
+
+  document.getElementById("signUpBtn")?.addEventListener("click", () => authWithFirebase("signUp"));
+  document.getElementById("signInBtn")?.addEventListener("click", () => authWithFirebase("signInWithPassword"));
+  document.getElementById("signOutBtn")?.addEventListener("click", signOutFirebase);
+  document.getElementById("backupNowBtn")?.addEventListener("click", () => backupToCloud(true));
+  document.getElementById("restoreNowBtn")?.addEventListener("click", () => restoreFromCloud(true));
+
+  updateCloudStatusFromState();
+}
+
+function persistCloudState() {
+  chrome.storage.sync.set({ firebaseConfig: firebaseConfigState, firebaseAuth: firebaseAuthState });
+}
+
+function setCloudStatus(message, isError = false) {
+  const status = document.getElementById("cloudStatus");
+  if (!status) return;
+  status.textContent = message;
+  status.style.color = isError ? "#fca5a5" : "#93c5fd";
+}
+
+function updateCloudStatusFromState() {
+  if (firebaseAuthState.email) {
+    setCloudStatus(`Connected as ${firebaseAuthState.email}`);
+  } else {
+    setCloudStatus("Not connected");
+  }
+}
+
+function cloudConfigReady() {
+  return Boolean(firebaseConfigState.apiKey && firebaseConfigState.projectId);
+}
+
+function cloudAuthReady() {
+  return Boolean(firebaseAuthState.idToken && firebaseAuthState.localId);
+}
+
+function cloudPayload() {
+  return {
+    bookmarks,
+    folders,
+    openFolders,
+    updatedAt: lastUpdatedAt
+  };
+}
+
+async function authWithFirebase(mode) {
+  const email = document.getElementById("authEmail")?.value.trim();
+  const password = document.getElementById("authPassword")?.value.trim();
+
+  if (!cloudConfigReady()) return setCloudStatus("Add Firebase API Key + Project ID first.", true);
+  if (!email || !password) return setCloudStatus("Enter email and password.", true);
+
+  try {
+    const endpoint = `https://identitytoolkit.googleapis.com/v1/accounts:${mode}?key=${firebaseConfigState.apiKey}`;
+    const res = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password, returnSecureToken: true })
+    });
+
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error?.message || "Authentication failed");
+
+    firebaseAuthState = { idToken: data.idToken, localId: data.localId, email: data.email || email };
+    persistCloudState();
+    updateCloudStatusFromState();
+    await restoreFromCloud(false);
+  } catch (err) {
+    setCloudStatus(`Auth failed: ${err.message}`, true);
+  }
+}
+
+function signOutFirebase() {
+  firebaseAuthState = { idToken: "", localId: "", email: "" };
+  persistCloudState();
+  updateCloudStatusFromState();
+}
+
+function cloudDocumentUrl() {
+  return `https://firestore.googleapis.com/v1/projects/${firebaseConfigState.projectId}/databases/(default)/documents/bookmarkfolderUsers/${firebaseAuthState.localId}`;
+}
+
+async function backupToCloud(showMessage = true) {
+  if (!cloudConfigReady() || !cloudAuthReady()) {
+    if (showMessage) setCloudStatus("Cloud backup skipped: sign in first.", true);
+    return;
+  }
+
+  try {
+    const payload = cloudPayload();
+    const body = {
+      fields: {
+        data: { stringValue: JSON.stringify(payload) },
+        updatedAt: { integerValue: String(payload.updatedAt) }
+      }
+    };
+
+    const res = await fetch(cloudDocumentUrl(), {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${firebaseAuthState.idToken}`
+      },
+      body: JSON.stringify(body)
+    });
+
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error?.message || "Backup failed");
+
+    if (showMessage) setCloudStatus("Backup complete.");
+  } catch (err) {
+    setCloudStatus(`Backup failed: ${err.message}`, true);
+  }
+}
+
+async function restoreFromCloud(showMessage = true) {
+  if (!cloudConfigReady() || !cloudAuthReady()) {
+    if (showMessage) setCloudStatus("Cloud restore skipped: sign in first.", true);
+    return;
+  }
+
+  try {
+    const res = await fetch(cloudDocumentUrl(), {
+      headers: { Authorization: `Bearer ${firebaseAuthState.idToken}` }
+    });
+
+    if (res.status === 404) {
+      if (showMessage) setCloudStatus("No cloud backup found yet.");
+      return;
+    }
+
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error?.message || "Restore failed");
+
+    const encoded = data.fields?.data?.stringValue;
+    if (!encoded) {
+      if (showMessage) setCloudStatus("Cloud document is empty.", true);
+      return;
+    }
+
+    const cloud = JSON.parse(encoded);
+    const localUpdatedAt = Number(lastUpdatedAt || 0);
+    const cloudUpdatedAt = Number(cloud.updatedAt || 0);
+
+    if (cloudUpdatedAt < localUpdatedAt) {
+      if (showMessage) setCloudStatus("Local data is newer than cloud.");
+      return;
+    }
+
+    bookmarks = Array.isArray(cloud.bookmarks) ? cloud.bookmarks : [];
+    folders = Array.isArray(cloud.folders) && cloud.folders.length ? cloud.folders : ["Default"];
+    openFolders = cloud.openFolders && typeof cloud.openFolders === "object" ? cloud.openFolders : {};
+
+    folders.forEach(f => {
+      if (openFolders[f] === undefined) openFolders[f] = f === "Default";
+    });
+
+    saveAll();
+    renderFolders();
+    populateFolderSelect();
+
+    if (showMessage) setCloudStatus("Restore complete.");
+  } catch (err) {
+    setCloudStatus(`Restore failed: ${err.message}`, true);
+  }
+}

style.css

@@ -723,3 +723,47 @@ body::before {
     height: 60px;
   }
 }
+
+/* ===================================
+   FIREBASE CLOUD PANEL
+   =================================== */
+.cloud-panel {
+  margin-top: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.cloud-panel h3 {
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #bfdbfe;
+}
+
+.cloud-panel input {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(15, 23, 42, 0.6);
+  color: #e2e8f0;
+}
+
+.cloud-actions {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 1fr;
+}
+
+.cloud-actions .small-btn {
+  margin-bottom: 0;
+}
+
+.cloud-status {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #93c5fd;
+  line-height: 1.4;
+}