@gxp-dev/tools 2.0.63 → 2.0.64

package/browser-extensions/firefox/popup.js

@@ -1,59 +1,64 @@
 document.addEventListener("DOMContentLoaded", async function () {
 	// Get all DOM elements
-	const toggleButton = document.getElementById("toggleButton");
-	const toggleText = document.getElementById("toggleText");
-	const saveBtn = document.getElementById("saveBtn");
-	const clearCacheBtn = document.getElementById("clearCacheBtn");
-	const statusMessage = document.getElementById("statusMessage");
-	const maskingMode = document.getElementById("maskingMode");
-	const clearCacheOnEnable = document.getElementById("clearCacheOnEnable");
-	const disableCacheForRedirects = document.getElementById("disableCacheForRedirects");
+	const toggleButton = document.getElementById("toggleButton")
+	const toggleText = document.getElementById("toggleText")
+	const saveBtn = document.getElementById("saveBtn")
+	const clearCacheBtn = document.getElementById("clearCacheBtn")
+	const statusMessage = document.getElementById("statusMessage")
+	const maskingMode = document.getElementById("maskingMode")
+	const clearCacheOnEnable = document.getElementById("clearCacheOnEnable")
+	const disableCacheForRedirects = document.getElementById(
+		"disableCacheForRedirects",
+	)
 
 	// 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 jsRuleToggle = document.getElementById("jsRuleToggle");
-	const jsRuleContent = document.getElementById("jsRuleContent");
-	const jsRedirectUrl = document.getElementById("jsRedirectUrl");
-	const jsUseCustomPattern = document.getElementById("jsUseCustomPattern");
-	const jsPatternGroup = document.getElementById("jsPatternGroup");
-	const jsPattern = document.getElementById("jsPattern");
+	const jsRuleToggle = document.getElementById("jsRuleToggle")
+	const jsRuleContent = document.getElementById("jsRuleContent")
+	const jsRedirectUrl = document.getElementById("jsRedirectUrl")
+	const jsUseCustomPattern = document.getElementById("jsUseCustomPattern")
+	const jsPatternGroup = document.getElementById("jsPatternGroup")
+	const jsPattern = document.getElementById("jsPattern")
 
 	// CSS Rule elements
-	const cssRuleToggle = document.getElementById("cssRuleToggle");
-	const cssRuleContent = document.getElementById("cssRuleContent");
-	const cssRedirectUrl = document.getElementById("cssRedirectUrl");
-	const cssReturnBlank = document.getElementById("cssReturnBlank");
-	const cssRedirectGroup = document.getElementById("cssRedirectGroup");
-	const cssUseCustomPattern = document.getElementById("cssUseCustomPattern");
-	const cssPatternGroup = document.getElementById("cssPatternGroup");
-	const cssPattern = document.getElementById("cssPattern");
+	const cssRuleToggle = document.getElementById("cssRuleToggle")
+	const cssRuleContent = document.getElementById("cssRuleContent")
+	const cssRedirectUrl = document.getElementById("cssRedirectUrl")
+	const cssReturnBlank = document.getElementById("cssReturnBlank")
+	const cssRedirectGroup = document.getElementById("cssRedirectGroup")
+	const cssUseCustomPattern = document.getElementById("cssUseCustomPattern")
+	const cssPatternGroup = document.getElementById("cssPatternGroup")
+	const cssPattern = document.getElementById("cssPattern")
 
 	// Load environment-based defaults from defaults.json (generated by launch script)
-	let envDefaults = {};
+	let envDefaults = {}
 	try {
-		const response = await fetch(browser.runtime.getURL("defaults.json"));
+		const response = await fetch(browser.runtime.getURL("defaults.json"))
 		if (response.ok) {
-			envDefaults = await response.json();
-			console.log("[GxP DevTools] Loaded environment defaults:", envDefaults);
+			envDefaults = await response.json()
+			console.log("[GxP DevTools] Loaded environment defaults:", envDefaults)
 		}
 	} catch (error) {
-		console.log("[GxP DevTools] No environment defaults found, using hardcoded defaults");
+		console.log(
+			"[GxP DevTools] 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 +69,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,54 +86,59 @@ 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 browser.runtime.sendMessage({ action: "getConfig" });
+		const result = await browser.runtime.sendMessage({ action: "getConfig" })
 
 		// 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;
-			console.log("[GxP DevTools] Initialized with environment defaults");
+			config = defaultConfig
+			console.log("[GxP DevTools] 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
 			}
 			// Save the updated config
-			await browser.runtime.sendMessage({ action: "updateConfig", config: config });
-			console.log("[GxP DevTools] Applied CLI defaults over stored config");
+			await browser.runtime.sendMessage({
+				action: "updateConfig",
+				config: config,
+			})
+			console.log("[GxP DevTools] 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("[GxP DevTools] Error loading config:", error);
-		config = defaultConfig;
+		console.error("[GxP DevTools] Error loading config:", error)
+		config = defaultConfig
 	}
 
 	// Initialize UI
-	updateUI();
-	setupTabNavigation();
+	updateUI()
+	setupTabNavigation()
 
 	// If CLI launched and config is enabled, notify background script to activate
 	if (config.enabled) {
 		browser.runtime.sendMessage({
 			action: "toggleProxy",
 			enabled: true,
-		});
+		})
 	}
 
 	function migrateConfig(config, defaults = defaultConfig) {
@@ -136,7 +148,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,
@@ -145,284 +158,292 @@ 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
-		maskingMode.checked = config.maskingMode || false;
-		clearCacheOnEnable.checked = config.clearCacheOnEnable !== false;
-		disableCacheForRedirects.checked = config.disableCacheForRedirects !== false;
+		maskingMode.checked = config.maskingMode || false
+		clearCacheOnEnable.checked = config.clearCacheOnEnable !== false
+		disableCacheForRedirects.checked = config.disableCacheForRedirects !== false
 
 		// Update JS rule
 		if (config.rules && config.rules.js) {
-			jsRuleToggle.checked = config.rules.js.enabled;
-			jsRedirectUrl.value = config.rules.js.redirectUrl || "";
-			jsUseCustomPattern.checked = config.rules.js.useCustomPattern || false;
-			jsPattern.value = config.rules.js.pattern || "";
+			jsRuleToggle.checked = config.rules.js.enabled
+			jsRedirectUrl.value = config.rules.js.redirectUrl || ""
+			jsUseCustomPattern.checked = config.rules.js.useCustomPattern || false
+			jsPattern.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) {
-				jsPatternGroup.classList.remove("hidden");
+				jsPatternGroup.classList.remove("hidden")
 			} else {
-				jsPatternGroup.classList.add("hidden");
+				jsPatternGroup.classList.add("hidden")
 			}
 		}
 
 		// Update CSS rule
 		if (config.rules && config.rules.css) {
-			cssRuleToggle.checked = config.rules.css.enabled;
-			cssRedirectUrl.value = config.rules.css.redirectUrl || "";
-			cssReturnBlank.checked = config.rules.css.returnBlank || false;
-			cssUseCustomPattern.checked = config.rules.css.useCustomPattern || false;
-			cssPattern.value = config.rules.css.pattern || "";
+			cssRuleToggle.checked = config.rules.css.enabled
+			cssRedirectUrl.value = config.rules.css.redirectUrl || ""
+			cssReturnBlank.checked = config.rules.css.returnBlank || false
+			cssUseCustomPattern.checked = config.rules.css.useCustomPattern || false
+			cssPattern.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) {
-				cssRedirectGroup.classList.add("hidden");
+				cssRedirectGroup.classList.add("hidden")
 			} else {
-				cssRedirectGroup.classList.remove("hidden");
+				cssRedirectGroup.classList.remove("hidden")
 			}
 
 			// Toggle custom pattern input visibility
 			if (config.rules.css.useCustomPattern) {
-				cssPatternGroup.classList.remove("hidden");
+				cssPatternGroup.classList.remove("hidden")
 			} else {
-				cssPatternGroup.classList.add("hidden");
+				cssPatternGroup.classList.add("hidden")
 			}
 		}
 	}
 
 	function showStatus(message, isSuccess = true) {
-		statusMessage.textContent = message;
-		statusMessage.className = `status ${isSuccess ? "success" : "error"}`;
+		statusMessage.textContent = message
+		statusMessage.className = `status ${isSuccess ? "success" : "error"}`
 
 		setTimeout(() => {
-			statusMessage.className = "status";
-		}, 3000);
+			statusMessage.className = "status"
+		}, 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 {
 			const response = await browser.runtime.sendMessage({
 				action: "toggleProxy",
 				enabled: config.enabled,
-			});
+			})
 
 			if (response && response.success) {
-				updateUI();
-				showStatus(config.enabled ? "Proxy enabled" : "Proxy disabled");
+				updateUI()
+				showStatus(config.enabled ? "Proxy enabled" : "Proxy disabled")
 			} else {
-				throw new Error(response ? response.error : "Unknown error");
+				throw new Error(response ? response.error : "Unknown error")
 			}
 		} catch (error) {
-			console.error("[GxP DevTools] Error toggling proxy:", error);
-			showStatus("Error toggling proxy", false);
+			console.error("[GxP DevTools] Error toggling proxy:", error)
+			showStatus("Error toggling proxy", false)
 			// Revert the change
-			config.enabled = !config.enabled;
+			config.enabled = !config.enabled
 		}
-	});
+	})
 
 	// Global settings event listeners
 	maskingMode.addEventListener("change", function () {
-		config.maskingMode = this.checked;
-	});
+		config.maskingMode = this.checked
+	})
 
 	clearCacheOnEnable.addEventListener("change", function () {
-		config.clearCacheOnEnable = this.checked;
-	});
+		config.clearCacheOnEnable = this.checked
+	})
 
 	disableCacheForRedirects.addEventListener("change", function () {
-		config.disableCacheForRedirects = this.checked;
-	});
+		config.disableCacheForRedirects = this.checked
+	})
 
 	// JS rule event listeners
 	jsRuleToggle.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()
+	})
 
 	jsUseCustomPattern.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();
-	});
+		if (!config.rules) config.rules = {}
+		if (!config.rules.js) config.rules.js = { ...defaultConfig.rules.js }
+		config.rules.js.useCustomPattern = this.checked
+		updateUI()
+	})
 
 	// CSS rule event listeners
 	cssRuleToggle.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()
+	})
 
 	cssUseCustomPattern.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();
-	});
+		if (!config.rules) config.rules = {}
+		if (!config.rules.css) config.rules.css = { ...defaultConfig.rules.css }
+		config.rules.css.useCustomPattern = this.checked
+		updateUI()
+	})
 
 	clearCacheBtn.addEventListener("click", async function () {
 		try {
-			this.textContent = "Clearing...";
-			this.disabled = true;
+			this.textContent = "Clearing..."
+			this.disabled = true
 
-			const response = await browser.runtime.sendMessage({ action: "clearCache" });
+			const response = await browser.runtime.sendMessage({
+				action: "clearCache",
+			})
 
 			if (response && 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("[GxP DevTools] Error clearing cache:", error);
-			showStatus("Error clearing cache", false);
+			console.error("[GxP DevTools] Error clearing cache:", error)
+			showStatus("Error clearing cache", false)
 		} finally {
-			this.textContent = "Clear Cache";
-			this.disabled = false;
+			this.textContent = "Clear Cache"
+			this.disabled = false
 		}
-	});
+	})
 
 	saveBtn.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 }
 
 		// Get values from inputs
-		const jsRedirectUrlValue = jsRedirectUrl.value.trim();
+		const jsRedirectUrlValue = jsRedirectUrl.value.trim()
 		const jsPatternValue = config.rules.js.useCustomPattern
 			? jsPattern.value.trim()
-			: defaultConfig.rules.js.pattern;
+			: defaultConfig.rules.js.pattern
 
-		const cssRedirectUrlValue = cssRedirectUrl.value.trim();
+		const cssRedirectUrlValue = cssRedirectUrl.value.trim()
 		const cssPatternValue = config.rules.css.useCustomPattern
 			? cssPattern.value.trim()
-			: defaultConfig.rules.css.pattern;
+			: defaultConfig.rules.css.pattern
 
 		// Validate JS rule if enabled
 		if (config.rules.js.enabled) {
 			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
 			}
 
 			if (config.rules.js.useCustomPattern) {
-				const jsPatternError = validatePattern(jsPatternValue);
+				const jsPatternError = validatePattern(jsPatternValue)
 				if (jsPatternError) {
-					showStatus("JavaScript rule: " + jsPatternError, false);
-					return;
+					showStatus("JavaScript rule: " + jsPatternError, false)
+					return
 				}
 			}
 		}
@@ -430,106 +451,130 @@ document.addEventListener("DOMContentLoaded", async function () {
 		// Validate CSS rule if enabled
 		if (config.rules.css.enabled) {
 			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 && cssRedirectUrlValue) {
-				const cssUrlError = validateRedirectUrl(cssRedirectUrlValue);
+				const cssUrlError = validateRedirectUrl(cssRedirectUrlValue)
 				if (cssUrlError) {
-					showStatus("CSS rule: " + cssUrlError, false);
-					return;
+					showStatus("CSS rule: " + cssUrlError, false)
+					return
 				}
 			}
 
 			if (config.rules.css.useCustomPattern) {
-				const cssPatternError = validatePattern(cssPatternValue);
+				const cssPatternError = validatePattern(cssPatternValue)
 				if (cssPatternError) {
-					showStatus("CSS rule: " + cssPatternError, false);
-					return;
+					showStatus("CSS rule: " + cssPatternError, false)
+					return
 				}
 			}
 		}
 
 		// Update config with form values
-		config.rules.js.redirectUrl = normalizeUrl(jsRedirectUrlValue);
-		config.rules.js.pattern = jsPatternValue;
-		config.rules.css.redirectUrl = normalizeUrl(cssRedirectUrlValue);
-		config.rules.css.pattern = cssPatternValue;
+		config.rules.js.redirectUrl = normalizeUrl(jsRedirectUrlValue)
+		config.rules.js.pattern = jsPatternValue
+		config.rules.css.redirectUrl = normalizeUrl(cssRedirectUrlValue)
+		config.rules.css.pattern = cssPatternValue
 
 		try {
-			this.disabled = true;
-			this.textContent = "Saving...";
+			this.disabled = true
+			this.textContent = "Saving..."
 
 			const response = await browser.runtime.sendMessage({
 				action: "updateConfig",
 				config: config,
-			});
+			})
 
 			if (response && response.success) {
-				updateUI();
-				showStatus("Configuration saved successfully");
+				updateUI()
+				showStatus("Configuration saved successfully")
 			} else {
-				throw new Error(response ? response.error : "Unknown error");
+				throw new Error(response ? response.error : "Unknown error")
 			}
 		} catch (error) {
-			console.error("[GxP DevTools] Error saving config:", error);
-			showStatus("Error saving configuration", false);
+			console.error("[GxP DevTools] Error saving config:", error)
+			showStatus("Error saving configuration", false)
 		} finally {
-			this.disabled = false;
-			this.textContent = "Save Configuration";
+			this.disabled = false
+			this.textContent = "Save Configuration"
 		}
-	});
+	})
 
 	// 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 browser.tabs.query({ active: true, currentWindow: true });
+			const [tab] = await browser.tabs.query({
+				active: true,
+				currentWindow: true,
+			})
 			if (tab?.id) {
-				const response = await browser.tabs.sendMessage(tab.id, { action: "getInspectorState" });
+				const response = await browser.tabs.sendMessage(tab.id, {
+					action: "getInspectorState",
+				})
 				if (response) {
-					inspectorEnabled = response.enabled;
-					updateInspectorUI();
+					inspectorEnabled = response.enabled
+					updateInspectorUI()
 				}
 			}
 		} catch (error) {
-			console.log("[GxP DevTools] Could not get inspector state:", error);
+			console.log("[GxP DevTools] Could not get inspector state:", error)
 		}
 	}
 
 	// Click on inspector card enables inspector and prompts to open DevTools
 	inspectorCard.addEventListener("click", async function () {
 		try {
-			const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+			const [tab] = await browser.tabs.query({
+				active: true,
+				currentWindow: true,
+			})
 			if (tab?.id) {
 				// Enable the inspector on the page
-				const response = await browser.tabs.sendMessage(tab.id, { action: "toggleInspector" });
+				const response = await browser.tabs.sendMessage(tab.id, {
+					action: "toggleInspector",
+				})
 				if (response) {
-					inspectorEnabled = response.enabled;
-					updateInspectorUI();
+					inspectorEnabled = response.enabled
+					updateInspectorUI()
 				}
 
 				// Log a message to the console suggesting to open DevTools
-				browser.tabs.executeScript(tab.id, {
-					code: `console.log('%c[GxP Inspector] Inspector enabled! Press F12 or Ctrl+Shift+J to open DevTools and see the GxP Inspector panel.', 'color: #667eea; font-weight: bold; font-size: 14px;');`
-				}).catch(err => console.log('[GxP DevTools] Could not inject script:', err));
-
-				showStatus(inspectorEnabled ? "Inspector enabled - check DevTools" : "Inspector disabled");
+				browser.tabs
+					.executeScript(tab.id, {
+						code: `console.log('%c[GxP Inspector] Inspector enabled! Press F12 or Ctrl+Shift+J to open DevTools and see the GxP Inspector panel.', 'color: #667eea; font-weight: bold; font-size: 14px;');`,
+					})
+					.catch((err) =>
+						console.log("[GxP DevTools] Could not inject script:", err),
+					)
+
+				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()
+})