switched from css fetching to the styles.json

3 files changed, 31 insertions, 83 deletions

diff --git a/inject-css.js b/inject-css.js
index 50e7c7f..6b3aaf8 100644
--- a/inject-css.js
+++ b/inject-css.js
@@ -1,27 +1,21 @@
-browser.storage.sync.get("transparentZenSettings").then((settings) => {
+browser.storage.local.get("transparentZenSettings").then((settings) => {
   if (settings.transparentZenSettings?.enableStyling) {
-    fetch(browser.runtime.getURL("mapper.json"))
-      .then((response) => response.json())
-      .then((mapping) => {
-        const currentUrl = window.location.hostname;
-        const matchedKey = Object.keys(mapping).find((key) =>
-          currentUrl.includes(key)
-        );
-        const cssFileName = mapping[matchedKey];
-        if (
-          cssFileName &&
-          settings.transparentZenSettings.websiteSettings?.[matchedKey] !==
-            false
-        ) {
-          browser.storage.sync.get(cssFileName).then((data) => {
-            if (data[cssFileName]) {
-              let style = document.createElement("style");
-              style.textContent = data[cssFileName];
-              document.head.appendChild(style);
-              console.log(`Injected custom CSS for ${currentUrl}`);
-            }
-          });
-        }
-      });
+    browser.storage.local.get("styles").then((data) => {
+      const currentUrl = window.location.hostname;
+      const cssFileName = Object.keys(data.styles).find((key) =>
+        currentUrl.includes(key.replace(".css", ""))
+      );
+      if (
+        cssFileName &&
+        settings.transparentZenSettings.websiteSettings?.[
+          cssFileName.replace(".css", "")
+        ] !== false
+      ) {
+        let style = document.createElement("style");
+        style.textContent = data.styles[cssFileName];
+        document.head.appendChild(style);
+        console.log(`Injected custom CSS for ${currentUrl}`);
+      }
+    });
   }
 });
diff --git a/mapper.json b/mapper.json
deleted file mode 100644
index 1191511..0000000
--- a/mapper.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-    "github.com": "github.com.css",
-    "keep.google.com": "keep.google.com.css",
-    "aistudio.google.com": "aistudio.google.com.css",
-    "calendar.google.com": "calendar.google.com.css",
-    "chat.openai.com": "chat.openai.com.css",
-    "chat.deepseek.com": "chat.deepseek.com.css",
-    "discord.com.css": "discord.com.css",
-    "facebook.com": "facebook.com.css",
-    "gemini.google.com": "gemini.google.com.css",
-    "google.com": "google.com.css",
-    "instagram.com": "instagram.com.css",
-    "learning.westminster.ac.uk": "learning.westminster.ac.uk.css",
-    "messenger.com": "messenger.com.css",
-    "monkeytype.com": "monkeytype.com.css",
-    "music.youtube.com": "music.youtube.com.css",
-    "notion.so": "notion.so.css",
-    "pexels.com": "pexels.com.css",
-    "pinterest.com": "pinterest.com.css",
-    "priv.au": "priv.au.css",
-    "quora.com": "quora.com.css",
-    "reddit.com": "reddit.com.css",
-    "sameerasw.com": "sameerasw.com.css",
-    "sourceforge.net": "sourceforge.net.css",
-    "speedtest.net": "speedtest.net.css",
-    "tasks.google.com": "tasks.google.com.css",
-    "twitch.tv": "twitch.tv.css",
-    "unsplash.com": "unsplash.com.css",
-    "web.telegram.org": "web.telegram.org.css",
-    "web.whatsapp.com": "web.whatsapp.com.css",
-    "x.com": "x.com.css",
-    "youtube.com": "youtube.com.css"
-}
\ No newline at end of file
diff --git a/popup/popup.js b/popup/popup.js
index f9dacfd..f743179 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -57,9 +57,6 @@ new (class ExtensionPopup {
     browser.storage.local.set({
       [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings,
     });
-    browser.storage.sync.set({
-      [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings,
-    });
     console.info("Settings saved", this.browserStorageSettings);
   }
 
@@ -93,38 +90,28 @@ new (class ExtensionPopup {
   async refetchCSS() {
     this.refetchCSSButton.textContent = "Fetching...";
     try {
-      const response = await fetch("/mapper.json", {
-        headers: {
-          "Cache-Control": "no-cache",
-        },
-      });
-      if (!response.ok) throw new Error("Failed to fetch mapper.json");
-      const mapping = await response.json();
-      for (const [site, cssFileName] of Object.entries(mapping)) {
-        const cssResponse = await fetch(
-          `https://sameerasw.github.io/my-internet/${cssFileName}`,
-          {
-            headers: {
-              "Cache-Control": "no-cache",
-            },
-          }
-        );
-        if (!cssResponse.ok) throw new Error(`Failed to fetch CSS for ${site}`);
-        const cssText = await cssResponse.text();
-        await browser.storage.local.set({ [cssFileName]: cssText });
-        await browser.storage.sync.set({ [cssFileName]: cssText });
-      }
+      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 });
       this.refetchCSSButton.textContent = "Done!";
       setTimeout(() => {
         this.refetchCSSButton.textContent = "Refetch latest styles";
       }, 2000);
-      console.info("All CSS files refetched and updated from GitHub.");
+      console.info("All styles refetched and updated from GitHub.");
     } catch (error) {
       this.refetchCSSButton.textContent = "Error!";
       setTimeout(() => {
         this.refetchCSSButton.textContent = "Refetch latest styles";
       }, 2000);
-      console.error("Error refetching CSS:", error);
+      console.error("Error refetching styles:", error);
     }
   }