Added the website mapper and automatic loading and fetching of css styles with the ability to disable as well

7 files changed, 135 insertions, 82 deletions

diff --git a/background.js b/background.js
index 3c25ff3..b67461e 100644
--- a/background.js
+++ b/background.js
@@ -1,29 +1,41 @@
-const CSS_URL =
-  "https://sameerasw.github.io/my-internet/github.com.css";
+const CSS_URL_BASE = "https://sameerasw.github.io/my-internet/";
 
-async function updateCSS() {
+async function updateCSS(url, cssFileName) {
   try {
-    let response = await fetch(CSS_URL, {
+    let response = await fetch(url, {
       headers: {
-        'Cache-Control': 'no-cache'
-      }
+        "Cache-Control": "no-cache",
+      },
     });
     if (!response.ok) throw new Error("Failed to fetch CSS");
     let cssText = await response.text();
-    await browser.storage.local.set({ githubCSS: cssText });
-    await browser.storage.sync.set({ githubCSS: cssText });
-    console.log("Updated GitHub CSS from remote source." + cssText);
+    await browser.storage.local.set({ [cssFileName]: cssText });
+    await browser.storage.sync.set({ [cssFileName]: cssText });
+    console.log(`Updated CSS for ${cssFileName} from remote source.`);
   } catch (error) {
-    console.error("Error fetching CSS:", error);
+    console.error(`Error fetching CSS for ${cssFileName}:`, error);
   }
 }
 
+async function updateAllCSS(mapping) {
+  for (const [site, cssFileName] of Object.entries(mapping)) {
+    const url = `${CSS_URL_BASE}${cssFileName}`;
+    await updateCSS(url, cssFileName);
+  }
+  console.log("All CSS files updated.");
+}
+
 // Fetch CSS on startup and then every hour
-updateCSS();
+fetch("/mapper.json")
+  .then((response) => response.json())
+  .then((mapping) => updateAllCSS(mapping));
 
-// Listen for messages to restart the background script
 browser.runtime.onMessage.addListener((message) => {
-  if (message.action === "restartBackground") {
+  if (message.action === "updateCSS") {
+    fetch("/mapper.json")
+      .then((response) => response.json())
+      .then((mapping) => updateAllCSS(mapping));
+  } else if (message.action === "restartBackground") {
     browser.runtime.reload();
   }
-});
\ No newline at end of file
+});
diff --git a/inject-css.js b/inject-css.js
index c54c80e..c889e18 100644
--- a/inject-css.js
+++ b/inject-css.js
@@ -1,8 +1,23 @@
-browser.storage.sync.get("githubCSS").then((data) => {
-    if (data.githubCSS) {
-        let style = document.createElement("style");
-        style.textContent = data.githubCSS;
-        document.head.appendChild(style);
-        console.log("Injected custom GitHub CSS.");
-    }
+browser.storage.sync.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) {
+          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}`);
+            }
+          });
+        }
+      });
+  }
 });
diff --git a/manifest.json b/manifest.json
index 41693a4..e4de56c 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,8 +1,8 @@
 {
   "manifest_version": 2,
-  "name": "Transparent Zen",
-  "version": "0.1.10",
-  "description": "Inject custom styles to make your favorite websites transparent.",
+  "name": "Zen Internet",
+  "version": "0.2.0",
+  "description": "Inject custom css from my repository in real time",
   "browser_specific_settings": {
     "gecko": {
       "id": "{74186d10-f6f2-4f73-b33a-83bb72e50654}"
@@ -12,15 +12,10 @@
     "48": "assets/images/logo_48.png",
     "96": "assets/images/logo_96.png"
   },
-  "permissions": [
-    "activeTab",
-    "storage",
-    "tabs",
-    "<all_urls>"
-  ],
+  "permissions": ["activeTab", "storage", "tabs", "<all_urls>"],
   "browser_action": {
     "default_popup": "popup/popup.html",
-    "default_title": "Transparent Zen"
+    "default_title": "Zen Internet"
   },
   "background": {
     "scripts": ["background.js"],
@@ -28,7 +23,7 @@
   },
   "content_scripts": [
     {
-      "matches": ["*://*.github.com/*"],
+      "matches": ["<all_urls>"],
       "js": ["inject-css.js"],
       "run_at": "document_start"
     }
diff --git a/mapper.json b/mapper.json
new file mode 100644
index 0000000..74e9267
--- /dev/null
+++ b/mapper.json
@@ -0,0 +1,31 @@
+{
+    "github.com": "github.com.css",
+    "keep.google.com": "keep.google.com.css",
+    "aistudio.google.com": "aistudio.google.com.css",
+    "chat.openai.com": "chat.openai.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.css b/popup/popup.css
index fa6cde3..174470e 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -25,6 +25,10 @@ body {
     #extension-body {

       padding: 16px;

 

+      display: flex;

+      flex-direction: column;

+      gap: 16px;

+

       #extension-settings {

         .setting {

           display: flex;

diff --git a/popup/popup.html b/popup/popup.html
index f27e98d..3b267e7 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -9,22 +9,16 @@
 <body>
   <div class="container">
     <div id="extension-header">
-      <h1 class="headline">Transparent Zen</h1>
+      <h1 class="headline">ZenInternet by @sameerasw</h1>
     </div>
     <div id="extension-body">
-      <form id="extension-settings">
-        <label class="setting">
-          <input type="checkbox" name="enable-transparency">
-          Enable Transparency (no effect yet)
-        </label>
-      </form>
-      <button id="refetch-css">Refetch CSS</button>
+      <label class="setting">
+        <input type="checkbox" id="enable-styling">
+        Enable Styling
+      </label>
+      <button id="refetch-css">Refetch latest styles</button>
       <button id="restart-background">Restart Background Script (optional)</button>
-      <div id="extension-description">
-        <p>Transparent Zen is a Zen Browser extension that makes supported websites transparent.</p>
-        <p>Transparent Zen is open source and everyone can contribute their custom styles to support more websites.</p>
-        <a href="https://github.com/frostybiscuit/transparent-zen">GitHub Repository</a>
-      </div>
+      <a href="https://sameerasw.github.io/my-internet/">Styles repo</a>
     </div>
   </div>
   <script src="popup.js"></script>
diff --git a/popup/popup.js b/popup/popup.js
index 77c5391..494f170 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,7 +1,7 @@
 new (class ExtensionPopup {
   BROWSER_STORAGE_KEY = "transparentZenSettings";
   browserStorageSettings = {};
-  extensionSettingsForm = document.getElementById("extension-settings");
+  enableStylingSwitch = document.getElementById("enable-styling");
 
   constructor() {
     this.loadSettings().then((settings) => {
@@ -13,29 +13,22 @@ new (class ExtensionPopup {
     });
     document
       .getElementById("refetch-css")
-      .addEventListener("click", this.refetchCSS);
+      .addEventListener("click", this.refetchCSS.bind(this));
     document
       .getElementById("restart-background")
       .addEventListener("click", this.restartBackground);
   }
 
   bindEvents() {
-    this.extensionSettingsForm.querySelectorAll("input").forEach((input) => {
-      input.addEventListener("change", () => {
-        this.saveSettings();
-      });
+    this.enableStylingSwitch.addEventListener("change", () => {
+      this.saveSettings();
     });
   }
 
   restoreSettings() {
-    if (this.extensionSettingsForm?.elements) {
-      for (const element of this.extensionSettingsForm.elements) {
-        if (this.browserStorageSettings[element.name]) {
-          element.checked = JSON.parse(
-            this.browserStorageSettings[element.name]
-          );
-        }
-      }
+    if (this.browserStorageSettings.enableStyling !== undefined) {
+      this.enableStylingSwitch.checked =
+        this.browserStorageSettings.enableStyling;
     }
   }
 
@@ -46,35 +39,44 @@ new (class ExtensionPopup {
   }
 
   saveSettings() {
-    if (this.extensionSettingsForm?.elements) {
-      for (const element of this.extensionSettingsForm.elements) {
-        this.browserStorageSettings[element.name] = element.checked;
-      }
+    this.browserStorageSettings.enableStyling =
+      this.enableStylingSwitch.checked;
 
-      browser.storage.local.set({
-        [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings,
-      });
-      browser.runtime.sendMessage({ action: "updateSettings" });
-      console.info("Settings saved", this.browserStorageSettings);
-    }
+    browser.storage.local.set({
+      [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings,
+    });
+    browser.storage.sync.set({
+      [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings,
+    });
+    browser.runtime.sendMessage({ action: "updateSettings" });
+    console.info("Settings saved", this.browserStorageSettings);
   }
 
   async refetchCSS() {
     try {
-      const response = await fetch(
-        "https://sameerasw.github.io/my-internet/github.com.css",
-        {
-          headers: {
-            'Cache-Control': 'no-cache'
+      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 (!response.ok) throw new Error("Failed to fetch CSS");
-      const cssText = await response.text();
-      await browser.storage.local.set({ githubCSS: cssText });
-      await browser.storage.sync.set({ githubCSS: cssText });
+        );
+        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 });
+      }
       browser.runtime.sendMessage({ action: "updateCSS" });
-      console.info("CSS refetched and updated from GitHub." + cssText);
+      console.info("All CSS files refetched and updated from GitHub.");
     } catch (error) {
       console.error("Error refetching CSS:", error);
     }
@@ -84,4 +86,4 @@ new (class ExtensionPopup {
     browser.runtime.sendMessage({ action: "restartBackground" });
     console.info("Background script restart requested.");
   }
-})();
\ No newline at end of file
+})();