@gxp-dev/tools 2.0.63 → 2.0.64

package/browser-extensions/chrome/popup.js

@@ -1,59 +1,63 @@
 document.addEventListener("DOMContentLoaded", async function () {
 	// Get all DOM elements
-	const toggleButton = document.getElementById("toggleButton");
-	const toggleText = document.getElementById("toggleText");
-	const saveButton = document.getElementById("saveButton");
-	const statusDiv = document.getElementById("status");
-	const maskingModeCheckbox = document.getElementById("maskingMode");
-	const clearCacheOnEnableCheckbox = document.getElementById("clearCacheOnEnable");
-	const disableCacheForRedirectsCheckbox = document.getElementById("disableCacheForRedirects");
-	const clearCacheButton = document.getElementById("clearCacheButton");
+	const toggleButton = document.getElementById("toggleButton")
+	const toggleText = document.getElementById("toggleText")
+	const saveButton = document.getElementById("saveButton")
+	const statusDiv = document.getElementById("status")
+	const maskingModeCheckbox = document.getElementById("maskingMode")
+	const clearCacheOnEnableCheckbox =
+		document.getElementById("clearCacheOnEnable")
+	const disableCacheForRedirectsCheckbox = document.getElementById(
+		"disableCacheForRedirects",
+	)
+	const clearCacheButton = document.getElementById("clearCacheButton")
 
 	// Tab elements
-	const tabs = document.querySelectorAll(".tab");
-	const tabContents = document.querySelectorAll(".tab-content");
-	const jsBadge = document.getElementById("jsBadge");
-	const cssBadge = document.getElementById("cssBadge");
+	const tabs = document.querySelectorAll(".tab")
+	const tabContents = document.querySelectorAll(".tab-content")
+	const jsBadge = document.getElementById("jsBadge")
+	const cssBadge = document.getElementById("cssBadge")
 
 	// Inspector elements
-	const inspectorCard = document.getElementById("inspectorCard");
-	const inspectorBadge = document.getElementById("inspectorBadge");
+	const inspectorCard = document.getElementById("inspectorCard")
+	const inspectorBadge = document.getElementById("inspectorBadge")
 
 	// Inspector state
-	let inspectorEnabled = false;
+	let inspectorEnabled = false
 
 	// JS Rule elements
-	const jsRuleEnabled = document.getElementById("jsRuleEnabled");
-	const jsRuleContent = document.getElementById("jsRuleContent");
-	const jsRedirectUrl = document.getElementById("jsRedirectUrl");
-	const jsCustomPattern = document.getElementById("jsCustomPattern");
-	const jsPatternDisplay = document.getElementById("jsPatternDisplay");
-	const jsCustomPatternInput = document.getElementById("jsCustomPatternInput");
+	const jsRuleEnabled = document.getElementById("jsRuleEnabled")
+	const jsRuleContent = document.getElementById("jsRuleContent")
+	const jsRedirectUrl = document.getElementById("jsRedirectUrl")
+	const jsCustomPattern = document.getElementById("jsCustomPattern")
+	const jsPatternDisplay = document.getElementById("jsPatternDisplay")
+	const jsCustomPatternInput = document.getElementById("jsCustomPatternInput")
 
 	// CSS Rule elements
-	const cssRuleEnabled = document.getElementById("cssRuleEnabled");
-	const cssRuleContent = document.getElementById("cssRuleContent");
-	const cssRedirectUrl = document.getElementById("cssRedirectUrl");
-	const cssReturnBlank = document.getElementById("cssReturnBlank");
-	const cssRedirectSection = document.getElementById("cssRedirectSection");
-	const cssCustomPattern = document.getElementById("cssCustomPattern");
-	const cssPatternDisplay = document.getElementById("cssPatternDisplay");
-	const cssCustomPatternInput = document.getElementById("cssCustomPatternInput");
+	const cssRuleEnabled = document.getElementById("cssRuleEnabled")
+	const cssRuleContent = document.getElementById("cssRuleContent")
+	const cssRedirectUrl = document.getElementById("cssRedirectUrl")
+	const cssReturnBlank = document.getElementById("cssReturnBlank")
+	const cssRedirectSection = document.getElementById("cssRedirectSection")
+	const cssCustomPattern = document.getElementById("cssCustomPattern")
+	const cssPatternDisplay = document.getElementById("cssPatternDisplay")
+	const cssCustomPatternInput = document.getElementById("cssCustomPatternInput")
 
 	// Load environment-based defaults from defaults.json (generated by launch script)
-	let envDefaults = {};
+	let envDefaults = {}
 	try {
-		const response = await fetch(chrome.runtime.getURL("defaults.json"));
+		const response = await fetch(chrome.runtime.getURL("defaults.json"))
 		if (response.ok) {
-			envDefaults = await response.json();
-			console.log("Loaded environment defaults:", envDefaults);
+			envDefaults = await response.json()
+			console.log("Loaded environment defaults:", envDefaults)
 		}
 	} catch (error) {
-		console.log("No environment defaults found, using hardcoded defaults");
+		console.log("No environment defaults found, using hardcoded defaults")
 	}
 
 	// Build default redirect URL from env defaults or fallback
-	const defaultRedirectUrl = envDefaults.jsRedirectUrl || "https://localhost:3060/src/Plugin.vue";
+	const defaultRedirectUrl =
+		envDefaults.jsRedirectUrl || "https://localhost:3060/src/Plugin.vue"
 
 	// Default configuration (merged with environment defaults)
 	const defaultConfig = {
@@ -64,13 +68,15 @@ document.addEventListener("DOMContentLoaded", async function () {
 		rules: {
 			js: {
 				enabled: true,
-				pattern: "uploads\\/plugin-version\\/\\d+\\/file_name\\/.*\\.js(\\?.*)?",
+				pattern:
+					"uploads\\/plugin-version\\/\\d+\\/file_name\\/.*\\.js(\\?.*)?",
 				redirectUrl: defaultRedirectUrl,
 				useCustomPattern: envDefaults.jsUseCustomPattern || false,
 			},
 			css: {
 				enabled: envDefaults.cssRuleEnabled !== false,
-				pattern: "uploads\\/plugin-version\\/\\d+\\/style_file_name\\/.*\\.css(\\?.*)?",
+				pattern:
+					"uploads\\/plugin-version\\/\\d+\\/style_file_name\\/.*\\.css(\\?.*)?",
 				redirectUrl: envDefaults.cssRedirectUrl || "",
 				returnBlank: envDefaults.cssReturnBlank !== false,
 				useCustomPattern: envDefaults.cssUseCustomPattern || false,
@@ -79,59 +85,61 @@ document.addEventListener("DOMContentLoaded", async function () {
 		maskingMode: false,
 		clearCacheOnEnable: envDefaults.clearCacheOnEnable !== false,
 		disableCacheForRedirects: envDefaults.disableCacheForRedirects !== false,
-	};
+	}
 
 	// Load current configuration
-	let config = {};
+	let config = {}
 	try {
-		const result = await chrome.storage.sync.get(null);
+		const result = await chrome.storage.sync.get(null)
 
 		// Check if defaults.json has enabled=true (launched from CLI)
 		// In this case, we should apply the CLI defaults over stored config
-		const cliLaunched = envDefaults.enabled === true;
+		const cliLaunched = envDefaults.enabled === true
 
 		if (!result || Object.keys(result).length === 0) {
-			config = defaultConfig;
-			await chrome.storage.sync.set(config);
-			console.log("Initialized with environment defaults");
+			config = defaultConfig
+			await chrome.storage.sync.set(config)
+			console.log("Initialized with environment defaults")
 		} else if (cliLaunched) {
 			// CLI launch - apply defaults over stored config for key settings
-			config = { ...defaultConfig, ...result };
-			config.enabled = true; // Force enabled when launched from CLI
-			config = migrateConfig(config, defaultConfig);
+			config = { ...defaultConfig, ...result }
+			config.enabled = true // Force enabled when launched from CLI
+			config = migrateConfig(config, defaultConfig)
 			// Also ensure rules use CLI defaults
 			if (config.rules) {
-				config.rules.js.useCustomPattern = envDefaults.jsUseCustomPattern !== false;
-				config.rules.css.useCustomPattern = envDefaults.cssUseCustomPattern !== false;
-				config.rules.css.enabled = envDefaults.cssRuleEnabled !== false;
-				config.rules.css.returnBlank = envDefaults.cssReturnBlank !== false;
+				config.rules.js.useCustomPattern =
+					envDefaults.jsUseCustomPattern !== false
+				config.rules.css.useCustomPattern =
+					envDefaults.cssUseCustomPattern !== false
+				config.rules.css.enabled = envDefaults.cssRuleEnabled !== false
+				config.rules.css.returnBlank = envDefaults.cssReturnBlank !== false
 			}
-			await chrome.storage.sync.set(config);
-			console.log("Applied CLI defaults over stored config");
+			await chrome.storage.sync.set(config)
+			console.log("Applied CLI defaults over stored config")
 		} else {
-			config = { ...defaultConfig, ...result };
-			config = migrateConfig(config, defaultConfig);
+			config = { ...defaultConfig, ...result }
+			config = migrateConfig(config, defaultConfig)
 		}
 	} catch (error) {
-		console.error("Error loading config:", error);
-		config = defaultConfig;
+		console.error("Error loading config:", error)
+		config = defaultConfig
 	}
 
 	// Initialize UI
-	updateUI();
-	updatePatternDisplays();
-	setupTabNavigation();
+	updateUI()
+	updatePatternDisplays()
+	setupTabNavigation()
 
 	// If CLI launched and config is enabled, notify background script to activate
 	if (config.enabled) {
 		chrome.runtime.sendMessage({
 			action: "updateConfig",
 			config: config,
-		});
+		})
 		chrome.runtime.sendMessage({
 			action: "toggleProxy",
 			enabled: true,
-		});
+		})
 	}
 
 	function migrateConfig(config, defaults = defaultConfig) {
@@ -141,7 +149,8 @@ document.addEventListener("DOMContentLoaded", async function () {
 					enabled: true,
 					pattern: config.urlPattern || defaults.rules.js.pattern,
 					redirectUrl: config.redirectUrl || defaults.rules.js.redirectUrl,
-					useCustomPattern: config.useCustomPattern || defaults.rules.js.useCustomPattern,
+					useCustomPattern:
+						config.useCustomPattern || defaults.rules.js.useCustomPattern,
 				},
 				css: {
 					enabled: defaults.rules.css.enabled,
@@ -150,111 +159,112 @@ document.addEventListener("DOMContentLoaded", async function () {
 					returnBlank: defaults.rules.css.returnBlank,
 					useCustomPattern: defaults.rules.css.useCustomPattern,
 				},
-			};
+			}
 		}
-		return config;
+		return config
 	}
 
 	function setupTabNavigation() {
 		tabs.forEach((tab) => {
 			tab.addEventListener("click", () => {
-				const tabName = tab.dataset.tab;
+				const tabName = tab.dataset.tab
 
 				// Update active tab
-				tabs.forEach((t) => t.classList.remove("active"));
-				tab.classList.add("active");
+				tabs.forEach((t) => t.classList.remove("active"))
+				tab.classList.add("active")
 
 				// Show corresponding content
 				tabContents.forEach((content) => {
-					content.classList.remove("active");
+					content.classList.remove("active")
 					if (content.id === `${tabName}Tab`) {
-						content.classList.add("active");
+						content.classList.add("active")
 					}
-				});
-			});
-		});
+				})
+			})
+		})
 	}
 
 	function updateUI() {
 		// Update toggle button
 		if (config.enabled) {
-			toggleButton.classList.add("enabled");
-			toggleText.textContent = "ON";
+			toggleButton.classList.add("enabled")
+			toggleText.textContent = "ON"
 		} else {
-			toggleButton.classList.remove("enabled");
-			toggleText.textContent = "OFF";
+			toggleButton.classList.remove("enabled")
+			toggleText.textContent = "OFF"
 		}
 
 		// Update global settings
-		maskingModeCheckbox.checked = config.maskingMode || false;
-		clearCacheOnEnableCheckbox.checked = config.clearCacheOnEnable !== false;
-		disableCacheForRedirectsCheckbox.checked = config.disableCacheForRedirects !== false;
+		maskingModeCheckbox.checked = config.maskingMode || false
+		clearCacheOnEnableCheckbox.checked = config.clearCacheOnEnable !== false
+		disableCacheForRedirectsCheckbox.checked =
+			config.disableCacheForRedirects !== false
 
 		// Update JS rule
 		if (config.rules && config.rules.js) {
-			jsRuleEnabled.checked = config.rules.js.enabled;
-			jsRedirectUrl.value = config.rules.js.redirectUrl || "";
-			jsCustomPattern.checked = config.rules.js.useCustomPattern || false;
-			jsCustomPatternInput.value = config.rules.js.pattern || "";
+			jsRuleEnabled.checked = config.rules.js.enabled
+			jsRedirectUrl.value = config.rules.js.redirectUrl || ""
+			jsCustomPattern.checked = config.rules.js.useCustomPattern || false
+			jsCustomPatternInput.value = config.rules.js.pattern || ""
 
 			// Update JS badge
 			if (config.rules.js.enabled) {
-				jsBadge.textContent = "ON";
-				jsBadge.classList.remove("disabled");
-				jsBadge.classList.add("enabled");
-				jsRuleContent.classList.remove("rule-disabled");
+				jsBadge.textContent = "ON"
+				jsBadge.classList.remove("disabled")
+				jsBadge.classList.add("enabled")
+				jsRuleContent.classList.remove("rule-disabled")
 			} else {
-				jsBadge.textContent = "OFF";
-				jsBadge.classList.remove("enabled");
-				jsBadge.classList.add("disabled");
-				jsRuleContent.classList.add("rule-disabled");
+				jsBadge.textContent = "OFF"
+				jsBadge.classList.remove("enabled")
+				jsBadge.classList.add("disabled")
+				jsRuleContent.classList.add("rule-disabled")
 			}
 
 			// Toggle custom pattern input visibility
 			if (config.rules.js.useCustomPattern) {
-				jsCustomPatternInput.classList.add("visible");
-				jsPatternDisplay.style.display = "none";
+				jsCustomPatternInput.classList.add("visible")
+				jsPatternDisplay.style.display = "none"
 			} else {
-				jsCustomPatternInput.classList.remove("visible");
-				jsPatternDisplay.style.display = "block";
+				jsCustomPatternInput.classList.remove("visible")
+				jsPatternDisplay.style.display = "block"
 			}
 		}
 
 		// Update CSS rule
 		if (config.rules && config.rules.css) {
-			cssRuleEnabled.checked = config.rules.css.enabled;
-			cssRedirectUrl.value = config.rules.css.redirectUrl || "";
-			cssReturnBlank.checked = config.rules.css.returnBlank || false;
-			cssCustomPattern.checked = config.rules.css.useCustomPattern || false;
-			cssCustomPatternInput.value = config.rules.css.pattern || "";
+			cssRuleEnabled.checked = config.rules.css.enabled
+			cssRedirectUrl.value = config.rules.css.redirectUrl || ""
+			cssReturnBlank.checked = config.rules.css.returnBlank || false
+			cssCustomPattern.checked = config.rules.css.useCustomPattern || false
+			cssCustomPatternInput.value = config.rules.css.pattern || ""
 
 			// Update CSS badge
 			if (config.rules.css.enabled) {
-				cssBadge.textContent = "ON";
-				cssBadge.classList.remove("disabled");
-				cssBadge.classList.add("enabled");
-				cssRuleContent.classList.remove("rule-disabled");
+				cssBadge.textContent = "ON"
+				cssBadge.classList.remove("disabled")
+				cssBadge.classList.add("enabled")
+				cssRuleContent.classList.remove("rule-disabled")
 			} else {
-				cssBadge.textContent = "OFF";
-				cssBadge.classList.remove("enabled");
-				cssBadge.classList.add("disabled");
-				cssRuleContent.classList.add("rule-disabled");
+				cssBadge.textContent = "OFF"
+				cssBadge.classList.remove("enabled")
+				cssBadge.classList.add("disabled")
+				cssRuleContent.classList.add("rule-disabled")
 			}
 
 			// Toggle redirect section based on blank return setting
 			if (config.rules.css.returnBlank) {
-				cssRedirectSection.style.display = "none";
+				cssRedirectSection.style.display = "none"
 			} else {
-				cssRedirectSection.style.display = "block";
+				cssRedirectSection.style.display = "block"
 			}
 
 			// Toggle custom pattern input visibility
 			if (config.rules.css.useCustomPattern) {
-				cssCustomPatternInput.classList.add("visible");
-				cssPatternDisplay.style.display = "none";
+				cssCustomPatternInput.classList.add("visible")
+				cssPatternDisplay.style.display = "none"
 			} else {
-				cssCustomPatternInput.classList.remove("visible");
-				cssPatternDisplay.style.display = "block";
+				cssCustomPatternInput.classList.remove("visible")
+				cssPatternDisplay.style.display = "block"
 			}
 		}
 	}
@@ -263,291 +273,319 @@ document.addEventListener("DOMContentLoaded", async function () {
 		if (config.rules && config.rules.js) {
 			const jsPattern = config.rules.js.useCustomPattern
 				? config.rules.js.pattern
-				: defaultConfig.rules.js.pattern;
-			jsPatternDisplay.textContent = jsPattern;
+				: defaultConfig.rules.js.pattern
+			jsPatternDisplay.textContent = jsPattern
 		}
 
 		if (config.rules && config.rules.css) {
 			const cssPattern = config.rules.css.useCustomPattern
 				? config.rules.css.pattern
-				: defaultConfig.rules.css.pattern;
-			cssPatternDisplay.textContent = cssPattern;
+				: defaultConfig.rules.css.pattern
+			cssPatternDisplay.textContent = cssPattern
 		}
 	}
 
 	function showStatus(message, isSuccess = true) {
-		statusDiv.textContent = message;
-		statusDiv.className = `status ${isSuccess ? "success" : "error"}`;
-		statusDiv.style.display = "block";
+		statusDiv.textContent = message
+		statusDiv.className = `status ${isSuccess ? "success" : "error"}`
+		statusDiv.style.display = "block"
 
 		setTimeout(() => {
-			statusDiv.style.display = "none";
-		}, 3000);
+			statusDiv.style.display = "none"
+		}, 3000)
 	}
 
 	function validateRedirectUrl(url) {
-		if (!url || url.trim() === "") return null;
+		if (!url || url.trim() === "") return null
 
 		try {
-			new URL(url);
-			return null;
+			new URL(url)
+			return null
 		} catch {
-			if (url.includes("://")) return "Invalid URL format";
+			if (url.includes("://")) return "Invalid URL format"
 
 			try {
-				new URL("https://" + url);
-				return null;
+				new URL("https://" + url)
+				return null
 			} catch {
-				return "Invalid URL format";
+				return "Invalid URL format"
 			}
 		}
 	}
 
 	function validatePattern(pattern) {
-		if (!pattern || pattern.trim() === "") return "URL pattern is required";
+		if (!pattern || pattern.trim() === "") return "URL pattern is required"
 
 		try {
-			new RegExp(pattern);
-			return null;
+			new RegExp(pattern)
+			return null
 		} catch {
-			return "Invalid regular expression pattern";
+			return "Invalid regular expression pattern"
 		}
 	}
 
 	function normalizeUrl(url) {
-		if (!url || url.trim() === "") return "";
-		if (!url.includes("://")) return "https://" + url;
-		return url;
+		if (!url || url.trim() === "") return ""
+		if (!url.includes("://")) return "https://" + url
+		return url
 	}
 
 	// Event listeners
 	toggleButton.addEventListener("click", async function () {
-		config.enabled = !config.enabled;
+		config.enabled = !config.enabled
 
 		try {
-			await chrome.storage.sync.set({ enabled: config.enabled });
-			updateUI();
+			await chrome.storage.sync.set({ enabled: config.enabled })
+			updateUI()
 
 			chrome.runtime.sendMessage({
 				action: "toggleProxy",
 				enabled: config.enabled,
-			});
+			})
 
-			showStatus(config.enabled ? "Proxy enabled" : "Proxy disabled");
+			showStatus(config.enabled ? "Proxy enabled" : "Proxy disabled")
 		} catch (error) {
-			console.error("Error toggling proxy:", error);
-			showStatus("Error toggling proxy", false);
+			console.error("Error toggling proxy:", error)
+			showStatus("Error toggling proxy", false)
 		}
-	});
+	})
 
 	// Global settings event listeners
 	maskingModeCheckbox.addEventListener("change", function () {
-		config.maskingMode = this.checked;
-	});
+		config.maskingMode = this.checked
+	})
 
 	clearCacheOnEnableCheckbox.addEventListener("change", function () {
-		config.clearCacheOnEnable = this.checked;
-	});
+		config.clearCacheOnEnable = this.checked
+	})
 
 	disableCacheForRedirectsCheckbox.addEventListener("change", function () {
-		config.disableCacheForRedirects = this.checked;
-	});
+		config.disableCacheForRedirects = this.checked
+	})
 
 	// JS rule event listeners
 	jsRuleEnabled.addEventListener("change", function () {
-		if (!config.rules) config.rules = {};
-		if (!config.rules.js) config.rules.js = { ...defaultConfig.rules.js };
-		config.rules.js.enabled = this.checked;
-		updateUI();
-	});
+		if (!config.rules) config.rules = {}
+		if (!config.rules.js) config.rules.js = { ...defaultConfig.rules.js }
+		config.rules.js.enabled = this.checked
+		updateUI()
+	})
 
 	jsCustomPattern.addEventListener("change", function () {
-		if (!config.rules) config.rules = {};
-		if (!config.rules.js) config.rules.js = { ...defaultConfig.rules.js };
-		config.rules.js.useCustomPattern = this.checked;
-		updateUI();
-		updatePatternDisplays();
-	});
+		if (!config.rules) config.rules = {}
+		if (!config.rules.js) config.rules.js = { ...defaultConfig.rules.js }
+		config.rules.js.useCustomPattern = this.checked
+		updateUI()
+		updatePatternDisplays()
+	})
 
 	// CSS rule event listeners
 	cssRuleEnabled.addEventListener("change", function () {
-		if (!config.rules) config.rules = {};
-		if (!config.rules.css) config.rules.css = { ...defaultConfig.rules.css };
-		config.rules.css.enabled = this.checked;
-		updateUI();
-	});
+		if (!config.rules) config.rules = {}
+		if (!config.rules.css) config.rules.css = { ...defaultConfig.rules.css }
+		config.rules.css.enabled = this.checked
+		updateUI()
+	})
 
 	cssReturnBlank.addEventListener("change", function () {
-		if (!config.rules) config.rules = {};
-		if (!config.rules.css) config.rules.css = { ...defaultConfig.rules.css };
-		config.rules.css.returnBlank = this.checked;
-		updateUI();
-	});
+		if (!config.rules) config.rules = {}
+		if (!config.rules.css) config.rules.css = { ...defaultConfig.rules.css }
+		config.rules.css.returnBlank = this.checked
+		updateUI()
+	})
 
 	cssCustomPattern.addEventListener("change", function () {
-		if (!config.rules) config.rules = {};
-		if (!config.rules.css) config.rules.css = { ...defaultConfig.rules.css };
-		config.rules.css.useCustomPattern = this.checked;
-		updateUI();
-		updatePatternDisplays();
-	});
+		if (!config.rules) config.rules = {}
+		if (!config.rules.css) config.rules.css = { ...defaultConfig.rules.css }
+		config.rules.css.useCustomPattern = this.checked
+		updateUI()
+		updatePatternDisplays()
+	})
 
 	clearCacheButton.addEventListener("click", async function () {
 		try {
-			this.textContent = "Clearing...";
-			this.disabled = true;
+			this.textContent = "Clearing..."
+			this.disabled = true
 
-			const response = await chrome.runtime.sendMessage({ action: "clearCache" });
+			const response = await chrome.runtime.sendMessage({
+				action: "clearCache",
+			})
 
 			if (response.success) {
-				showStatus("Cache cleared successfully");
+				showStatus("Cache cleared successfully")
 			} else {
-				showStatus("Error clearing cache: " + (response.error || "Unknown error"), false);
+				showStatus(
+					"Error clearing cache: " + (response.error || "Unknown error"),
+					false,
+				)
 			}
 		} catch (error) {
-			console.error("Error clearing cache:", error);
-			showStatus("Error clearing cache", false);
+			console.error("Error clearing cache:", error)
+			showStatus("Error clearing cache", false)
 		} finally {
-			this.textContent = "Clear Cache";
-			this.disabled = false;
+			this.textContent = "Clear Cache"
+			this.disabled = false
 		}
-	});
+	})
 
 	saveButton.addEventListener("click", async function () {
-		if (!config.rules) config.rules = {};
-		if (!config.rules.js) config.rules.js = { ...defaultConfig.rules.js };
-		if (!config.rules.css) config.rules.css = { ...defaultConfig.rules.css };
+		if (!config.rules) config.rules = {}
+		if (!config.rules.js) config.rules.js = { ...defaultConfig.rules.js }
+		if (!config.rules.css) config.rules.css = { ...defaultConfig.rules.css }
 
 		// Validate JS rule if enabled
 		if (config.rules.js.enabled) {
-			const jsRedirectUrlValue = jsRedirectUrl.value.trim();
+			const jsRedirectUrlValue = jsRedirectUrl.value.trim()
 			const jsPatternValue = config.rules.js.useCustomPattern
 				? jsCustomPatternInput.value.trim()
-				: defaultConfig.rules.js.pattern;
+				: defaultConfig.rules.js.pattern
 
 			if (!jsRedirectUrlValue) {
-				showStatus("JavaScript redirect URL is required when JS rule is enabled", false);
-				return;
+				showStatus(
+					"JavaScript redirect URL is required when JS rule is enabled",
+					false,
+				)
+				return
 			}
 
-			const jsUrlError = validateRedirectUrl(jsRedirectUrlValue);
+			const jsUrlError = validateRedirectUrl(jsRedirectUrlValue)
 			if (jsUrlError) {
-				showStatus("JavaScript rule: " + jsUrlError, false);
-				return;
+				showStatus("JavaScript rule: " + jsUrlError, false)
+				return
 			}
 
-			const jsPatternError = validatePattern(jsPatternValue);
+			const jsPatternError = validatePattern(jsPatternValue)
 			if (jsPatternError) {
-				showStatus("JavaScript rule: " + jsPatternError, false);
-				return;
+				showStatus("JavaScript rule: " + jsPatternError, false)
+				return
 			}
 
-			config.rules.js.redirectUrl = normalizeUrl(jsRedirectUrlValue);
-			config.rules.js.pattern = jsPatternValue;
+			config.rules.js.redirectUrl = normalizeUrl(jsRedirectUrlValue)
+			config.rules.js.pattern = jsPatternValue
 		}
 
 		// Validate CSS rule if enabled
 		if (config.rules.css.enabled) {
-			const cssRedirectUrlValue = cssRedirectUrl.value.trim();
+			const cssRedirectUrlValue = cssRedirectUrl.value.trim()
 			const cssPatternValue = config.rules.css.useCustomPattern
 				? cssCustomPatternInput.value.trim()
-				: defaultConfig.rules.css.pattern;
+				: defaultConfig.rules.css.pattern
 
 			if (!config.rules.css.returnBlank && !cssRedirectUrlValue) {
-				showStatus("CSS redirect URL is required when not returning blank", false);
-				return;
+				showStatus(
+					"CSS redirect URL is required when not returning blank",
+					false,
+				)
+				return
 			}
 
 			if (!config.rules.css.returnBlank) {
-				const cssUrlError = validateRedirectUrl(cssRedirectUrlValue);
+				const cssUrlError = validateRedirectUrl(cssRedirectUrlValue)
 				if (cssUrlError) {
-					showStatus("CSS rule: " + cssUrlError, false);
-					return;
+					showStatus("CSS rule: " + cssUrlError, false)
+					return
 				}
 			}
 
-			const cssPatternError = validatePattern(cssPatternValue);
+			const cssPatternError = validatePattern(cssPatternValue)
 			if (cssPatternError) {
-				showStatus("CSS rule: " + cssPatternError, false);
-				return;
+				showStatus("CSS rule: " + cssPatternError, false)
+				return
 			}
 
-			config.rules.css.redirectUrl = normalizeUrl(cssRedirectUrlValue);
-			config.rules.css.pattern = cssPatternValue;
+			config.rules.css.redirectUrl = normalizeUrl(cssRedirectUrlValue)
+			config.rules.css.pattern = cssPatternValue
 		}
 
 		try {
-			await chrome.storage.sync.set(config);
+			await chrome.storage.sync.set(config)
 
 			chrome.runtime.sendMessage({
 				action: "updateConfig",
 				config: config,
-			});
+			})
 
-			updateUI();
-			updatePatternDisplays();
-			showStatus("Configuration saved successfully");
+			updateUI()
+			updatePatternDisplays()
+			showStatus("Configuration saved successfully")
 		} catch (error) {
-			console.error("Error saving config:", error);
-			showStatus("Error saving configuration", false);
+			console.error("Error saving config:", error)
+			showStatus("Error saving configuration", false)
 		}
-	});
+	})
 
 	// Send initial config to background script
 	chrome.runtime.sendMessage({
 		action: "updateConfig",
 		config: config,
-	});
+	})
 
 	// Component Inspector
 	function updateInspectorUI() {
 		if (inspectorEnabled) {
-			inspectorBadge.textContent = "ON";
-			inspectorBadge.classList.add("enabled");
+			inspectorBadge.textContent = "ON"
+			inspectorBadge.classList.add("enabled")
 		} else {
-			inspectorBadge.textContent = "OFF";
-			inspectorBadge.classList.remove("enabled");
+			inspectorBadge.textContent = "OFF"
+			inspectorBadge.classList.remove("enabled")
 		}
 	}
 
 	async function getInspectorState() {
 		try {
-			const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+			const [tab] = await chrome.tabs.query({
+				active: true,
+				currentWindow: true,
+			})
 			if (tab?.id) {
-				const response = await chrome.tabs.sendMessage(tab.id, { action: "getInspectorState" });
+				const response = await chrome.tabs.sendMessage(tab.id, {
+					action: "getInspectorState",
+				})
 				if (response) {
-					inspectorEnabled = response.enabled;
-					updateInspectorUI();
+					inspectorEnabled = response.enabled
+					updateInspectorUI()
 				}
 			}
 		} catch (error) {
-			console.log("Could not get inspector state:", error);
+			console.log("Could not get inspector state:", error)
 		}
 	}
 
 	// Click on inspector card opens DevTools to the GxP Inspector panel
 	inspectorCard.addEventListener("click", async function () {
 		try {
-			const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+			const [tab] = await chrome.tabs.query({
+				active: true,
+				currentWindow: true,
+			})
 			if (tab?.id) {
 				// Enable the inspector on the page
-				const response = await chrome.tabs.sendMessage(tab.id, { action: "toggleInspector" });
+				const response = await chrome.tabs.sendMessage(tab.id, {
+					action: "toggleInspector",
+				})
 				if (response) {
-					inspectorEnabled = response.enabled;
-					updateInspectorUI();
+					inspectorEnabled = response.enabled
+					updateInspectorUI()
 				}
 
 				// Open DevTools to the GxP Inspector panel
 				// Note: chrome.devtools API is only available from devtools pages
 				// We'll use a workaround by sending a message to open devtools
-				chrome.runtime.sendMessage({ action: "openDevTools", tabId: tab.id });
+				chrome.runtime.sendMessage({ action: "openDevTools", tabId: tab.id })
 
-				showStatus(inspectorEnabled ? "Inspector enabled - check DevTools" : "Inspector disabled");
+				showStatus(
+					inspectorEnabled
+						? "Inspector enabled - check DevTools"
+						: "Inspector disabled",
+				)
 			}
 		} catch (error) {
-			showStatus("Could not open inspector. Make sure you're on a web page.", false);
+			showStatus(
+				"Could not open inspector. Make sure you're on a web page.",
+				false,
+			)
 		}
-	});
+	})
 
-	getInspectorState();
-});
+	getInspectorState()
+})