@gxp-dev/tools 2.0.13 → 2.0.15

package/browser-extensions/chrome/popup.js

@@ -5,13 +5,16 @@ document.addEventListener("DOMContentLoaded", async function () {
 	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 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");
+
 	// Inspector elements
 	const inspectorToggle = document.getElementById("inspectorToggle");
 	const inspectorText = document.getElementById("inspectorText");
@@ -35,79 +38,113 @@ document.addEventListener("DOMContentLoaded", async function () {
 	const cssRedirectSection = document.getElementById("cssRedirectSection");
 	const cssCustomPattern = document.getElementById("cssCustomPattern");
 	const cssPatternDisplay = document.getElementById("cssPatternDisplay");
-	const cssCustomPatternInput = document.getElementById(
-		"cssCustomPatternInput"
-	);
+	const cssCustomPatternInput = document.getElementById("cssCustomPatternInput");
+
+	// Load environment-based defaults from defaults.json (generated by launch script)
+	let envDefaults = {};
+	try {
+		const response = await fetch(chrome.runtime.getURL("defaults.json"));
+		if (response.ok) {
+			envDefaults = await response.json();
+			console.log("Loaded environment defaults:", envDefaults);
+		}
+	} catch (error) {
+		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";
 
-	// Default configuration
+	// Default configuration (merged with environment defaults)
 	const defaultConfig = {
-		enabled: false,
-		// Legacy fields for backward compatibility
-		redirectUrl: "https://localhost:3060/src/Plugin.vue",
+		enabled: envDefaults.enabled || false,
+		redirectUrl: defaultRedirectUrl,
 		urlPattern: "uploads\\/plugin-version\\/\\d+\\/file_name\\/.*\\.js(\\?.*)?",
-		useCustomPattern: false,
-		// New rules-based configuration
+		useCustomPattern: envDefaults.jsUseCustomPattern || false,
 		rules: {
 			js: {
 				enabled: true,
-				pattern:
-					"uploads\\/plugin-version\\/\\d+\\/file_name\\/.*\\.js(\\?.*)?",
-				redirectUrl: "https://localhost:3060/src/Plugin.vue",
-				useCustomPattern: false,
+				pattern: "uploads\\/plugin-version\\/\\d+\\/file_name\\/.*\\.js(\\?.*)?",
+				redirectUrl: defaultRedirectUrl,
+				useCustomPattern: envDefaults.jsUseCustomPattern || false,
 			},
 			css: {
-				enabled: true,
-				pattern:
-					"uploads\\/plugin-version\\/\\d+\\/style_file_name\\/.*\\.css(\\?.*)?",
-				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,
 			},
 		},
 		maskingMode: false,
-		clearCacheOnEnable: true,
-		disableCacheForRedirects: true,
+		clearCacheOnEnable: envDefaults.clearCacheOnEnable !== false,
+		disableCacheForRedirects: envDefaults.disableCacheForRedirects !== false,
 	};
 
 	// Load current configuration
 	let config = {};
 	try {
-		const result = await chrome.storage.sync.get(defaultConfig);
-		config = result;
+		const result = await chrome.storage.sync.get(null);
 
-		// Migrate legacy config if needed
-		config = migrateConfig(config);
+		if (!result || Object.keys(result).length === 0) {
+			config = defaultConfig;
+			await chrome.storage.sync.set(config);
+			console.log("Initialized with environment defaults");
+		} else {
+			config = { ...defaultConfig, ...result };
+			config = migrateConfig(config, defaultConfig);
+		}
 	} catch (error) {
 		console.error("Error loading config:", error);
 		config = defaultConfig;
 	}
 
-	// Initialize UI with loaded config
+	// Initialize UI
 	updateUI();
 	updatePatternDisplays();
+	setupTabNavigation();
 
-	function migrateConfig(config) {
-		// If rules don't exist, create them from legacy config
+	function migrateConfig(config, defaults = defaultConfig) {
 		if (!config.rules) {
 			config.rules = {
 				js: {
 					enabled: true,
-					pattern: config.urlPattern || defaultConfig.rules.js.pattern,
-					redirectUrl: config.redirectUrl || defaultConfig.rules.js.redirectUrl,
-					useCustomPattern: config.useCustomPattern || false,
+					pattern: config.urlPattern || defaults.rules.js.pattern,
+					redirectUrl: config.redirectUrl || defaults.rules.js.redirectUrl,
+					useCustomPattern: config.useCustomPattern || defaults.rules.js.useCustomPattern,
 				},
 				css: {
-					enabled: true,
-					pattern: defaultConfig.rules.css.pattern,
-					redirectUrl: "",
-					returnBlank: true,
-					useCustomPattern: false,
+					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;
 	}
 
+	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) {
@@ -121,8 +158,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 		// Update global settings
 		maskingModeCheckbox.checked = config.maskingMode || false;
 		clearCacheOnEnableCheckbox.checked = config.clearCacheOnEnable !== false;
-		disableCacheForRedirectsCheckbox.checked =
-			config.disableCacheForRedirects !== false;
+		disableCacheForRedirectsCheckbox.checked = config.disableCacheForRedirects !== false;
 
 		// Update JS rule
 		if (config.rules && config.rules.js) {
@@ -131,10 +167,16 @@ document.addEventListener("DOMContentLoaded", async function () {
 			jsCustomPattern.checked = config.rules.js.useCustomPattern || false;
 			jsCustomPatternInput.value = config.rules.js.pattern || "";
 
-			// Toggle JS rule content visibility
+			// 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");
 			}
 
@@ -156,10 +198,16 @@ document.addEventListener("DOMContentLoaded", async function () {
 			cssCustomPattern.checked = config.rules.css.useCustomPattern || false;
 			cssCustomPatternInput.value = config.rules.css.pattern || "";
 
-			// Toggle CSS rule content visibility
+			// 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");
 			}
 
@@ -182,7 +230,6 @@ document.addEventListener("DOMContentLoaded", async function () {
 	}
 
 	function updatePatternDisplays() {
-		// Update JS pattern display
 		if (config.rules && config.rules.js) {
 			const jsPattern = config.rules.js.useCustomPattern
 				? config.rules.js.pattern
@@ -190,7 +237,6 @@ document.addEventListener("DOMContentLoaded", async function () {
 			jsPatternDisplay.textContent = jsPattern;
 		}
 
-		// Update CSS pattern display
 		if (config.rules && config.rules.css) {
 			const cssPattern = config.rules.css.useCustomPattern
 				? config.rules.css.pattern
@@ -210,23 +256,17 @@ document.addEventListener("DOMContentLoaded", async function () {
 	}
 
 	function validateRedirectUrl(url) {
-		if (!url || url.trim() === "") {
-			return null; // Empty URL is valid for optional fields
-		}
+		if (!url || url.trim() === "") return null;
 
 		try {
 			new URL(url);
-			return null; // Valid
+			return null;
 		} catch {
-			// Check if it's a relative-style URL like localhost:3060/path
-			if (url.includes("://")) {
-				return "Invalid URL format";
-			}
+			if (url.includes("://")) return "Invalid URL format";
 
-			// Try to parse as localhost-style URL
 			try {
 				new URL("https://" + url);
-				return null; // Valid
+				return null;
 			} catch {
 				return "Invalid URL format";
 			}
@@ -234,13 +274,11 @@ document.addEventListener("DOMContentLoaded", async function () {
 	}
 
 	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; // Valid
+			return null;
 		} catch {
 			return "Invalid regular expression pattern";
 		}
@@ -248,9 +286,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 
 	function normalizeUrl(url) {
 		if (!url || url.trim() === "") return "";
-		if (!url.includes("://")) {
-			return "https://" + url;
-		}
+		if (!url.includes("://")) return "https://" + url;
 		return url;
 	}
 
@@ -262,7 +298,6 @@ document.addEventListener("DOMContentLoaded", async function () {
 			await chrome.storage.sync.set({ enabled: config.enabled });
 			updateUI();
 
-			// Send message to background script
 			chrome.runtime.sendMessage({
 				action: "toggleProxy",
 				enabled: config.enabled,
@@ -332,29 +367,23 @@ document.addEventListener("DOMContentLoaded", async function () {
 			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");
 			} 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);
 		} finally {
-			this.textContent = "Clear Cache Now";
+			this.textContent = "Clear Cache";
 			this.disabled = false;
 		}
 	});
 
 	saveButton.addEventListener("click", async function () {
-		// Ensure rules structure exists
 		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 };
@@ -367,10 +396,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 				: defaultConfig.rules.js.pattern;
 
 			if (!jsRedirectUrlValue) {
-				showStatus(
-					"JavaScript redirect URL is required when JS rule is enabled",
-					false
-				);
+				showStatus("JavaScript redirect URL is required when JS rule is enabled", false);
 				return;
 			}
 
@@ -386,7 +412,6 @@ document.addEventListener("DOMContentLoaded", async function () {
 				return;
 			}
 
-			// Update JS rule config
 			config.rules.js.redirectUrl = normalizeUrl(jsRedirectUrlValue);
 			config.rules.js.pattern = jsPatternValue;
 		}
@@ -398,12 +423,8 @@ document.addEventListener("DOMContentLoaded", async function () {
 				? cssCustomPatternInput.value.trim()
 				: defaultConfig.rules.css.pattern;
 
-			// Only validate redirect URL if not returning blank
 			if (!config.rules.css.returnBlank && !cssRedirectUrlValue) {
-				showStatus(
-					"CSS redirect URL is required when CSS rule is enabled and not returning blank",
-					false
-				);
+				showStatus("CSS redirect URL is required when not returning blank", false);
 				return;
 			}
 
@@ -421,7 +442,6 @@ document.addEventListener("DOMContentLoaded", async function () {
 				return;
 			}
 
-			// Update CSS rule config
 			config.rules.css.redirectUrl = normalizeUrl(cssRedirectUrlValue);
 			config.rules.css.pattern = cssPatternValue;
 		}
@@ -429,7 +449,6 @@ document.addEventListener("DOMContentLoaded", async function () {
 		try {
 			await chrome.storage.sync.set(config);
 
-			// Send updated config to background script
 			chrome.runtime.sendMessage({
 				action: "updateConfig",
 				config: config,
@@ -450,10 +469,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 		config: config,
 	});
 
-	// ============================================================
 	// Component Inspector
-	// ============================================================
-
 	function updateInspectorUI() {
 		if (inspectorEnabled) {
 			inspectorToggle.classList.add("enabled");
@@ -464,45 +480,30 @@ document.addEventListener("DOMContentLoaded", async function () {
 		}
 	}
 
-	// Get initial inspector state from content script
 	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();
 				}
 			}
 		} catch (error) {
-			// Content script might not be loaded yet
 			console.log("Could not get inspector state:", error);
 		}
 	}
 
-	// Toggle inspector
 	inspectorToggle.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) {
-				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();
-					showStatus(
-						inspectorEnabled ? "Inspector enabled" : "Inspector disabled"
-					);
+					showStatus(inspectorEnabled ? "Inspector enabled" : "Inspector disabled");
 				}
 			}
 		} catch (error) {
@@ -510,6 +511,5 @@ document.addEventListener("DOMContentLoaded", async function () {
 		}
 	});
 
-	// Initialize inspector state
 	getInspectorState();
 });

package/browser-extensions/firefox/manifest.json

@@ -62,6 +62,7 @@
     "content.js",
     "inspector.js",
     "panel.html",
-    "panel.js"
+    "panel.js",
+    "defaults.json"
   ]
 }