Merge pull request #19 from lirena00/fix_storage

lirena00 · web-flow · commit 3ab089eac2c3 · 2025-06-20T18:44:29.000+05:30
updated to version v1.3.2
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "monochromate",
   "description": "An extension that greyscales the webpage to reduce doomscrolling",
   "private": true,
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "scripts": {
     "dev": "wxt",
diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
@@ -8,6 +8,7 @@ export default defineBackground(() => {
     scheduleEnd: "09:00",
     schedule: true,
   };
+  let settingsInitialized = false;
 
   // Debounce helper to prevent too frequent tab updates
   const debounce = (func: Function, wait: number) => {
@@ -107,8 +108,10 @@ export default defineBackground(() => {
 
   // Optimized update function that only changes what's needed
   const updateSettings = (changes: Partial<typeof currentSettings>) => {
+    if (!settingsInitialized) {
+      return;
+    }
     const newSettings = { ...currentSettings, ...changes };
-
     // Only update storage if something changed
     if (JSON.stringify(newSettings) !== JSON.stringify(currentSettings)) {
       browser.storage.local.set({ Monofilter: newSettings });
@@ -126,35 +129,13 @@ export default defineBackground(() => {
     }
   };
 
-  // Initialize
-  browser.storage.local.get("Monofilter").then((data) => {
-    if (!data.Monofilter) {
-      updateSettings({
-        enabled: true,
-        intensity: 100,
-        blacklist: ["localhost"],
-        scheduleStart: "17:00",
-        scheduleEnd: "09:00",
-        schedule: true,
-      });
-    } else {
-      currentSettings = data.Monofilter;
-      if (currentSettings.enabled) {
-        applyGreyscaleToAllTabsDebounced(
-          currentSettings.intensity,
-          currentSettings.blacklist
-        );
-      }
-    }
-  });
-
   const updateScheduleAlarm = () => {
     browser.alarms.clear("StartMonochromate").then(() => {
       if (!currentSettings.scheduleStart) return;
       const [startHours, startMinutes] = currentSettings.scheduleStart
         .split(":")
         .map(Number);
-      const startTime = getNextTime(startHours, startMinutes);
+      const startTime = getTime(startHours, startMinutes);
       browser.alarms.create("StartMonochromate", {
         when: startTime,
         periodInMinutes: 24 * 60,
@@ -166,41 +147,59 @@ export default defineBackground(() => {
       const [endHours, endMinutes] = currentSettings.scheduleEnd
         .split(":")
         .map(Number);
-      const endTime = getNextTime(endHours, endMinutes);
+      const endTime = getTime(endHours, endMinutes);
       browser.alarms.create("EndMonochromate", {
         when: endTime,
         periodInMinutes: 24 * 60,
       });
     });
   };
 
-  // Set initial alarm
-  updateScheduleAlarm();
-
-  function getNextTime(hour: number, minute: number): number {
-    const now = new Date();
+  function getTime(hour: number, minute: number): number {
     const target = new Date();
     target.setHours(hour, minute, 0, 0);
-    if (target.getTime() <= now.getTime()) target.setDate(target.getDate() + 1);
     return target.getTime();
   }
 
+  browser.storage.local.get("Monofilter").then((data) => {
+    if (!data.Monofilter) {
+      updateSettings({
+        enabled: true,
+        intensity: 100,
+        blacklist: ["localhost"],
+        scheduleStart: "17:00",
+        scheduleEnd: "09:00",
+        schedule: true,
+      });
+    } else {
+      currentSettings = data.Monofilter;
+      if (currentSettings.enabled) {
+        applyGreyscaleToAllTabsDebounced(
+          currentSettings.intensity,
+          currentSettings.blacklist
+        );
+      }
+    }
+    settingsInitialized = true;
+    updateScheduleAlarm();
+  });
+
   browser.alarms.onAlarm.addListener((alarm) => {
-    if (alarm.name === "StartMonochromate" && currentSettings.schedule) {
-      // Enable greyscale mode
+    if (
+      alarm.name === "StartMonochromate" &&
+      currentSettings.schedule &&
+      settingsInitialized
+    ) {
       updateSettings({ enabled: true });
-      applyGreyscaleToAllTabsDebounced(
-        currentSettings.intensity,
-        currentSettings.blacklist
-      );
-    } else if (alarm.name === "EndMonochromate" && currentSettings.schedule) {
-      // Disable greyscale mode
+    } else if (
+      alarm.name === "EndMonochromate" &&
+      currentSettings.schedule &&
+      settingsInitialized
+    ) {
       updateSettings({ enabled: false });
-      disableGreyscaleForAllTabs();
     }
   });
 
-  // Optimized message handler
   browser.runtime.onMessage.addListener((message) => {
     switch (message.type) {
       case "toggleGreyscale":
@@ -220,15 +219,10 @@ export default defineBackground(() => {
           blacklist: message.value,
         });
         break;
-      case "setScheduleStart":
-        updateSettings({
-          scheduleStart: message.value,
-        });
-        updateScheduleAlarm();
-        break;
-      case "setScheduleEnd":
+      case "saveSchedule":
         updateSettings({
-          scheduleEnd: message.value,
+          scheduleStart: message.startTime,
+          scheduleEnd: message.endTime,
         });
         updateScheduleAlarm();
         break;
@@ -282,3 +276,21 @@ export default defineBackground(() => {
     }
   });
 });
+
+browser.runtime.onInstalled.addListener((details) => {
+  if (details.reason === "install") {
+    browser.tabs.create({
+      url: "https://monochromate.lirena.in/thanks?utm_source=extension&utm_medium=install",
+    });
+  } else if (details.reason === "update") {
+    const previousVersion = details.previousVersion;
+    const currentVersion = browser.runtime.getManifest().version;
+    if (previousVersion !== currentVersion) {
+      browser.tabs.create({
+        url:
+          "https://monochromate.lirena.in/release-notes/?utm_source=extension&utm_medium=update#v" +
+          currentVersion,
+      });
+    }
+  }
+});
diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx
@@ -11,6 +11,7 @@ import {
   ChevronDown,
   ChevronUp,
   ArrowLeft,
+  Save,
   AlarmClock,
   Loader2,
 } from "lucide-react";
@@ -30,6 +31,7 @@ const Icons = {
   ChevronDown: () => <ChevronDown size={15} />,
   ChevronUp: () => <ChevronUp size={15} />,
   ArrowLeft: () => <ArrowLeft size={18} />,
+  Save: () => <Save size={15} />,
   Discord: () => <Discord />,
   Loader: () => <Loader2 size={24} className="animate-spin" />,
 };
@@ -60,6 +62,8 @@ export default function App() {
   const [currentUrl, setCurrentUrl] = useState("");
   const [startMonochromate, setStartMonochromate] = useState("");
   const [endMonochromate, setEndMonochromate] = useState("");
+  const [tempStartTime, setTempStartTime] = useState("");
+  const [tempEndTime, setTempEndTime] = useState("");
   const [scheduleToggle, setScheduleToggle] = useState(false);
   const [view, setView] = useState<"main" | "blacklist">("main");
 
@@ -101,8 +105,12 @@ export default function App() {
           setEnabled(data.Monofilter.enabled ?? false);
           setIntensity(data.Monofilter.intensity ?? 100);
           setBlacklist(data.Monofilter.blacklist ?? []);
-          setStartMonochromate(data.Monofilter.scheduleStart ?? "17:00");
-          setEndMonochromate(data.Monofilter.scheduleEnd ?? "09:00");
+          const scheduleStart = data.Monofilter.scheduleStart ?? "17:00";
+          const scheduleEnd = data.Monofilter.scheduleEnd ?? "09:00";
+          setStartMonochromate(scheduleStart);
+          setEndMonochromate(scheduleEnd);
+          setTempStartTime(scheduleStart);
+          setTempEndTime(scheduleEnd);
           setScheduleToggle(data.Monofilter.schedule ?? true);
         }
         // Only turn off loading when data is actually loaded
@@ -124,8 +132,12 @@ export default function App() {
           setEnabled(newValue.enabled ?? false);
           setIntensity(newValue.intensity ?? 100);
           setBlacklist(newValue.blacklist ?? []);
-          setStartMonochromate(newValue.scheduleStart ?? "17:00");
-          setEndMonochromate(newValue.scheduleEnd ?? "09:00");
+          const scheduleStart = newValue.scheduleStart ?? "17:00";
+          const scheduleEnd = newValue.scheduleEnd ?? "09:00";
+          setStartMonochromate(scheduleStart);
+          setEndMonochromate(scheduleEnd);
+          setTempStartTime(scheduleStart);
+          setTempEndTime(scheduleEnd);
           setScheduleToggle(newValue.schedule ?? true);
         }
       }
@@ -168,33 +180,18 @@ export default function App() {
     },
     [loading]
   );
-  const changeStartTime = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (loading) return;
-
-      const newStartTime = e.target.value;
-      setStartMonochromate(newStartTime);
-      browser.runtime.sendMessage({
-        type: "setScheduleStart",
-        value: newStartTime,
-      });
-    },
-    [loading]
-  );
 
-  const changeEndTime = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (loading) return;
+  const saveScheduleTimes = useCallback(() => {
+    if (loading) return;
 
-      const newEndTime = e.target.value;
-      setEndMonochromate(newEndTime);
-      browser.runtime.sendMessage({
-        type: "setScheduleEnd",
-        value: newEndTime,
-      });
-    },
-    [loading]
-  );
+    setStartMonochromate(tempStartTime);
+    setEndMonochromate(tempEndTime);
+    browser.runtime.sendMessage({
+      type: "saveSchedule",
+      startTime: tempStartTime,
+      endTime: tempEndTime,
+    });
+  }, [tempStartTime, tempEndTime, loading]);
 
   const toggleSchedule = useCallback(() => {
     if (loading) return;
@@ -371,35 +368,54 @@ export default function App() {
               </div>
 
               <div
-                className={`flex gap-2 items-center ${
-                  !scheduleToggle ? "opacity-60" : ""
-                }`}
+                className={`space-y-3 ${!scheduleToggle ? "opacity-60" : ""}`}
               >
-                <div className="flex-1 bg-white rounded-lg border border-neutral-200 px-3 py-2 hover:border-neutral-400 transition-all">
-                  <div className="flex items-center justify-between">
-                    <span className="text-xs text-neutral-500">Start:</span>
-                    <input
-                      type="time"
-                      className="bg-transparent border-0 text-sm text-right focus:outline-hidden"
-                      value={startMonochromate}
-                      onChange={(e) => changeStartTime(e)}
-                      disabled={!scheduleToggle}
-                    />
+                <div className="flex gap-2 items-center">
+                  <div className="flex-1 bg-white rounded-lg border border-neutral-200 px-3 py-2 hover:border-neutral-400 transition-all">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-neutral-500">Start:</span>
+                      <input
+                        type="time"
+                        className="bg-transparent border-0 text-sm text-right focus:outline-hidden"
+                        value={tempStartTime}
+                        onChange={(e) => setTempStartTime(e.target.value)}
+                        disabled={!scheduleToggle}
+                      />
+                    </div>
                   </div>
-                </div>
 
-                <div className="flex-1 bg-white rounded-lg border border-neutral-200 px-3 py-2 hover:border-neutral-400 transition-all">
-                  <div className="flex items-center justify-between">
-                    <span className="text-xs text-neutral-500">End:</span>
-                    <input
-                      type="time"
-                      className="bg-transparent border-0 text-sm text-right focus:outline-hidden"
-                      value={endMonochromate}
-                      onChange={(e) => changeEndTime(e)}
-                      disabled={!scheduleToggle}
-                    />
+                  <div className="flex-1 bg-white rounded-lg border border-neutral-200 px-3 py-2 hover:border-neutral-400 transition-all">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-neutral-500">End:</span>
+                      <input
+                        type="time"
+                        className="bg-transparent border-0 text-sm text-right focus:outline-hidden"
+                        value={tempEndTime}
+                        onChange={(e) => setTempEndTime(e.target.value)}
+                        disabled={!scheduleToggle}
+                      />
+                    </div>
                   </div>
                 </div>
+
+                <button
+                  onClick={saveScheduleTimes}
+                  disabled={
+                    !scheduleToggle ||
+                    (tempStartTime === startMonochromate &&
+                      tempEndTime === endMonochromate)
+                  }
+                  className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
+                    !scheduleToggle ||
+                    (tempStartTime === startMonochromate &&
+                      tempEndTime === endMonochromate)
+                      ? "bg-neutral-200 text-neutral-400 cursor-not-allowed"
+                      : "bg-neutral-900 text-white hover:bg-neutral-800"
+                  }`}
+                >
+                  <Icons.Save />
+                  Save Schedule
+                </button>
               </div>
             </div>
 
diff --git a/wxt.config.ts b/wxt.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
   modules: ["@wxt-dev/module-react"],
   manifest: {
     name: "Monochromate",
-    version: "1.3.1",
+    version: "1.3.2",
     description:
       "An extension that greyscales the webpage to reduce doomscrolling",
     permissions: ["storage", "activeTab", "scripting", "alarms"],
