Filter applies on load

.gitignore

@@ -3,3 +3,4 @@
 *.crx
 node_modules/*
 CLAUDE.md
+.claude/*

content.js

@@ -1,10 +1,14 @@
-// Clear active filter when page loads (prevents confusion on page refresh)
+// Pull and apply active filter when page loads (prevents confusion on page refresh)
 // This runs only on NotebookLM pages as defined in manifest.json
 if (typeof FilterState !== 'undefined') {
-  FilterState.clearActiveFilter(function () {
-    // After clearing, visually clear any applied filters on the page
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', showAllNotebooks);
+  FilterState.getActiveFilter(function (activeFilter) {
+    // apply filter if present
+    if (document.readyState === 'loading' && activeFilter) {
+      document.addEventListener('DOMContentLoaded', () => {
+        filterNotebooks(activeFilter);
+      });
+    } else if (activeFilter) {
+      filterNotebooks(activeFilter);
     } else {
       showAllNotebooks();
     }

filterState.js

@@ -13,17 +13,28 @@ const FilterState = {
       callback(null);
       return;
     }
-
-    // retrieve from local storage
-    chrome.storage.local.get(['activeFilter'], function (localResult) {
+    // Try sync storage first
+    chrome.storage.sync.get(['activeFilter'], function (result) {
       if (chrome.runtime.lastError) {
-        console.error(
-          'Failed to load activeFilter from local storage:',
+        console.warn(
+          'Failed to load activeFilter from sync storage, trying local:',
           chrome.runtime.lastError
         );
-        callback(null);
+
+        // Fall back to local storage
+        chrome.storage.local.get(['activeFilter'], function (localResult) {
+          if (chrome.runtime.lastError) {
+            console.error(
+              'Failed to load activeFilter from local storage:',
+              chrome.runtime.lastError
+            );
+            callback(null);
+          } else {
+            callback(localResult.activeFilter || null);
+          }
+        });
       } else {
-        callback(localResult.activeFilter || null);
+        callback(result.activeFilter || null);
       }
     });
   },
@@ -41,7 +52,17 @@ const FilterState = {
 
     const data = { activeFilter: filter };
 
-    // Save to local storage
+    // Save to sync storage first
+    chrome.storage.sync.set(data, function () {
+      if (chrome.runtime.lastError) {
+        console.warn(
+          'Failed to save activeFilter to sync storage:',
+          chrome.runtime.lastError
+        );
+      }
+    });
+
+    // Also save to local storage as backup
     chrome.storage.local.set(data, function () {
       if (chrome.runtime.lastError) {
         console.error(
@@ -132,8 +153,3 @@ const FilterState = {
     });
   },
 };
-
-// Export for both browser extension and Node.js (testing)
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { FilterState };
-}

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "types": ["chrome"],
+    "checkJs": false,
+    "module": "none",
+    "moduleResolution": "node"
+  },
+  "exclude": ["node_modules"]
+}

package.json

@@ -8,12 +8,15 @@
     "test:coverage": "jest --coverage"
   },
   "devDependencies": {
+    "@types/chrome": "^0.1.24",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0"
   },
   "jest": {
     "testEnvironment": "jsdom",
-    "testMatch": ["**/tests/**/*.test.js"],
+    "testMatch": [
+      "**/tests/**/*.test.js"
+    ],
     "collectCoverageFrom": [
       "*.js",
       "!*.test.js"

popup.js

@@ -71,10 +71,11 @@ document.addEventListener('DOMContentLoaded', async function () {
 
   async function init() {
     try {
-      loadFilters();
-      renderFilters();
-      setupEventListeners();
-      showFilterView();
+      loadFilters(() => {
+        renderFilters();
+        setupEventListeners();
+        showFilterView();
+      });
     } catch (error) {
       console.error('Failed to initialize:', error);
       // Show error or fallback
@@ -100,7 +101,7 @@ document.addEventListener('DOMContentLoaded', async function () {
     });
   }
 
-  function loadFilters() {
+  function loadFilters(callback) {
     if (typeof FilterState === 'undefined') {
       // Fallback for development/testing
       PopupState.setFilters([
@@ -110,7 +111,7 @@ document.addEventListener('DOMContentLoaded', async function () {
         'Personal',
         'Shopping',
       ]);
-      renderFilters();
+      callback();
       return;
     }
 
@@ -121,7 +122,7 @@ document.addEventListener('DOMContentLoaded', async function () {
       // Load active filter
       FilterState.getActiveFilter(function (activeFilter) {
         PopupState.setActiveFilter(activeFilter);
-        renderFilters();
+        callback();
       });
     });
   }