clean up our script

remove tabs and windows API listeners, added error handling, fixed migration race condition and empty catch blocks

Author: semanticdata

src/script.js

@@ -10,17 +10,74 @@ const els = {
   status: document.getElementById("save-status"),
 };
 
-// Storage Wrapper
+// Detect browser API (browser vs chrome)
+const browserAPI = typeof browser !== "undefined" ? browser : chrome;
+
+// Storage Wrapper - now uses browser.storage.sync with proper error handling
 const store = {
+  get: (key, callback) => {
+    const handleError = (error) => {
+      if (error) {
+        console.error("Storage get error:", error);
+        els.status.textContent = "Error loading";
+      }
+    };
+
+    if (typeof callback === "function") {
+      // Chrome-style callback with error handling
+      browserAPI.storage.sync.get([key], (result) => {
+        if (browserAPI.runtime.lastError) {
+          handleError(browserAPI.runtime.lastError);
+          return;
+        }
+        callback(result);
+      });
+    } else {
+      // Promise-style (Firefox) with error handling
+      return browserAPI.storage.sync.get([key]).catch(handleError);
+    }
+  },
+  set: (key, value, callback) => {
+    const data = {};
+    data[key] = value;
+
+    const handleError = (error) => {
+      if (error) {
+        console.error("Storage set error:", error);
+        els.status.textContent = "Error saving";
+        els.status.classList.remove("saved");
+      }
+    };
+
+    if (typeof callback === "function") {
+      browserAPI.storage.sync.set(data, () => {
+        if (browserAPI.runtime.lastError) {
+          handleError(browserAPI.runtime.lastError);
+          return;
+        }
+        callback();
+      });
+    } else {
+      browserAPI.storage.sync.set(data).catch(handleError);
+    }
+  },
+};
+
+// LocalStorage fallback (for theme/font settings that don't need sync)
+const localStore = {
   get: (k) => {
     try {
       return localStorage.getItem(k);
-    } catch (e) {}
+    } catch (e) {
+      console.error("LocalStorage get error:", e);
+    }
   },
   set: (k, v) => {
     try {
       localStorage.setItem(k, v);
-    } catch (e) {}
+    } catch (e) {
+      console.error("LocalStorage set error:", e);
+    }
   },
 };
 
@@ -29,7 +86,7 @@ const toggleTheme = () => {
   const next =
     els.html.getAttribute("data-theme") === "dark" ? "light" : "dark";
   els.html.setAttribute("data-theme", next);
-  store.set("theme", next);
+  localStore.set("theme", next);
   els.toggleTheme.setAttribute(
     "aria-label",
     `Switch to ${next === "dark" ? "light" : "dark"}`
@@ -50,7 +107,7 @@ const updateFontSize = (val) => {
   const size = `${val}px`;
   els.html.style.setProperty("--note-size", size);
   els.fontDisplay.textContent = size;
-  store.set("fontsize", size);
+  localStore.set("fontsize", size);
 };
 
 // Menu Listeners
@@ -85,54 +142,93 @@ const save = (text) => {
   els.status.classList.remove("saved");
   clearTimeout(timeout);
   timeout = setTimeout(() => {
-    store.set("notekeeper_content", text);
-    els.status.textContent = "Saved";
-    els.status.classList.add("saved");
+    store.set("notekeeper_content", text, () => {
+      // Only update UI on success (error handling is in store.set)
+      els.status.textContent = "Saved";
+      els.status.classList.add("saved");
+    });
   }, 500);
 };
 
-// Migration Logic (Legacy Chrome Storage -> LocalStorage)
-const migrateFromExtension = () => {
-  // If we already have data in the new system, do not overwrite
-  if (store.get("notekeeper_content")) return;
-
-  // Detect extension environment
-  const ext =
-    typeof browser !== "undefined"
-      ? browser
-      : typeof chrome !== "undefined"
-      ? chrome
-      : null;
-
-  if (ext && ext.storage && ext.storage.sync) {
-    ext.storage.sync.get(["tab_note"], (result) => {
-      // Check if legacy data exists
-      if (result && result.tab_note) {
-        // Save to new storage
-        store.set("notekeeper_content", result.tab_note);
-
-        // Update UI immediately
-        els.note.value = result.tab_note;
-        updateStats(result.tab_note);
+// Listen for storage changes from other tabs/extensions
+// This keeps notes in sync across multiple tabs
+browserAPI.storage.onChanged.addListener((changes, area) => {
+  if (area === "sync" && changes.notekeeper_content) {
+    const newValue = changes.notekeeper_content.newValue;
+    if (newValue !== undefined && newValue !== els.note.value) {
+      els.note.value = newValue;
+      updateStats(newValue);
+      els.status.textContent = "Synced";
+      els.status.classList.add("saved");
+    }
+  }
+});
+
+// Refresh when the page gains visibility (e.g., switching back to tab)
+// This handles tab switching without requiring tabs permission
+document.addEventListener("visibilitychange", () => {
+  if (!document.hidden) {
+    store.get("notekeeper_content", (result) => {
+      if (result && result.notekeeper_content) {
+        els.note.value = result.notekeeper_content;
+        updateStats(result.notekeeper_content);
         els.status.textContent = "Restored";
         els.status.classList.add("saved");
       }
     });
   }
+});
+
+// Initialize - load from sync storage and run migration if needed
+// Combined into single operation to avoid race condition
+const initializeNotes = () => {
+  store.get("notekeeper_content", (syncResult) => {
+    if (syncResult && syncResult.notekeeper_content) {
+      // We have data in sync storage, load it
+      els.note.value = syncResult.notekeeper_content;
+      updateStats(syncResult.notekeeper_content);
+      els.status.textContent = "Restored";
+      els.status.classList.add("saved");
+      return;
+    }
+
+    // No sync data, check for localStorage migration
+    const localContent = localStore.get("notekeeper_content");
+    if (localContent) {
+      console.log("Migrating notes from localStorage to sync storage...");
+      store.set("notekeeper_content", localContent, () => {
+        els.note.value = localContent;
+        updateStats(localContent);
+        els.status.textContent = "Migrated";
+        els.status.classList.add("saved");
+      });
+      return;
+    }
+
+    // Check for legacy tab_note (from original extension)
+    browserAPI.storage.sync.get(["tab_note"], (legacyResult) => {
+      if (browserAPI.runtime.lastError) {
+        console.error("Legacy storage check error:", browserAPI.runtime.lastError);
+        return;
+      }
+
+      if (legacyResult && legacyResult.tab_note) {
+        console.log("Migrating notes from legacy tab_note to notekeeper_content...");
+        store.set("notekeeper_content", legacyResult.tab_note, () => {
+          els.note.value = legacyResult.tab_note;
+          updateStats(legacyResult.tab_note);
+          els.status.textContent = "Restored";
+          els.status.classList.add("saved");
+        });
+      }
+    });
+  });
 };
 
-// Init Content
-const content = store.get("notekeeper_content");
-if (content) {
-  els.note.value = content;
-  updateStats(content);
-} else {
-  // Only attempt migration if new storage is empty
-  migrateFromExtension();
-}
+initializeNotes();
 
 // Init Font Size
-const storedFontSize = store.get("fontsize");
+const storedFontSize = localStore.get("fontsize");
 if (storedFontSize) {
   const val = parseInt(storedFontSize);
   els.slider.value = val;