5 files changed, 89 insertions, 2 deletions
diff --git a/background.js b/background.js
index 682441c..77f78f9 100644
--- a/background.js
+++ b/background.js
@@ -41,6 +41,50 @@ function applyCSSToTab(tab) {
   });
 }
 
+let autoUpdateInterval;
+
+function startAutoUpdate() {
+  if (autoUpdateInterval) clearInterval(autoUpdateInterval);
+  autoUpdateInterval = setInterval(refetchCSS, 2 * 60 * 60 * 1000);
+}
+
+function stopAutoUpdate() {
+  if (autoUpdateInterval) clearInterval(autoUpdateInterval);
+}
+
+async function refetchCSS() {
+  try {
+    const response = await fetch(
+      "https://sameerasw.github.io/my-internet/styles.json",
+      {
+        headers: { "Cache-Control": "no-cache" },
+      }
+    );
+    if (!response.ok) throw new Error("Failed to fetch styles.json");
+    const styles = await response.json();
+    await browser.storage.local.set({ styles });
+    await browser.storage.local.set({ lastFetchedTime: Date.now() });
+    console.info("All styles refetched and updated from GitHub.");
+  } catch (error) {
+    console.error("Error refetching styles:", error);
+  }
+}
+
+browser.runtime.onMessage.addListener((message) => {
+  if (message.action === "enableAutoUpdate") {
+    startAutoUpdate();
+  } else if (message.action === "disableAutoUpdate") {
+    stopAutoUpdate();
+  }
+});
+
+// Initialize auto-update based on stored settings
+browser.storage.local.get("transparentZenSettings").then((settings) => {
+  if (settings.transparentZenSettings?.autoUpdate) {
+    startAutoUpdate();
+  }
+});
+
 browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   if (changeInfo.status === "complete") {
     applyCSSToTab(tab);
diff --git a/manifest.json b/manifest.json
index 4fed51a..733eaa6 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Zen Internet",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Inject custom css from my repository in real time",
   "browser_specific_settings": {
     "gecko": {
diff --git a/popup/popup.css b/popup/popup.css
index 113713e..9b49600 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -404,6 +404,6 @@ input:checked + .slider:before {
   margin-right: 4px;
 }
 
-#addon-version{
+#addon-version, #last-fetched-time{
   font-size: 0.75em;
 }
 \ No newline at end of file
diff --git a/popup/popup.html b/popup/popup.html
index cca3def..b53ed87 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -49,7 +49,18 @@
           <i class="fas fa-sync-alt"></i> Refetch latest styles
         </button>
       </div>
+
+      <div class="toggle-container">
+        <label class="toggle-switch">
+          <input type="checkbox" id="auto-update">
+          <span class="slider round"></span>
+        </label>
+        <span class="toggle-label">Auto Update Styles</span>
+      </div>
+      <div id="last-fetched-time" class="last-fetched-time"></div>
+
     </main>
+    
 
     <footer class="app-footer">
       <a href="https://sameerasw.github.io/my-internet/" class="footer-link" target="_blank">
diff --git a/popup/popup.js b/popup/popup.js
index 86eda9c..a444060 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -6,6 +6,8 @@ new (class ExtensionPopup {
   websitesList = document.getElementById("websites-list");
   currentSiteFeatures = document.getElementById("current-site-toggles");
   currentSiteHostname = "";
+  autoUpdateSwitch = document.getElementById("auto-update");
+  lastFetchedTime = document.getElementById("last-fetched-time");
 
   constructor() {
     this.loadSettings().then((settings) => {
@@ -22,6 +24,12 @@ new (class ExtensionPopup {
       this.websitesList.classList.toggle("collapsed");
     });
 
+    this.autoUpdateSwitch.addEventListener(
+      "change",
+      this.saveSettings.bind(this)
+    );
+    this.setupAutoUpdate();
+    this.displayLastFetchedTime();
     this.setupContentScriptInjection();
     this.displayAddonVersion();
   }
@@ -61,6 +69,9 @@ new (class ExtensionPopup {
       this.enableStylingSwitch.checked =
         this.browserStorageSettings.enableStyling;
     }
+    if (this.browserStorageSettings.autoUpdate !== undefined) {
+      this.autoUpdateSwitch.checked = this.browserStorageSettings.autoUpdate;
+    }
     this.loadCurrentSiteFeatures();
     this.loadWebsitesList();
   }
@@ -74,6 +85,7 @@ new (class ExtensionPopup {
   saveSettings() {
     this.browserStorageSettings.enableStyling =
       this.enableStylingSwitch.checked;
+    this.browserStorageSettings.autoUpdate = this.autoUpdateSwitch.checked;
 
     const featureSettings = {};
     this.currentSiteFeatures
@@ -191,6 +203,7 @@ new (class ExtensionPopup {
       if (!response.ok) throw new Error("Failed to fetch styles.json");
       const styles = await response.json();
       await browser.storage.local.set({ styles });
+      await browser.storage.local.set({ lastFetchedTime: Date.now() });
 
       this.loadCurrentSiteFeatures();
       this.loadWebsitesList();
@@ -201,6 +214,7 @@ new (class ExtensionPopup {
         this.refetchCSSButton.textContent = "Refetch latest styles";
       }, 2000);
       console.info("All styles refetched and updated from GitHub." + styles);
+      this.displayLastFetchedTime();
     } catch (error) {
       this.refetchCSSButton.textContent = "Error!";
       setTimeout(() => {
@@ -294,4 +308,22 @@ new (class ExtensionPopup {
       "addon-version"
     ).textContent = `Version: ${version}`;
   }
+  
+  setupAutoUpdate() {
+    if (this.autoUpdateSwitch.checked) {
+      browser.runtime.sendMessage({ action: "enableAutoUpdate" });
+    } else {
+      browser.runtime.sendMessage({ action: "disableAutoUpdate" });
+    }
+  }
+
+  displayLastFetchedTime() {
+    browser.storage.local.get("lastFetchedTime").then((result) => {
+      if (result.lastFetchedTime) {
+        this.lastFetchedTime.textContent = `Last fetched: ${new Date(
+          result.lastFetchedTime
+        ).toLocaleString()}`;
+      }
+    });
+  }
 })();