Wildcards for forcing theme on unthemed websites

5 files changed, 42 insertions, 13 deletions

diff --git a/background.js b/background.js
index affef80..472f42b 100644
--- a/background.js
+++ b/background.js
@@ -12,14 +12,15 @@ async function applyCSSToTab(tab) {
     if (globalSettings.enableStyling === false) return;
 
     const data = await browser.storage.local.get("styles");
-    const cssFileName = Object.keys(data.styles?.website || {}).find((key) => {
-      const siteName = key.replace(".css", "");
-      if (siteName.startsWith("+")) {
-        const baseSiteName = siteName.slice(1);
-        return hostname.endsWith(baseSiteName);
-      }
-      return hostname === siteName || hostname === `www.${siteName}`;
-    });
+    const cssFileName =
+      Object.keys(data.styles?.website || {}).find((key) => {
+        const siteName = key.replace(".css", "");
+        if (siteName.startsWith("+")) {
+          const baseSiteName = siteName.slice(1);
+          return hostname.endsWith(baseSiteName);
+        }
+        return hostname === siteName || hostname === `www.${siteName}`;
+      }) || (globalSettings.forceStyling ? "example.com.css" : null);
 
     if (!cssFileName) return;
 
diff --git a/inject-css.js b/inject-css.js
index 3246255..88ddacc 100644
--- a/inject-css.js
+++ b/inject-css.js
@@ -19,7 +19,7 @@ if (logging) console.log("inject-css.js script loaded");
     const currentUrl = window.location.hostname;
     if (logging) console.log("Current URL hostname", currentUrl);
 
-    const cssFileName = Object.keys(data.styles?.website || {}).find((key) => {
+    let cssFileName = Object.keys(data.styles?.website || {}).find((key) => {
       const siteName = key.replace(".css", "");
       if (siteName.startsWith("+")) {
         const baseSiteName = siteName.slice(1);
@@ -28,6 +28,10 @@ if (logging) console.log("inject-css.js script loaded");
       return currentUrl === siteName || currentUrl === `www.${siteName}`;
     });
 
+    if (!cssFileName && settings.transparentZenSettings?.forceStyling) {
+      cssFileName = "example.com.css";
+    }
+
     if (!cssFileName) {
       if (logging) console.log("No CSS file found for current site");
       return;
diff --git a/manifest.json b/manifest.json
index 4859cc7..2749856 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Zen Internet",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Inject custom css from my repository in real time",
   "browser_specific_settings": {
     "gecko": {
diff --git a/popup/popup.html b/popup/popup.html
index 1dda5cd..4848306 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -57,10 +57,17 @@
         </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>
 
     </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 1882573..23f18fb 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -11,6 +11,7 @@ new (class ExtensionPopup {
   currentSiteHostname = "";
   autoUpdateSwitch = document.getElementById("auto-update");
   lastFetchedTime = document.getElementById("last-fetched-time");
+  forceStylingSwitch = document.getElementById("force-styling");
 
   constructor() {
     if (logging) console.log("Initializing ExtensionPopup");
@@ -28,6 +29,10 @@ new (class ExtensionPopup {
       "change",
       this.saveSettings.bind(this)
     );
+    this.forceStylingSwitch.addEventListener(
+      "change",
+      this.saveSettings.bind(this)
+    );
 
     // Setup auto-update and display last fetched time
     this.setupAutoUpdate();
@@ -74,6 +79,7 @@ new (class ExtensionPopup {
     this.enableStylingSwitch.checked =
       this.globalSettings.enableStyling ?? true;
     this.autoUpdateSwitch.checked = this.globalSettings.autoUpdate ?? false;
+    this.forceStylingSwitch.checked = this.globalSettings.forceStyling ?? false;
     this.loadCurrentSiteFeatures();
   }
 
@@ -87,6 +93,7 @@ new (class ExtensionPopup {
       enableStyling: true,
       autoUpdate: false,
       lastFetchedTime: null,
+      forceStyling: false,
     };
 
     // Load site-specific settings if on a specific site
@@ -103,6 +110,7 @@ new (class ExtensionPopup {
     // Save global settings
     this.globalSettings.enableStyling = this.enableStylingSwitch.checked;
     this.globalSettings.autoUpdate = this.autoUpdateSwitch.checked;
+    this.globalSettings.forceStyling = this.forceStylingSwitch.checked;
 
     browser.storage.local
       .set({
@@ -150,11 +158,17 @@ new (class ExtensionPopup {
 
       this.currentSiteFeatures.innerHTML = "";
 
-      const currentSiteKey = Object.keys(styles).find((site) =>
+      let currentSiteKey = Object.keys(styles).find((site) =>
         this.isCurrentSite(site.replace(".css", ""))
       );
 
-      if (!currentSiteKey) {
+      if (!currentSiteKey && this.globalSettings.forceStyling) {
+        currentSiteKey = Object.keys(styles).find(
+          (site) => site === "example.com.css"
+        );
+      }
+
+      if (!currentSiteKey || currentSiteKey === "example.com.css") {
         const requestThemeButton = document.createElement("button");
         requestThemeButton.className = "action-button primary";
         requestThemeButton.innerHTML = `Request Theme for ${this.currentSiteHostname}`;
@@ -164,6 +178,9 @@ new (class ExtensionPopup {
         });
 
         this.currentSiteFeatures.appendChild(requestThemeButton);
+      }
+
+      if (!currentSiteKey) {
         return;
       }