Website specific toggling

Author: sameerasw

.DS_Store

@@ -8,7 +8,11 @@ browser.storage.sync.get("transparentZenSettings").then((settings) => {
           currentUrl.includes(key)
         );
         const cssFileName = mapping[matchedKey];
-        if (cssFileName) {
+        if (
+          cssFileName &&
+          settings.transparentZenSettings.websiteSettings?.[matchedKey] !==
+            false
+        ) {
           browser.storage.sync.get(cssFileName).then((data) => {
             if (data[cssFileName]) {
               let style = document.createElement("style");

inject-css.js

@@ -3,6 +3,11 @@
   "name": "Zen Internet",
   "version": "0.2.0",
   "description": "Inject custom css from my repository in real time",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{91aa3897-2634-4a8a-9092-279db23a7689}"
+    }
+  },
   "icons": {
     "48": "assets/images/logo_48.png",
     "96": "assets/images/logo_96.png"

manifest.json

@@ -2,7 +2,9 @@
     "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",

mapper.json

@@ -16,6 +16,7 @@ <h1 class="headline">ZenInternet by @sameerasw</h1>
         <input type="checkbox" id="enable-styling">
         Enable Styling
       </label>
+      <ul id="websites-list"></ul>
       <button id="refetch-css">Refetch latest styles</button>
       <button id="restart-background">Restart Background Script (optional)</button>
       <a href="https://sameerasw.github.io/my-internet/">Styles repo</a>

popup/popup.html

@@ -3,6 +3,7 @@ new (class ExtensionPopup {
   browserStorageSettings = {};
   enableStylingSwitch = document.getElementById("enable-styling");
   refetchCSSButton = document.getElementById("refetch-css");
+  websitesList = document.getElementById("websites-list");
 
   constructor() {
     this.loadSettings().then((settings) => {
@@ -22,13 +23,17 @@ new (class ExtensionPopup {
     this.enableStylingSwitch.addEventListener("change", () => {
       this.saveSettings();
     });
+    this.websitesList.addEventListener("change", () => {
+      this.saveSettings();
+    });
   }
 
   restoreSettings() {
     if (this.browserStorageSettings.enableStyling !== undefined) {
       this.enableStylingSwitch.checked =
         this.browserStorageSettings.enableStyling;
     }
+    this.loadWebsitesList();
   }
 
   async loadSettings() {
@@ -41,6 +46,14 @@ new (class ExtensionPopup {
     this.browserStorageSettings.enableStyling =
       this.enableStylingSwitch.checked;
 
+    const websiteSettings = {};
+    this.websitesList
+      .querySelectorAll("input[type=checkbox]")
+      .forEach((checkbox) => {
+        websiteSettings[checkbox.name] = checkbox.checked;
+      });
+    this.browserStorageSettings.websiteSettings = websiteSettings;
+
     browser.storage.local.set({
       [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings,
     });
@@ -50,6 +63,33 @@ new (class ExtensionPopup {
     console.info("Settings saved", this.browserStorageSettings);
   }
 
+  async loadWebsitesList() {
+    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();
+      this.websitesList.innerHTML = "";
+      for (const site of Object.keys(mapping)) {
+        const isChecked =
+          this.browserStorageSettings.websiteSettings?.[site] ?? true;
+        const listItem = document.createElement("li");
+        listItem.innerHTML = `
+          <label>
+            <input type="checkbox" name="${site}" ${isChecked ? "checked" : ""}>
+            ${site}
+          </label>
+        `;
+        this.websitesList.appendChild(listItem);
+      }
+    } catch (error) {
+      console.error("Error loading websites list:", error);
+    }
+  }
+
   async refetchCSS() {
     this.refetchCSSButton.textContent = "Fetching...";
     try {