@gxp-dev/tools 2.0.13 → 2.0.15

package/browser-extensions/firefox/popup.js

@@ -1,536 +1,499 @@
-// Configuration defaults
-const DEFAULT_CONFIG = {
-	enabled: false,
-	// Legacy fields for backward compatibility
-	redirectUrl: "https://localhost:3060/src/Plugin.vue",
-	urlPattern: "uploads\\/plugin-version\\/\\d+\\/file_name\\/.*\\.js(\\?.*)?",
-	useCustomPattern: false,
-	// New rules-based configuration
-	rules: {
-		js: {
-			enabled: true,
-			pattern: "uploads\\/plugin-version\\/\\d+\\/file_name\\/.*\\.js(\\?.*)?",
-			redirectUrl: "https://localhost:3060/src/Plugin.vue",
-			useCustomPattern: false,
-		},
-		css: {
-			enabled: true,
-			pattern:
-				"uploads\\/plugin-version\\/\\d+\\/style_file_name\\/.*\\.css(\\?.*)?",
-			redirectUrl: "",
-			returnBlank: true,
-			useCustomPattern: false,
-		},
-	},
-	maskingMode: false,
-	clearCacheOnEnable: true,
-	disableCacheForRedirects: true,
-};
-
-// Global state
-let config = { ...DEFAULT_CONFIG };
-let pendingChanges = false;
-
-// DOM elements
-const elements = {
-	// Status and main toggle
-	statusMessage: null,
-	masterToggle: null,
-	statusInfo: null,
-
-	// JavaScript rule elements
-	jsRuleContainer: null,
-	jsRuleToggle: null,
-	jsRedirectUrl: null,
-	jsUseCustomPattern: null,
-	jsPattern: null,
-	jsPatternGroup: null,
-
-	// CSS rule elements
-	cssRuleContainer: null,
-	cssRuleToggle: null,
-	cssRedirectUrl: null,
-	cssReturnBlank: null,
-	cssUseCustomPattern: null,
-	cssPattern: null,
-	cssPatternGroup: null,
-	cssRedirectGroup: null,
-
-	// Advanced settings
-	advancedHeader: null,
-	advancedContent: null,
-	advancedToggle: null,
-	maskingMode: null,
-	clearCacheOnEnable: null,
-	disableCacheForRedirects: null,
-
-	// Action buttons
-	saveBtn: null,
-	clearCacheBtn: null,
-};
-
-// Initialize popup
-document.addEventListener("DOMContentLoaded", async () => {
-	try {
-		initializeElements();
-		setupEventListeners();
-		await loadConfiguration();
-		updateUI();
-		console.log("[JavaScript Proxy] Popup initialized successfully");
-	} catch (error) {
-		console.error("[JavaScript Proxy] Error initializing popup:", error);
-		showStatus("Error initializing popup: " + error.message, "error");
-	}
-});
-
-// Initialize DOM elements
-function initializeElements() {
-	// Get all elements and store in global object
-	for (const key in elements) {
-		const element = document.getElementById(key);
-		if (!element) {
-			throw new Error(`Required element not found: ${key}`);
-		}
-		elements[key] = element;
-	}
-}
-
-// Setup event listeners
-function setupEventListeners() {
-	// Master toggle
-	elements.masterToggle.addEventListener("change", handleMasterToggle);
-
-	// Rule toggles
-	elements.jsRuleToggle.addEventListener("change", () =>
-		handleRuleToggle("js")
-	);
-	elements.cssRuleToggle.addEventListener("change", () =>
-		handleRuleToggle("css")
-	);
-
-	// JavaScript rule events
-	elements.jsRedirectUrl.addEventListener("input", () =>
-		handleFieldChange("js", "redirectUrl")
-	);
-	elements.jsUseCustomPattern.addEventListener("change", () =>
-		handleCustomPatternToggle("js")
-	);
-	elements.jsPattern.addEventListener("input", () =>
-		handleFieldChange("js", "pattern")
-	);
-
-	// CSS rule events
-	elements.cssRedirectUrl.addEventListener("input", () =>
-		handleFieldChange("css", "redirectUrl")
-	);
-	elements.cssReturnBlank.addEventListener("change", handleCssBlankToggle);
-	elements.cssUseCustomPattern.addEventListener("change", () =>
-		handleCustomPatternToggle("css")
-	);
-	elements.cssPattern.addEventListener("input", () =>
-		handleFieldChange("css", "pattern")
-	);
-
-	// Advanced settings toggle
-	elements.advancedHeader.addEventListener("click", toggleAdvancedSettings);
-
-	// Advanced settings checkboxes
-	elements.maskingMode.addEventListener("change", () =>
-		handleAdvancedSettingChange("maskingMode")
-	);
-	elements.clearCacheOnEnable.addEventListener("change", () =>
-		handleAdvancedSettingChange("clearCacheOnEnable")
-	);
-	elements.disableCacheForRedirects.addEventListener("change", () =>
-		handleAdvancedSettingChange("disableCacheForRedirects")
-	);
-
-	// Action buttons
-	elements.saveBtn.addEventListener("click", saveConfiguration);
-	elements.clearCacheBtn.addEventListener("click", clearCache);
-}
-
-// Load configuration from storage
-async function loadConfiguration() {
+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");
+
+	// Tab elements
+	const tabs = document.querySelectorAll(".tab");
+	const tabContents = document.querySelectorAll(".tab-content");
+	const jsBadge = document.getElementById("jsBadge");
+	const cssBadge = document.getElementById("cssBadge");
+
+	// Inspector elements
+	const inspectorToggle = document.getElementById("inspectorToggle");
+	const inspectorText = document.getElementById("inspectorText");
+
+	// Inspector state
+	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");
+
+	// 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");
+
+	// Load environment-based defaults from defaults.json (generated by launch script)
+	let envDefaults = {};
 	try {
-		const result = await browser.runtime.sendMessage({ action: "getConfig" });
-		if (result) {
-			config = { ...DEFAULT_CONFIG, ...result };
-			// Ensure rules exist and have proper structure
-			config = migrateConfig(config);
+		const response = await fetch(browser.runtime.getURL("defaults.json"));
+		if (response.ok) {
+			envDefaults = await response.json();
+			console.log("[GxP DevTools] Loaded environment defaults:", envDefaults);
 		}
-		console.log("[JavaScript Proxy] Loaded configuration:", config);
 	} catch (error) {
-		console.error("[JavaScript Proxy] Error loading configuration:", error);
-		showStatus("Error loading configuration: " + error.message, "error");
+		console.log("[GxP DevTools] No environment defaults found, using hardcoded defaults");
 	}
-}
 
-// Migrate legacy configuration to new rules format
-function migrateConfig(config) {
-	// If rules don't exist, create them from legacy config
-	if (!config.rules) {
-		config.rules = {
+	// Build default redirect URL from env defaults or fallback
+	const defaultRedirectUrl = envDefaults.jsRedirectUrl || "https://localhost:3060/src/Plugin.vue";
+
+	// Default configuration (merged with environment defaults)
+	const defaultConfig = {
+		enabled: envDefaults.enabled || false,
+		redirectUrl: defaultRedirectUrl,
+		urlPattern: "uploads\\/plugin-version\\/\\d+\\/file_name\\/.*\\.js(\\?.*)?",
+		useCustomPattern: envDefaults.jsUseCustomPattern || false,
+		rules: {
 			js: {
 				enabled: true,
-				pattern: config.urlPattern || DEFAULT_CONFIG.rules.js.pattern,
-				redirectUrl: config.redirectUrl || DEFAULT_CONFIG.rules.js.redirectUrl,
-				useCustomPattern: config.useCustomPattern || false,
+				pattern: "uploads\\/plugin-version\\/\\d+\\/file_name\\/.*\\.js(\\?.*)?",
+				redirectUrl: defaultRedirectUrl,
+				useCustomPattern: envDefaults.jsUseCustomPattern || false,
 			},
 			css: {
-				enabled: true,
-				pattern: DEFAULT_CONFIG.rules.css.pattern,
-				redirectUrl: "",
-				returnBlank: true,
-				useCustomPattern: false,
+				enabled: envDefaults.cssRuleEnabled !== false,
+				pattern: "uploads\\/plugin-version\\/\\d+\\/style_file_name\\/.*\\.css(\\?.*)?",
+				redirectUrl: envDefaults.cssRedirectUrl || "",
+				returnBlank: envDefaults.cssReturnBlank !== false,
+				useCustomPattern: envDefaults.cssUseCustomPattern || false,
 			},
-		};
-	} else {
-		// Ensure all required fields exist
-		if (!config.rules.js) {
-			config.rules.js = {
-				enabled: true,
-				pattern: config.urlPattern || DEFAULT_CONFIG.rules.js.pattern,
-				redirectUrl: config.redirectUrl || DEFAULT_CONFIG.rules.js.redirectUrl,
-				useCustomPattern: config.useCustomPattern || false,
-			};
+		},
+		maskingMode: false,
+		clearCacheOnEnable: envDefaults.clearCacheOnEnable !== false,
+		disableCacheForRedirects: envDefaults.disableCacheForRedirects !== false,
+	};
+
+	// Load current configuration
+	let config = {};
+	try {
+		const result = await browser.runtime.sendMessage({ action: "getConfig" });
+		if (!result || Object.keys(result).length === 0) {
+			config = defaultConfig;
+			console.log("[GxP DevTools] Initialized with environment defaults");
+		} else {
+			config = { ...defaultConfig, ...result };
+			config = migrateConfig(config, defaultConfig);
 		}
-		if (!config.rules.css) {
-			config.rules.css = {
-				enabled: true,
-				pattern: DEFAULT_CONFIG.rules.css.pattern,
-				redirectUrl: "",
-				returnBlank: true,
-				useCustomPattern: false,
+	} catch (error) {
+		console.error("[GxP DevTools] Error loading config:", error);
+		config = defaultConfig;
+	}
+
+	// Initialize UI
+	updateUI();
+	setupTabNavigation();
+
+	function migrateConfig(config, defaults = defaultConfig) {
+		if (!config.rules) {
+			config.rules = {
+				js: {
+					enabled: true,
+					pattern: config.urlPattern || defaults.rules.js.pattern,
+					redirectUrl: config.redirectUrl || defaults.rules.js.redirectUrl,
+					useCustomPattern: config.useCustomPattern || defaults.rules.js.useCustomPattern,
+				},
+				css: {
+					enabled: defaults.rules.css.enabled,
+					pattern: defaults.rules.css.pattern,
+					redirectUrl: defaults.rules.css.redirectUrl,
+					returnBlank: defaults.rules.css.returnBlank,
+					useCustomPattern: defaults.rules.css.useCustomPattern,
+				},
 			};
 		}
+		return config;
 	}
 
-	return config;
-}
-
-// Update UI based on current configuration
-function updateUI() {
-	// Update master toggle
-	elements.masterToggle.checked = config.enabled;
-	updateStatusInfo();
-
-	// Update rule toggles
-	elements.jsRuleToggle.checked = config.rules.js.enabled;
-	elements.cssRuleToggle.checked = config.rules.css.enabled;
-
-	// Update JavaScript rule fields
-	elements.jsRedirectUrl.value = config.rules.js.redirectUrl || "";
-	elements.jsUseCustomPattern.checked = config.rules.js.useCustomPattern;
-	elements.jsPattern.value = config.rules.js.pattern || "";
-
-	// Update CSS rule fields
-	elements.cssRedirectUrl.value = config.rules.css.redirectUrl || "";
-	elements.cssReturnBlank.checked = config.rules.css.returnBlank;
-	elements.cssUseCustomPattern.checked = config.rules.css.useCustomPattern;
-	elements.cssPattern.value = config.rules.css.pattern || "";
-
-	// Update advanced settings
-	elements.maskingMode.checked = config.maskingMode;
-	elements.clearCacheOnEnable.checked = config.clearCacheOnEnable;
-	elements.disableCacheForRedirects.checked = config.disableCacheForRedirects;
-
-	// Update UI visibility and states
-	updateRuleContainerStates();
-	updatePatternVisibility("js");
-	updatePatternVisibility("css");
-	updateCssRedirectVisibility();
-	updateSaveButtonState();
-}
-
-// Update status info text
-function updateStatusInfo() {
-	const activeRules = [];
-	if (config.enabled) {
-		if (config.rules.js.enabled) activeRules.push("JS redirects");
-		if (config.rules.css.enabled) {
+	function setupTabNavigation() {
+		tabs.forEach((tab) => {
+			tab.addEventListener("click", () => {
+				const tabName = tab.dataset.tab;
+
+				// Update active tab
+				tabs.forEach((t) => t.classList.remove("active"));
+				tab.classList.add("active");
+
+				// Show corresponding content
+				tabContents.forEach((content) => {
+					content.classList.remove("active");
+					if (content.id === `${tabName}Tab`) {
+						content.classList.add("active");
+					}
+				});
+			});
+		});
+	}
+
+	function updateUI() {
+		// Update toggle button
+		if (config.enabled) {
+			toggleButton.classList.add("enabled");
+			toggleText.textContent = "ON";
+		} else {
+			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;
+
+		// 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 || "";
+
+			// Update JS badge
+			if (config.rules.js.enabled) {
+				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");
+			}
+
+			// Toggle custom pattern input visibility
+			if (config.rules.js.useCustomPattern) {
+				jsPatternGroup.classList.remove("hidden");
+			} else {
+				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 || "";
+
+			// Update CSS badge
+			if (config.rules.css.enabled) {
+				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");
+			}
+
+			// Toggle redirect section based on blank return setting
 			if (config.rules.css.returnBlank) {
-				activeRules.push("CSS blank returns");
+				cssRedirectGroup.classList.add("hidden");
 			} else {
-				activeRules.push("CSS redirects");
+				cssRedirectGroup.classList.remove("hidden");
+			}
+
+			// Toggle custom pattern input visibility
+			if (config.rules.css.useCustomPattern) {
+				cssPatternGroup.classList.remove("hidden");
+			} else {
+				cssPatternGroup.classList.add("hidden");
 			}
 		}
 	}
 
-	if (config.enabled && activeRules.length > 0) {
-		elements.statusInfo.textContent = `Extension is active: ${activeRules.join(
-			", "
-		)}`;
-	} else if (config.enabled) {
-		elements.statusInfo.textContent =
-			"Extension is enabled but no rules are active";
-	} else {
-		elements.statusInfo.textContent = "Extension is currently disabled";
-	}
-}
-
-// Update rule container visual states
-function updateRuleContainerStates() {
-	// Disable rule containers when master toggle is off
-	elements.jsRuleContainer.classList.toggle("disabled", !config.enabled);
-	elements.cssRuleContainer.classList.toggle("disabled", !config.enabled);
-}
-
-// Update pattern field visibility for a rule
-function updatePatternVisibility(ruleType) {
-	const rule = config.rules[ruleType];
-	const patternGroup = elements[`${ruleType}PatternGroup`];
-
-	if (rule.useCustomPattern) {
-		patternGroup.classList.remove("hidden");
-	} else {
-		patternGroup.classList.add("hidden");
-	}
-}
-
-// Update CSS redirect URL visibility based on blank return setting
-function updateCssRedirectVisibility() {
-	if (config.rules.css.returnBlank) {
-		elements.cssRedirectGroup.classList.add("hidden");
-	} else {
-		elements.cssRedirectGroup.classList.remove("hidden");
+	function showStatus(message, isSuccess = true) {
+		statusMessage.textContent = message;
+		statusMessage.className = `status ${isSuccess ? "success" : "error"}`;
+
+		setTimeout(() => {
+			statusMessage.className = "status";
+		}, 3000);
 	}
-}
 
-// Update save button state
-function updateSaveButtonState() {
-	elements.saveBtn.disabled = !pendingChanges;
-	elements.saveBtn.textContent = pendingChanges ? "Save Changes" : "No Changes";
-}
+	function validateRedirectUrl(url) {
+		if (!url || url.trim() === "") return null;
 
-// Handle master toggle change
-async function handleMasterToggle() {
-	const enabled = elements.masterToggle.checked;
+		try {
+			new URL(url);
+			return null;
+		} catch {
+			if (url.includes("://")) return "Invalid URL format";
 
-	try {
-		// Send toggle message to background script
-		const response = await browser.runtime.sendMessage({
-			action: "toggleProxy",
-			enabled: enabled,
-		});
+			try {
+				new URL("https://" + url);
+				return null;
+			} catch {
+				return "Invalid URL format";
+			}
+		}
+	}
 
-		if (response && response.success) {
-			config.enabled = enabled;
-			updateUI();
-			showStatus(
-				enabled
-					? "Extension enabled successfully"
-					: "Extension disabled successfully",
-				"success"
-			);
-		} else {
-			throw new Error(response ? response.error : "Unknown error");
+	function validatePattern(pattern) {
+		if (!pattern || pattern.trim() === "") return "URL pattern is required";
+
+		try {
+			new RegExp(pattern);
+			return null;
+		} catch {
+			return "Invalid regular expression pattern";
 		}
-	} catch (error) {
-		console.error("[JavaScript Proxy] Error toggling proxy:", error);
-		showStatus("Error toggling extension: " + error.message, "error");
-		// Revert the toggle
-		elements.masterToggle.checked = config.enabled;
 	}
-}
 
-// Handle rule toggle change
-function handleRuleToggle(ruleType) {
-	const toggle = elements[`${ruleType}RuleToggle`];
-	config.rules[ruleType].enabled = toggle.checked;
-	setPendingChanges(true);
-	updateUI();
-}
-
-// Handle field changes
-function handleFieldChange(ruleType, fieldName) {
-	const element =
-		elements[
-			`${ruleType}${fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}`
-		];
-	config.rules[ruleType][fieldName] = element.value;
-	setPendingChanges(true);
-	updateUI();
-}
-
-// Handle custom pattern toggle
-function handleCustomPatternToggle(ruleType) {
-	const toggle = elements[`${ruleType}UseCustomPattern`];
-	config.rules[ruleType].useCustomPattern = toggle.checked;
-	setPendingChanges(true);
-	updatePatternVisibility(ruleType);
-	updateSaveButtonState();
-}
-
-// Handle CSS blank return toggle
-function handleCssBlankToggle() {
-	config.rules.css.returnBlank = elements.cssReturnBlank.checked;
-	setPendingChanges(true);
-	updateCssRedirectVisibility();
-	updateUI();
-}
-
-// Handle advanced setting changes
-function handleAdvancedSettingChange(settingName) {
-	config[settingName] = elements[settingName].checked;
-	setPendingChanges(true);
-	updateSaveButtonState();
-}
-
-// Toggle advanced settings panel
-function toggleAdvancedSettings() {
-	const isHidden = elements.advancedContent.classList.contains("hidden");
-
-	if (isHidden) {
-		elements.advancedContent.classList.remove("hidden");
-		elements.advancedToggle.textContent = "Hide ▲";
-	} else {
-		elements.advancedContent.classList.add("hidden");
-		elements.advancedToggle.textContent = "Show ▼";
+	function normalizeUrl(url) {
+		if (!url || url.trim() === "") return "";
+		if (!url.includes("://")) return "https://" + url;
+		return url;
 	}
-}
-
-// Set pending changes state
-function setPendingChanges(hasPendingChanges) {
-	pendingChanges = hasPendingChanges;
-	updateSaveButtonState();
-}
-
-// Validate configuration
-function validateConfig() {
-	const errors = [];
-
-	// Check JavaScript rule
-	if (config.rules.js.enabled) {
-		if (!config.rules.js.redirectUrl) {
-			errors.push(
-				"JavaScript redirect URL is required when JS rule is enabled"
-			);
-		} else {
-			try {
-				new URL(config.rules.js.redirectUrl);
-			} catch (e) {
-				errors.push("JavaScript redirect URL is not valid");
-			}
-		}
 
-		if (config.rules.js.useCustomPattern && !config.rules.js.pattern) {
-			errors.push(
-				"JavaScript custom pattern is required when custom pattern is enabled"
-			);
-		}
+	// Event listeners
+	toggleButton.addEventListener("click", async function () {
+		config.enabled = !config.enabled;
 
-		if (config.rules.js.pattern) {
-			try {
-				new RegExp(config.rules.js.pattern);
-			} catch (e) {
-				errors.push("JavaScript URL pattern is not a valid regular expression");
+		try {
+			const response = await browser.runtime.sendMessage({
+				action: "toggleProxy",
+				enabled: config.enabled,
+			});
+
+			if (response && response.success) {
+				updateUI();
+				showStatus(config.enabled ? "Proxy enabled" : "Proxy disabled");
+			} else {
+				throw new Error(response ? response.error : "Unknown error");
 			}
+		} catch (error) {
+			console.error("[GxP DevTools] Error toggling proxy:", error);
+			showStatus("Error toggling proxy", false);
+			// Revert the change
+			config.enabled = !config.enabled;
 		}
-	}
+	});
+
+	// Global settings event listeners
+	maskingMode.addEventListener("change", function () {
+		config.maskingMode = this.checked;
+	});
+
+	clearCacheOnEnable.addEventListener("change", function () {
+		config.clearCacheOnEnable = this.checked;
+	});
+
+	disableCacheForRedirects.addEventListener("change", function () {
+		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();
+	});
 
-	// Check CSS rule
-	if (config.rules.css.enabled) {
-		if (!config.rules.css.returnBlank && !config.rules.css.redirectUrl) {
-			errors.push(
-				"CSS redirect URL is required when CSS rule is enabled and not returning blank"
-			);
-		}
+	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.css.redirectUrl) {
-			try {
-				new URL(config.rules.css.redirectUrl);
-			} catch (e) {
-				errors.push("CSS redirect URL is not valid");
+	// 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();
+	});
+
+	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();
+	});
+
+	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();
+	});
+
+	clearCacheBtn.addEventListener("click", async function () {
+		try {
+			this.textContent = "Clearing...";
+			this.disabled = true;
+
+			const response = await browser.runtime.sendMessage({ action: "clearCache" });
+
+			if (response && response.success) {
+				showStatus("Cache cleared successfully");
+			} else {
+				showStatus("Error clearing cache: " + (response?.error || "Unknown error"), false);
 			}
+		} catch (error) {
+			console.error("[GxP DevTools] Error clearing cache:", error);
+			showStatus("Error clearing cache", false);
+		} finally {
+			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 };
+
+		// Get values from inputs
+		const jsRedirectUrlValue = jsRedirectUrl.value.trim();
+		const jsPatternValue = config.rules.js.useCustomPattern
+			? jsPattern.value.trim()
+			: defaultConfig.rules.js.pattern;
+
+		const cssRedirectUrlValue = cssRedirectUrl.value.trim();
+		const cssPatternValue = config.rules.css.useCustomPattern
+			? cssPattern.value.trim()
+			: 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;
+			}
 
-		if (config.rules.css.useCustomPattern && !config.rules.css.pattern) {
-			errors.push(
-				"CSS custom pattern is required when custom pattern is enabled"
-			);
-		}
+			const jsUrlError = validateRedirectUrl(jsRedirectUrlValue);
+			if (jsUrlError) {
+				showStatus("JavaScript rule: " + jsUrlError, false);
+				return;
+			}
 
-		if (config.rules.css.pattern) {
-			try {
-				new RegExp(config.rules.css.pattern);
-			} catch (e) {
-				errors.push("CSS URL pattern is not a valid regular expression");
+			if (config.rules.js.useCustomPattern) {
+				const jsPatternError = validatePattern(jsPatternValue);
+				if (jsPatternError) {
+					showStatus("JavaScript rule: " + jsPatternError, false);
+					return;
+				}
 			}
 		}
-	}
 
-	return errors;
-}
+		// 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;
+			}
 
-// Save configuration
-async function saveConfiguration() {
-	if (!pendingChanges) return;
+			if (!config.rules.css.returnBlank && cssRedirectUrlValue) {
+				const cssUrlError = validateRedirectUrl(cssRedirectUrlValue);
+				if (cssUrlError) {
+					showStatus("CSS rule: " + cssUrlError, false);
+					return;
+				}
+			}
 
-	try {
-		// Validate configuration
-		const errors = validateConfig();
-		if (errors.length > 0) {
-			showStatus("Validation errors: " + errors.join(", "), "error");
-			return;
+			if (config.rules.css.useCustomPattern) {
+				const cssPatternError = validatePattern(cssPatternValue);
+				if (cssPatternError) {
+					showStatus("CSS rule: " + cssPatternError, false);
+					return;
+				}
+			}
 		}
 
-		// Disable save button during save
-		elements.saveBtn.disabled = true;
-		elements.saveBtn.textContent = "Saving...";
+		// 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;
 
-		// Send configuration to background script
-		const response = await browser.runtime.sendMessage({
-			action: "updateConfig",
-			config: config,
-		});
+		try {
+			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");
+			} else {
+				throw new Error(response ? response.error : "Unknown error");
+			}
+		} catch (error) {
+			console.error("[GxP DevTools] Error saving config:", error);
+			showStatus("Error saving configuration", false);
+		} finally {
+			this.disabled = false;
+			this.textContent = "Save Configuration";
+		}
+	});
 
-		if (response && response.success) {
-			setPendingChanges(false);
-			showStatus("Configuration saved successfully", "success");
+	// Component Inspector
+	function updateInspectorUI() {
+		if (inspectorEnabled) {
+			inspectorToggle.classList.add("enabled");
+			inspectorText.textContent = "ON";
 		} else {
-			throw new Error(response ? response.error : "Unknown error");
+			inspectorToggle.classList.remove("enabled");
+			inspectorText.textContent = "OFF";
 		}
-	} catch (error) {
-		console.error("[JavaScript Proxy] Error saving configuration:", error);
-		showStatus("Error saving configuration: " + error.message, "error");
-	} finally {
-		updateSaveButtonState();
 	}
-}
-
-// Clear cache
-async function clearCache() {
-	try {
-		elements.clearCacheBtn.disabled = true;
-		elements.clearCacheBtn.textContent = "Clearing...";
 
-		const response = await browser.runtime.sendMessage({
-			action: "clearCache",
-		});
-
-		if (response && response.success) {
-			showStatus("Cache cleared successfully", "success");
-		} else {
-			throw new Error(response ? response.error : "Unknown error");
+	async function getInspectorState() {
+		try {
+			const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+			if (tab?.id) {
+				const response = await browser.tabs.sendMessage(tab.id, { action: "getInspectorState" });
+				if (response) {
+					inspectorEnabled = response.enabled;
+					updateInspectorUI();
+				}
+			}
+		} catch (error) {
+			console.log("[GxP DevTools] Could not get inspector state:", error);
 		}
-	} catch (error) {
-		console.error("[JavaScript Proxy] Error clearing cache:", error);
-		showStatus("Error clearing cache: " + error.message, "error");
-	} finally {
-		elements.clearCacheBtn.disabled = false;
-		elements.clearCacheBtn.textContent = "Clear Cache";
 	}
-}
-
-// Show status message
-function showStatus(message, type = "success") {
-	elements.statusMessage.textContent = message;
-	elements.statusMessage.className = `status-message status-${type}`;
-	elements.statusMessage.classList.remove("hidden");
-
-	// Auto-hide after 5 seconds
-	setTimeout(() => {
-		elements.statusMessage.classList.add("hidden");
-	}, 5000);
-}
+
+	inspectorToggle.addEventListener("click", async function () {
+		try {
+			const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+			if (tab?.id) {
+				const response = await browser.tabs.sendMessage(tab.id, { action: "toggleInspector" });
+				if (response) {
+					inspectorEnabled = response.enabled;
+					updateInspectorUI();
+					showStatus(inspectorEnabled ? "Inspector enabled" : "Inspector disabled");
+				}
+			}
+		} catch (error) {
+			showStatus("Could not toggle inspector. Make sure you're on a web page.", false);
+		}
+	});
+
+	getInspectorState();
+});