feature complete for #4 - forced theems for unthemed websites.

6 files changed, 120 insertions, 16 deletions

diff --git a/background.js b/background.js
index 472f42b..94baffa 100644
--- a/background.js
+++ b/background.js
@@ -1,3 +1,4 @@
+let SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
 let logging = false;
 
 async function applyCSSToTab(tab) {
@@ -12,6 +13,11 @@ async function applyCSSToTab(tab) {
     if (globalSettings.enableStyling === false) return;
 
     const data = await browser.storage.local.get("styles");
+    const skipListData = await browser.storage.local.get(
+      SKIP_FORCE_THEMING_KEY
+    );
+    const skipList = skipListData[SKIP_FORCE_THEMING_KEY] || [];
+
     const cssFileName =
       Object.keys(data.styles?.website || {}).find((key) => {
         const siteName = key.replace(".css", "");
@@ -20,7 +26,10 @@ async function applyCSSToTab(tab) {
           return hostname.endsWith(baseSiteName);
         }
         return hostname === siteName || hostname === `www.${siteName}`;
-      }) || (globalSettings.forceStyling ? "example.com.css" : null);
+      }) ||
+      (globalSettings.forceStyling && !skipList.includes(hostname)
+        ? "example.com.css"
+        : null);
 
     if (!cssFileName) return;
 
diff --git a/inject-css.js b/inject-css.js
index 88ddacc..ea1525a 100644
--- a/inject-css.js
+++ b/inject-css.js
@@ -1,3 +1,5 @@
+import { SKIP_FORCE_THEMING_KEY } from "./shared/constants.js";
+
 let logging = false;
 
 if (logging) console.log("inject-css.js script loaded");
@@ -28,7 +30,16 @@ if (logging) console.log("inject-css.js script loaded");
       return currentUrl === siteName || currentUrl === `www.${siteName}`;
     });
 
+    const skipListData = await browser.storage.local.get(
+      SKIP_FORCE_THEMING_KEY
+    );
+    const skipList = skipListData[SKIP_FORCE_THEMING_KEY] || [];
+
     if (!cssFileName && settings.transparentZenSettings?.forceStyling) {
+      if (skipList.includes(currentUrl)) {
+        if (logging) console.log("Skipping forced theming for this site");
+        return;
+      }
       cssFileName = "example.com.css";
     }
 
diff --git a/popup/popup.css b/popup/popup.css
index 9b49600..0058174 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -173,8 +173,8 @@ input:checked + .slider:before {
 .features-container {

   background-color: var(--secondary-bg);

   border-radius: var(--radius-md);

-  padding: 16px;

-  margin-bottom: 16px;

+  padding: 12px;

+  margin-bottom: 8px;

 }

 

 .features-list {

@@ -406,4 +406,20 @@ input:checked + .slider:before {
 

 #addon-version, #last-fetched-time{

   font-size: 0.75em;

+}

+

+.forcing-container{

+  background-color: var(--secondary-bg);

+  border-radius: var(--radius-md);

+  padding: 16px;

+  margin-bottom: 16px;

+}

+

+.warning{

+  color: var(--warning-color);

+  margin-top: 8px;

+}

+

+#reload{

+  margin-top: 16px;

 }
\ No newline at end of file
diff --git a/popup/popup.html b/popup/popup.html
index 4848306..c07e5fa 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -20,7 +20,7 @@
     </header>
 
     <main class="app-content">
-      <div class="toggle-container">
+      <div class="toggle-container features-container">
         <label class="toggle-switch">
           <input type="checkbox" id="enable-styling">
           <span class="slider round"></span>
@@ -32,7 +32,12 @@
       <div id="current-site-features" class="features-container">
         <h2 class="section-title">Current Site Features</h2>
         <div id="current-site-toggles" class="features-list"></div>
-        <p>Disabling a feature may require a reload</p>
+        <div class="actions">
+          <!-- reload botton -->
+          <button id="reload" class="action-button secondary">
+            Reload to apply <i class="fas fa-sync-alt"></i>
+          </button>
+        </div>
       </div>
 
       <!-- All Websites Section (Collapsible) -->
@@ -57,14 +62,23 @@
         </label>
         <span class="toggle-label">Auto Update Styles</span>
       </div>
-      <div class="toggle-container">
-        <label class="toggle-switch">
-          <input type="checkbox" id="force-styling">
-          <span class="slider round"></span>
-        </label>
-        <span class="toggle-label">Force Styling</span>
-      </div>
       <div id="last-fetched-time" class="last-fetched-time"></div>
+      <div class="forcing-container">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" id="force-styling">
+            <span class="slider round"></span>
+          </label>
+          <span class="toggle-label">Force Styling</span>
+        </div>
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" id="skip-force-theming">
+            <span class="slider round"></span>
+          </label>
+          <span class="toggle-label">Skip Forcing for this Site</span>
+        </div>
+      </div>
 
     </main>
 
diff --git a/popup/popup.js b/popup/popup.js
index 23f18fb..ece8633 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,4 +1,5 @@
 let logging = false;
+let SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
 
 new (class ExtensionPopup {
   BROWSER_STORAGE_KEY = "transparentZenSettings";
@@ -12,14 +13,19 @@ new (class ExtensionPopup {
   autoUpdateSwitch = document.getElementById("auto-update");
   lastFetchedTime = document.getElementById("last-fetched-time");
   forceStylingSwitch = document.getElementById("force-styling");
+  skipForceThemingSwitch = document.getElementById("skip-force-theming");
+  skipForceThemingList = [];
+  reloadButton = document.getElementById("reload");
 
   constructor() {
     if (logging) console.log("Initializing ExtensionPopup");
     // Load settings and initialize the popup
     this.loadSettings().then(() => {
-      this.getCurrentTabInfo().then(() => {
-        this.restoreSettings();
-        this.bindEvents();
+      this.loadSkipForceThemingList().then(() => {
+        this.getCurrentTabInfo().then(() => {
+          this.restoreSettings();
+          this.bindEvents();
+        });
       });
     });
 
@@ -33,6 +39,7 @@ new (class ExtensionPopup {
       "change",
       this.saveSettings.bind(this)
     );
+    this.reloadButton.addEventListener("click", this.reloadPage.bind(this));
 
     // Setup auto-update and display last fetched time
     this.setupAutoUpdate();
@@ -71,6 +78,12 @@ new (class ExtensionPopup {
         this.updateActiveTabStyling();
       }
     });
+
+    this.skipForceThemingSwitch.addEventListener("change", () => {
+      this.saveSkipForceThemingList();
+    });
+
+    this.reloadButton.addEventListener("click", this.reloadPage.bind(this));
   }
 
   restoreSettings() {
@@ -80,6 +93,9 @@ new (class ExtensionPopup {
       this.globalSettings.enableStyling ?? true;
     this.autoUpdateSwitch.checked = this.globalSettings.autoUpdate ?? false;
     this.forceStylingSwitch.checked = this.globalSettings.forceStyling ?? false;
+    this.skipForceThemingSwitch.checked = this.skipForceThemingList.includes(
+      this.currentSiteHostname
+    );
     this.loadCurrentSiteFeatures();
   }
 
@@ -150,6 +166,26 @@ new (class ExtensionPopup {
     });
   }
 
+  async loadSkipForceThemingList() {
+    const data = await browser.storage.local.get(SKIP_FORCE_THEMING_KEY);
+    this.skipForceThemingList = data[SKIP_FORCE_THEMING_KEY] || [];
+  }
+
+  saveSkipForceThemingList() {
+    const isChecked = this.skipForceThemingSwitch.checked;
+    const index = this.skipForceThemingList.indexOf(this.currentSiteHostname);
+
+    if (isChecked && index === -1) {
+      this.skipForceThemingList.push(this.currentSiteHostname);
+    } else if (!isChecked && index !== -1) {
+      this.skipForceThemingList.splice(index, 1);
+    }
+
+    browser.storage.local.set({
+      [SKIP_FORCE_THEMING_KEY]: this.skipForceThemingList,
+    });
+  }
+
   async loadCurrentSiteFeatures() {
     if (logging) console.log("loadCurrentSiteFeatures called");
     try {
@@ -190,6 +226,18 @@ new (class ExtensionPopup {
       this.siteSettings = siteData[siteKey] || {};
 
       const features = styles[currentSiteKey];
+
+      if (this.globalSettings.forceStyling) {
+        const skipForceThemingToggle = document.createElement("div");
+        skipForceThemingToggle.className = "toggle-container";
+        skipForceThemingToggle.innerHTML = `
+        <div class="actions secondary">
+          <span class="toggle-label warning">No themes found for this website ;(</span>
+        </div>
+        `;
+
+        this.currentSiteFeatures.appendChild(skipForceThemingToggle);
+      }
       for (const [feature, css] of Object.entries(features)) {
         const displayFeatureName = feature.includes("-")
           ? feature.split("-")[1]
@@ -365,4 +413,9 @@ new (class ExtensionPopup {
       }
     });
   }
+
+  reloadPage() {
+    if (logging) console.log("reloadPage called");
+    browser.tabs.reload();
+  }
 })();
diff --git a/shared/constants.js b/shared/constants.js
index 92eb2fd..132bbec 100644
--- a/shared/constants.js
+++ b/shared/constants.js
@@ -1 +1,2 @@
-export const BROWSER_STORAGE_KEY = "transparentZenSettings";
\ No newline at end of file
+export const BROWSER_STORAGE_KEY = "transparentZenSettings";
+export const SKIP_FORCE_THEMING_KEY = "skipForceThemingList";