diff options
| -rw-r--r-- | background.js | 11 | ||||
| -rw-r--r-- | inject-css.js | 11 | ||||
| -rw-r--r-- | popup/popup.css | 20 | ||||
| -rw-r--r-- | popup/popup.html | 32 | ||||
| -rw-r--r-- | popup/popup.js | 59 | ||||
| -rw-r--r-- | shared/constants.js | 3 |
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"; |