summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--background.js47
-rw-r--r--data-viewer/data-viewer.css11
-rw-r--r--data-viewer/data-viewer.js111
-rw-r--r--popup/popup.html7
-rw-r--r--popup/popup.js57
-rw-r--r--shared/constants.js1
-rw-r--r--shared/defaults.js1
7 files changed, 175 insertions, 60 deletions
diff --git a/background.js b/background.js
index 4d5245d..3e809ff 100644
--- a/background.js
+++ b/background.js
@@ -1,5 +1,6 @@
let SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
let SKIP_THEMING_KEY = "skipThemingList";
+let FALLBACK_BACKGROUND_KEY = "fallbackBackgroundList";
let BROWSER_STORAGE_KEY = "transparentZenSettings";
let logging = true; // Enable logging for debugging
@@ -29,6 +30,7 @@ const DEFAULT_SETTINGS = {
disableTransparency: false, // Don't disable transparency by default
disableHover: false, // Don't disable hover effects by default
disableFooter: false, // Don't disable footers by default
+ fallbackBackgroundList: [], // Empty array for fallback background sites
};
// Helper function to normalize hostnames by removing www. prefix
@@ -704,8 +706,14 @@ async function applyCSS(tabId, hostname, features) {
JSON.stringify(globalSettings)
);
- // UPDATED: Use normalized hostname for consistent settings retrieval
+ // Check if this site is in the fallback background list
+ const fallbackData = await browser.storage.local.get(FALLBACK_BACKGROUND_KEY);
+ const fallbackBackgroundList = fallbackData[FALLBACK_BACKGROUND_KEY] || [];
const normalizedHostname = normalizeHostname(hostname);
+ const hasFallbackBackground =
+ fallbackBackgroundList.includes(normalizedHostname);
+
+ // UPDATED: Use normalized hostname for consistent settings retrieval
const siteKey = `transparentZenSettings.${normalizedHostname}`;
const siteData = await browser.storage.local.get(siteKey);
const featureSettings = siteData[siteKey] || {};
@@ -737,10 +745,17 @@ async function applyCSS(tabId, hostname, features) {
hasTransparencyFeature = true;
}
- // Skip any transparency feature if disableTransparency is enabled globally
- if (isTransparencyFeature && globalSettings.disableTransparency) {
+ // Skip transparency if globally disabled OR if this site has fallback background enabled
+ if (
+ isTransparencyFeature &&
+ (globalSettings.disableTransparency || hasFallbackBackground)
+ ) {
console.log(
- `DEBUG: Skipping transparency feature ${feature} (globally disabled)`
+ `DEBUG: Skipping transparency feature ${feature} (${
+ hasFallbackBackground
+ ? "fallback background enabled"
+ : "globally disabled"
+ })`
);
skippedTransparencyFeatures++;
transparencyDisabled = true;
@@ -784,8 +799,8 @@ async function applyCSS(tabId, hostname, features) {
console.log(`DEBUG: Including feature: ${feature}`);
}
- // If transparency is disabled (globally or at site level) and this site has transparency features,
- // add minimal background CSS
+ // If transparency is disabled (globally, by fallback background, or at site level)
+ // and this site has transparency features, add minimal background CSS
if (transparencyDisabled && hasTransparencyFeature) {
console.log(
"DEBUG: Adding minimal background CSS due to disabled transparency"
@@ -799,6 +814,18 @@ html {
combinedCSS += minimalBackgroundCSS;
}
+ // If fallback background is enabled for this site, always add the fallback CSS
+ if (hasFallbackBackground) {
+ console.log("DEBUG: Adding fallback background CSS for this site");
+ const fallbackBackgroundCSS = `
+/* ZenInternet: Fallback background for this site */
+html{
+ background-color: light-dark(#fff, #111);
+}
+`;
+ combinedCSS += fallbackBackgroundCSS;
+ }
+
console.log(`DEBUG: CSS application summary:
- Included features: ${includedFeatures}
- Skipped transparency (global): ${skippedTransparencyFeatures}
@@ -807,6 +834,7 @@ html {
- Skipped (site disabled): ${skippedDisabledFeatures}
- Has transparency feature: ${hasTransparencyFeature}
- Transparency disabled: ${transparencyDisabled}
+ - Has fallback background: ${hasFallbackBackground}
- Final CSS length: ${combinedCSS.length} characters`);
if (combinedCSS.trim()) {
@@ -957,6 +985,13 @@ async function initializeExtension() {
await browser.storage.local.set({ [SKIP_THEMING_KEY]: [] });
}
+ const fallbackBackgroundData = await browser.storage.local.get(
+ FALLBACK_BACKGROUND_KEY
+ );
+ if (!fallbackBackgroundData[FALLBACK_BACKGROUND_KEY]) {
+ await browser.storage.local.set({ [FALLBACK_BACKGROUND_KEY]: [] });
+ }
+
// Preload styles immediately
await preloadStyles();
diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css
index e935ce0..3add494 100644
--- a/data-viewer/data-viewer.css
+++ b/data-viewer/data-viewer.css
@@ -440,8 +440,8 @@ body {
/* Styling for the website lists section */
.tables-container {
display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 20px;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 16px;
margin-top: 16px;
}
@@ -597,6 +597,13 @@ body {
}
/* Add responsive adjustments for mobile */
+@media (max-width: 1024px) {
+ .tables-container {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ }
+}
+
@media (max-width: 768px) {
.repository-url-buttons {
flex-direction: column;
diff --git a/data-viewer/data-viewer.js b/data-viewer/data-viewer.js
index c1b3fec..be1b798 100644
--- a/data-viewer/data-viewer.js
+++ b/data-viewer/data-viewer.js
@@ -2,6 +2,7 @@ document.addEventListener("DOMContentLoaded", function () {
const BROWSER_STORAGE_KEY = "transparentZenSettings";
const SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
const SKIP_THEMING_KEY = "skipThemingList";
+ const FALLBACK_BACKGROUND_KEY = "fallbackBackgroundList";
const REPOSITORY_URL_KEY = "stylesRepositoryUrl";
const DEFAULT_REPOSITORY_URL =
"https://sameerasw.github.io/my-internet/styles.json";
@@ -260,15 +261,24 @@ document.addEventListener("DOMContentLoaded", function () {
// Retrieve all storage data to find site-specific settings
const allData = await browser.storage.local.get(null);
+ // Get the fallback background list once
+ const fallbackBackgroundList = allData[FALLBACK_BACKGROUND_KEY] || [];
+
// Extract only the settings we want to backup
const settingsToBackup = {
[BROWSER_STORAGE_KEY]: allData[BROWSER_STORAGE_KEY] || {},
[SKIP_FORCE_THEMING_KEY]: allData[SKIP_FORCE_THEMING_KEY] || [],
[SKIP_THEMING_KEY]: allData[SKIP_THEMING_KEY] || [],
+ [FALLBACK_BACKGROUND_KEY]: fallbackBackgroundList,
[REPOSITORY_URL_KEY]:
allData[REPOSITORY_URL_KEY] || DEFAULT_REPOSITORY_URL,
};
+ // Remove fallbackBackgroundList from global settings if it exists there
+ if (settingsToBackup[BROWSER_STORAGE_KEY].fallbackBackgroundList) {
+ delete settingsToBackup[BROWSER_STORAGE_KEY].fallbackBackgroundList;
+ }
+
// Also extract site-specific settings (keys that start with BROWSER_STORAGE_KEY.)
const siteSpecificSettings = {};
for (const [key, value] of Object.entries(allData)) {
@@ -412,33 +422,26 @@ document.addEventListener("DOMContentLoaded", function () {
async function loadAllData() {
try {
// Load all data from storage
- const data = await browser.storage.local.get(null);
+ const allData = await browser.storage.local.get(null);
- // Display global settings
- const globalSettings = data[BROWSER_STORAGE_KEY] || {};
- displayGlobalSettings(globalSettings);
+ // Extract global settings
+ const globalSettings = allData[BROWSER_STORAGE_KEY] || {};
- // Set the toggle states
- disableTransparencyToggle.checked =
- globalSettings.disableTransparency || false;
- // Set new toggle states
- disableHoverToggle.checked = globalSettings.disableHover || false;
- disableFooterToggle.checked = globalSettings.disableFooter || false;
+ // Extract skip lists
+ const skipForceList = allData[SKIP_FORCE_THEMING_KEY] || [];
+ const skipThemingList = allData[SKIP_THEMING_KEY] || [];
+ const fallbackBackgroundList = allData[FALLBACK_BACKGROUND_KEY] || [];
- // Display skip/enable lists for both forced and non-forced websites
- const skipForceList = data[SKIP_FORCE_THEMING_KEY] || [];
- const skipThemingList = data[SKIP_THEMING_KEY] || [];
+ // Display the data
+ displayGlobalSettings(globalSettings);
displayCombinedSkipLists(
skipForceList,
skipThemingList,
- globalSettings.whitelistMode,
- globalSettings.whitelistStyleMode
+ fallbackBackgroundList,
+ globalSettings.whitelistMode || false,
+ globalSettings.whitelistStyleMode || false
);
-
- // Display combined websites and settings
- displayCombinedWebsiteData(data);
-
- console.info("Data loaded successfully");
+ displayCombinedWebsiteData(allData);
} catch (error) {
console.error("Error loading data:", error);
}
@@ -489,6 +492,7 @@ document.addEventListener("DOMContentLoaded", function () {
function displayCombinedSkipLists(
skipForceList,
skipThemingList,
+ fallbackBackgroundList,
isWhitelistMode,
isWhitelistStyleMode
) {
@@ -519,29 +523,24 @@ document.addEventListener("DOMContentLoaded", function () {
skipListElement.appendChild(titleSection);
- // Add Clear Both Lists button
- if (skipForceList.length > 0 || skipThemingList.length > 0) {
- const clearListButton = document.createElement("button");
- clearListButton.classList.add(
+ // Add Clear All Lists button
+ if (
+ skipForceList.length > 0 ||
+ skipThemingList.length > 0 ||
+ fallbackBackgroundList.length > 0
+ ) {
+ const clearAllButton = document.createElement("button");
+ clearAllButton.classList.add(
"action-button",
- "secondary",
+ "danger",
"clear-list-button"
);
- clearListButton.innerHTML =
- '<i class="fas fa-trash"></i> Clear All Website Lists';
- clearListButton.addEventListener("click", function () {
- if (
- confirm(
- `Are you sure you want to clear ALL website lists? This will reset both Forced and Regular styling lists and may affect how styling is applied to websites.`
- )
- ) {
- clearAllSkipLists();
- }
- });
- skipListElement.appendChild(clearListButton);
+ clearAllButton.innerHTML = '<i class="fas fa-trash"></i> Clear All Lists';
+ clearAllButton.addEventListener("click", clearAllSkipLists);
+ skipListElement.appendChild(clearAllButton);
}
- // Create container for the two tables
+ // Create container for the three tables
const tablesContainer = document.createElement("div");
tablesContainer.className = "tables-container";
@@ -567,8 +566,18 @@ document.addEventListener("DOMContentLoaded", function () {
SKIP_THEMING_KEY
);
+ // Create fallback background list
+ const fallbackListSection = createSingleListSection(
+ fallbackBackgroundList,
+ false, // Fallback background is not whitelist/blacklist based
+ "Fallback Background List",
+ "Sites where a default background added, no transparency",
+ FALLBACK_BACKGROUND_KEY
+ );
+
tablesContainer.appendChild(forceListSection);
tablesContainer.appendChild(regularListSection);
+ tablesContainer.appendChild(fallbackListSection);
skipListElement.appendChild(tablesContainer);
}
@@ -664,18 +673,22 @@ document.addEventListener("DOMContentLoaded", function () {
async function clearAllSkipLists() {
try {
- // Clear both lists at once
- await browser.storage.local.remove([
- SKIP_FORCE_THEMING_KEY,
- SKIP_THEMING_KEY,
- ]);
- alert("All website lists have been cleared successfully.");
- loadAllData(); // Reload data to reflect changes
+ if (
+ confirm(
+ "Are you sure you want to clear ALL website lists? This will remove all entries from:\n- Force Styling List\n- Regular Styling List\n- Fallback Background List\n\nThis action cannot be undone."
+ )
+ ) {
+ await browser.storage.local.set({
+ [SKIP_FORCE_THEMING_KEY]: [],
+ [SKIP_THEMING_KEY]: [],
+ [FALLBACK_BACKGROUND_KEY]: [],
+ });
+ loadAllData(); // Reload to show empty lists
+ console.log("All skip lists cleared");
+ }
} catch (error) {
- console.error("Error clearing lists:", error);
- alert(
- "An error occurred while trying to clear the lists: " + error.message
- );
+ console.error("Error clearing skip lists:", error);
+ alert("An error occurred while clearing the lists: " + error.message);
}
}
diff --git a/popup/popup.html b/popup/popup.html
index 2b8c48d..d16cb88 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -114,6 +114,13 @@
</label>
<span id="site-toggle-label" class="toggle-label">Skip Forcing for this Site</span>
</div>
+ <div class="toggle-container">
+ <label class="toggle-switch">
+ <input type="checkbox" id="fallback-background">
+ <span class="slider round"></span>
+ </label>
+ <span class="toggle-label">Fallback Background</span>
+ </div>
</div>
</div>
diff --git a/popup/popup.js b/popup/popup.js
index 9b2cd29..3dccd47 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,6 +1,7 @@
let logging = false;
let SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
let SKIP_THEMING_KEY = "skipThemingList";
+let FALLBACK_BACKGROUND_KEY = "fallbackBackgroundList";
// Default settings to use when values are missing
const DEFAULT_SETTINGS = {
@@ -12,6 +13,7 @@ const DEFAULT_SETTINGS = {
disableTransparency: false, // Don't disable transparency by default
disableHover: false, // Don't disable hover effects by default
disableFooter: false, // Don't disable footers by default
+ fallbackBackgroundList: [], // Empty array for fallback background sites
};
// Helper function to ensure all required settings exist
@@ -62,6 +64,8 @@ new (class ExtensionPopup {
modeIndicator = document.getElementById("mode-indicator");
whatsNewButton = document.getElementById("whats-new");
howToUseButton = document.getElementById("how-to-use");
+ fallbackBackgroundSwitch = document.getElementById("fallback-background");
+ fallbackBackgroundList = [];
constructor() {
if (logging) console.log("Initializing ExtensionPopup");
@@ -69,9 +73,11 @@ new (class ExtensionPopup {
this.loadSettings().then(() => {
this.loadSkipForceThemingList().then(() => {
this.loadSkipThemingList().then(() => {
- this.getCurrentTabInfo().then(() => {
- this.restoreSettings();
- this.bindEvents();
+ this.loadFallbackBackgroundList().then(() => {
+ this.getCurrentTabInfo().then(() => {
+ this.restoreSettings();
+ this.bindEvents();
+ });
});
});
});
@@ -190,6 +196,10 @@ new (class ExtensionPopup {
this.saveSkipThemingList();
});
+ this.fallbackBackgroundSwitch.addEventListener("change", () => {
+ this.saveFallbackBackgroundList();
+ });
+
this.reloadButton.addEventListener("click", this.reloadPage.bind(this));
}
@@ -217,6 +227,11 @@ new (class ExtensionPopup {
normalizeHostname(this.currentSiteHostname)
);
+ this.fallbackBackgroundSwitch.checked =
+ this.fallbackBackgroundList.includes(
+ normalizeHostname(this.currentSiteHostname)
+ );
+
this.loadCurrentSiteFeatures();
}
@@ -346,6 +361,17 @@ new (class ExtensionPopup {
}
}
+ async loadFallbackBackgroundList() {
+ const data = await browser.storage.local.get(FALLBACK_BACKGROUND_KEY);
+ this.fallbackBackgroundList = data[FALLBACK_BACKGROUND_KEY] || [];
+
+ // Initialize with empty array if missing
+ if (!data[FALLBACK_BACKGROUND_KEY]) {
+ await browser.storage.local.set({ [FALLBACK_BACKGROUND_KEY]: [] });
+ if (logging) console.log("Initialized empty fallback background list");
+ }
+ }
+
saveSkipForceThemingList() {
const isChecked = this.skipForceThemingSwitch.checked;
const index = this.skipForceThemingList.indexOf(
@@ -394,6 +420,31 @@ new (class ExtensionPopup {
});
}
+ saveFallbackBackgroundList() {
+ const isChecked = this.fallbackBackgroundSwitch.checked;
+ const index = this.fallbackBackgroundList.indexOf(
+ normalizeHostname(this.currentSiteHostname)
+ );
+
+ if (isChecked && index === -1) {
+ // Add to the list
+ this.fallbackBackgroundList.push(
+ normalizeHostname(this.currentSiteHostname)
+ );
+ } else if (!isChecked && index !== -1) {
+ // Remove from the list
+ this.fallbackBackgroundList.splice(index, 1);
+ }
+
+ browser.storage.local
+ .set({
+ [FALLBACK_BACKGROUND_KEY]: this.fallbackBackgroundList,
+ })
+ .then(() => {
+ this.updateActiveTabStyling();
+ });
+ }
+
async loadCurrentSiteFeatures() {
if (logging) console.log("loadCurrentSiteFeatures called");
try {
diff --git a/shared/constants.js b/shared/constants.js
index 132bbec..03c7bc3 100644
--- a/shared/constants.js
+++ b/shared/constants.js
@@ -1,2 +1,3 @@
export const BROWSER_STORAGE_KEY = "transparentZenSettings";
export const SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
+export const FALLBACK_BACKGROUND_KEY = "fallbackBackgroundList";
diff --git a/shared/defaults.js b/shared/defaults.js
index 8e2f3c9..db637fc 100644
--- a/shared/defaults.js
+++ b/shared/defaults.js
@@ -12,6 +12,7 @@ export const DEFAULT_SETTINGS = {
disableTransparency: false, // Don't disable transparency by default
disableHover: false, // Don't disable hover effects by default
disableFooter: false, // Don't disable footers by default
+ fallbackBackgroundList: [], // Empty array for fallback background sites
};
/**
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-08 11:21:48 +0000