Fixed incorrect website matching

1 files changed, 76 insertions, 61 deletions

diff --git a/popup/popup.js b/popup/popup.js
index 1367a5a..d6495d5 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,4 +1,4 @@
-new(class ExtensionPopup {
+new (class ExtensionPopup {
   BROWSER_STORAGE_KEY = "transparentZenSettings";
   browserStorageSettings = {};
   enableStylingSwitch = document.getElementById("enable-styling");
@@ -6,7 +6,7 @@ new(class ExtensionPopup {
   websitesList = document.getElementById("websites-list");
   currentSiteFeatures = document.getElementById("current-site-toggles");
   currentSiteHostname = "";
-  
+
   constructor() {
     this.loadSettings().then((settings) => {
       if (settings) {
@@ -24,10 +24,13 @@ new(class ExtensionPopup {
 
     this.setupContentScriptInjection();
   }
-  
+
   async getCurrentTabInfo() {
     try {
-      const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+      const tabs = await browser.tabs.query({
+        active: true,
+        currentWindow: true,
+      });
       if (tabs.length > 0) {
         const url = new URL(tabs[0].url);
         this.currentSiteHostname = url.hostname;
@@ -37,7 +40,7 @@ new(class ExtensionPopup {
       console.error("Error getting current tab info:", error);
     }
   }
-  
+
   bindEvents() {
     this.enableStylingSwitch.addEventListener("change", () => {
       this.saveSettings();
@@ -45,104 +48,114 @@ new(class ExtensionPopup {
     });
 
     this.currentSiteFeatures.addEventListener("change", (event) => {
-      if (event.target.type === 'checkbox') {
+      if (event.target.type === "checkbox") {
         this.saveSettings();
         this.updateActiveTabStyling();
       }
     });
   }
-  
+
   restoreSettings() {
     if (this.browserStorageSettings.enableStyling !== undefined) {
-      this.enableStylingSwitch.checked = this.browserStorageSettings.enableStyling;
+      this.enableStylingSwitch.checked =
+        this.browserStorageSettings.enableStyling;
     }
     this.loadCurrentSiteFeatures();
     this.loadWebsitesList();
   }
-  
+
   async loadSettings() {
     const settings = await browser.storage.local.get(this.BROWSER_STORAGE_KEY);
     console.info("Settings loaded", settings?.[this.BROWSER_STORAGE_KEY]);
     return settings?.[this.BROWSER_STORAGE_KEY] || {};
   }
-  
+
   saveSettings() {
-    this.browserStorageSettings.enableStyling = this.enableStylingSwitch.checked;
-    
+    this.browserStorageSettings.enableStyling =
+      this.enableStylingSwitch.checked;
+
     const featureSettings = {};
     this.currentSiteFeatures
       .querySelectorAll("input[type=checkbox]")
       .forEach((checkbox) => {
-        const [site, feature] = checkbox.name.split('|');
+        const [site, feature] = checkbox.name.split("|");
         if (!featureSettings[site]) {
           featureSettings[site] = {};
         }
         featureSettings[site][feature] = checkbox.checked;
       });
-    
+
     this.browserStorageSettings.featureSettings = featureSettings;
-    
+
     browser.storage.local.set({
       [this.BROWSER_STORAGE_KEY]: this.browserStorageSettings,
     });
-    
+
     console.info("Settings saved", this.browserStorageSettings);
   }
-  
+
   async loadCurrentSiteFeatures() {
     try {
       const stylesData = await browser.storage.local.get("styles");
       const styles = stylesData.styles?.website || {};
-      
+
       this.currentSiteFeatures.innerHTML = "";
-      
-      const currentSiteKey = Object.keys(styles).find(site => 
+
+      const currentSiteKey = Object.keys(styles).find((site) =>
         this.isCurrentSite(site.replace(".css", ""))
       );
-      
+
       if (!currentSiteKey) {
-        this.currentSiteFeatures.innerHTML = "<div class='feature-toggle'>No styles available for this site.</div>";
+        this.currentSiteFeatures.innerHTML =
+          "<div class='feature-toggle'>No styles available for this site.</div>";
         return;
       }
-      
+
       const features = styles[currentSiteKey];
       for (const [feature, css] of Object.entries(features)) {
-        const isChecked = this.browserStorageSettings.featureSettings?.[currentSiteKey]?.[feature] ?? true;
-        
+        const isChecked =
+          this.browserStorageSettings.featureSettings?.[currentSiteKey]?.[
+            feature
+          ] ?? true;
+
         const featureToggle = document.createElement("div");
         featureToggle.className = "feature-toggle";
         featureToggle.innerHTML = `
           <span class="feature-name">${feature}</span>
           <label class="toggle-switch">
-            <input type="checkbox" name="${currentSiteKey}|${feature}" ${isChecked ? "checked" : ""}>
+            <input type="checkbox" name="${currentSiteKey}|${feature}" ${
+          isChecked ? "checked" : ""
+        }>
             <span class="slider round"></span>
           </label>
         `;
-        
+
         this.currentSiteFeatures.appendChild(featureToggle);
       }
     } catch (error) {
       console.error("Error loading current site features:", error);
-      this.currentSiteFeatures.innerHTML = "<div class='feature-toggle'>Error loading features.</div>";
+      this.currentSiteFeatures.innerHTML =
+        "<div class='feature-toggle'>Error loading features.</div>";
     }
   }
-  
+
   async loadWebsitesList() {
     try {
       const stylesData = await browser.storage.local.get("styles");
       const styles = stylesData.styles?.website || {};
-      
+
       this.websitesList.innerHTML = "";
-      
+
       const websites = Object.keys(styles);
-      
+
       if (websites.length === 0) {
         const listItem = document.createElement("li");
-        listItem.textContent = "No styles available. Click 'Refetch latest styles' to update.";
+        listItem.textContent =
+          "No styles available. Click 'Refetch latest styles' to update.";
         this.websitesList.appendChild(listItem);
         return;
       }
-      
+
       for (const site of websites) {
         const displayName = site.replace(/\.css$/, "");
         const listItem = document.createElement("li");
@@ -151,20 +164,18 @@ new(class ExtensionPopup {
       }
     } catch (error) {
       console.error("Error loading websites list:", error);
-      this.websitesList.innerHTML = "<li>Error loading websites list. Please try refetching styles.</li>";
+      this.websitesList.innerHTML =
+        "<li>Error loading websites list. Please try refetching styles.</li>";
     }
   }
-  
+
   isCurrentSite(siteName) {
     if (!this.currentSiteHostname) return false;
     if (this.currentSiteHostname === siteName) return true;
-    if (this.currentSiteHostname.startsWith("www.")) {
-      const nonWww = this.currentSiteHostname.replace("www.", "");
-      if (nonWww === siteName) return true;
-    }
+    if (this.currentSiteHostname === `www.${siteName}`) return true;
     return false;
   }
-  
+
   async refetchCSS() {
     this.refetchCSSButton.textContent = "Fetching...";
     try {
@@ -179,11 +190,11 @@ new(class ExtensionPopup {
       if (!response.ok) throw new Error("Failed to fetch styles.json");
       const styles = await response.json();
       await browser.storage.local.set({ styles });
-      
+
       this.loadCurrentSiteFeatures();
       this.loadWebsitesList();
       this.updateActiveTabStyling();
-      
+
       this.refetchCSSButton.textContent = "Done!";
       setTimeout(() => {
         this.refetchCSSButton.textContent = "Refetch latest styles";
@@ -197,46 +208,49 @@ new(class ExtensionPopup {
       console.error("Error refetching styles:", error);
     }
   }
-  
+
   setupContentScriptInjection() {
     browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
-      if (changeInfo.status === 'complete') {
+      if (changeInfo.status === "complete") {
         this.applyCSSToTab(tab);
       }
     });
     this.updateAllTabs();
   }
-  
+
   async updateAllTabs() {
     const tabs = await browser.tabs.query({});
     for (const tab of tabs) {
       this.applyCSSToTab(tab);
     }
   }
-  
+
   async updateActiveTabStyling() {
-    const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+    const tabs = await browser.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
     if (tabs.length > 0) {
       this.applyCSSToTab(tabs[0]);
     }
   }
-  
+
   async applyCSSToTab(tab) {
     const url = new URL(tab.url);
     const hostname = url.hostname;
-    
+
     try {
-      await browser.tabs.removeCSS(tab.id, { 
-        code: "/* Placeholder for removing CSS */" 
+      await browser.tabs.removeCSS(tab.id, {
+        code: "/* Placeholder for removing CSS */",
       });
     } catch (error) {}
-    
+
     if (!this.shouldApplyCSS(hostname)) return;
-    
+
     try {
       const stylesData = await browser.storage.local.get("styles");
       const styles = stylesData.styles?.website || {};
-      
+
       let siteKey = null;
       for (const site of Object.keys(styles)) {
         const siteName = site.replace(/\.css$/, "");
@@ -245,18 +259,19 @@ new(class ExtensionPopup {
           break;
         }
       }
-      
+
       if (siteKey && styles[siteKey]) {
         const features = styles[siteKey];
-        const featureSettings = this.browserStorageSettings.featureSettings?.[siteKey] || {};
-        
+        const featureSettings =
+          this.browserStorageSettings.featureSettings?.[siteKey] || {};
+
         let combinedCSS = "";
         for (const [feature, css] of Object.entries(features)) {
           if (featureSettings[feature] !== false) {
             combinedCSS += css + "\n";
           }
         }
-        
+
         if (combinedCSS) {
           await browser.tabs.insertCSS(tab.id, { code: combinedCSS });
           console.info(`Applied CSS to ${hostname}`);
@@ -266,8 +281,8 @@ new(class ExtensionPopup {
       console.error(`Error applying CSS to ${hostname}:`, error);
     }
   }
-  
+
   shouldApplyCSS(hostname) {
     return this.browserStorageSettings.enableStyling !== false;
   }
-})();
\ No newline at end of file
+})();