@gxp-dev/tools 2.0.5

package/browser-extensions/chrome/popup.js

@@ -0,0 +1,515 @@
+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");
+
+	// Inspector elements
+	const inspectorToggle = document.getElementById("inspectorToggle");
+	const inspectorText = document.getElementById("inspectorText");
+
+	// Inspector state
+	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");
+
+	// 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"
+	);
+
+	// Default configuration
+	const defaultConfig = {
+		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,
+	};
+
+	// Load current configuration
+	let config = {};
+	try {
+		const result = await chrome.storage.sync.get(defaultConfig);
+		config = result;
+
+		// Migrate legacy config if needed
+		config = migrateConfig(config);
+	} catch (error) {
+		console.error("Error loading config:", error);
+		config = defaultConfig;
+	}
+
+	// Initialize UI with loaded config
+	updateUI();
+	updatePatternDisplays();
+
+	function migrateConfig(config) {
+		// If rules don't exist, create them from legacy config
+		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,
+				},
+				css: {
+					enabled: true,
+					pattern: defaultConfig.rules.css.pattern,
+					redirectUrl: "",
+					returnBlank: true,
+					useCustomPattern: false,
+				},
+			};
+		}
+		return config;
+	}
+
+	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
+		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 || "";
+
+			// Toggle JS rule content visibility
+			if (config.rules.js.enabled) {
+				jsRuleContent.classList.remove("rule-disabled");
+			} else {
+				jsRuleContent.classList.add("rule-disabled");
+			}
+
+			// Toggle custom pattern input visibility
+			if (config.rules.js.useCustomPattern) {
+				jsCustomPatternInput.classList.add("visible");
+				jsPatternDisplay.style.display = "none";
+			} else {
+				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 || "";
+
+			// Toggle CSS rule content visibility
+			if (config.rules.css.enabled) {
+				cssRuleContent.classList.remove("rule-disabled");
+			} else {
+				cssRuleContent.classList.add("rule-disabled");
+			}
+
+			// Toggle redirect section based on blank return setting
+			if (config.rules.css.returnBlank) {
+				cssRedirectSection.style.display = "none";
+			} else {
+				cssRedirectSection.style.display = "block";
+			}
+
+			// Toggle custom pattern input visibility
+			if (config.rules.css.useCustomPattern) {
+				cssCustomPatternInput.classList.add("visible");
+				cssPatternDisplay.style.display = "none";
+			} else {
+				cssCustomPatternInput.classList.remove("visible");
+				cssPatternDisplay.style.display = "block";
+			}
+		}
+	}
+
+	function updatePatternDisplays() {
+		// Update JS pattern display
+		if (config.rules && config.rules.js) {
+			const jsPattern = config.rules.js.useCustomPattern
+				? config.rules.js.pattern
+				: defaultConfig.rules.js.pattern;
+			jsPatternDisplay.textContent = jsPattern;
+		}
+
+		// Update CSS pattern display
+		if (config.rules && config.rules.css) {
+			const cssPattern = config.rules.css.useCustomPattern
+				? config.rules.css.pattern
+				: 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";
+
+		setTimeout(() => {
+			statusDiv.style.display = "none";
+		}, 3000);
+	}
+
+	function validateRedirectUrl(url) {
+		if (!url || url.trim() === "") {
+			return null; // Empty URL is valid for optional fields
+		}
+
+		try {
+			new URL(url);
+			return null; // Valid
+		} catch {
+			// Check if it's a relative-style URL like localhost:3060/path
+			if (url.includes("://")) {
+				return "Invalid URL format";
+			}
+
+			// Try to parse as localhost-style URL
+			try {
+				new URL("https://" + url);
+				return null; // Valid
+			} catch {
+				return "Invalid URL format";
+			}
+		}
+	}
+
+	function validatePattern(pattern) {
+		if (!pattern || pattern.trim() === "") {
+			return "URL pattern is required";
+		}
+
+		try {
+			new RegExp(pattern);
+			return null; // Valid
+		} catch {
+			return "Invalid regular expression pattern";
+		}
+	}
+
+	function normalizeUrl(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;
+
+		try {
+			await chrome.storage.sync.set({ enabled: config.enabled });
+			updateUI();
+
+			// Send message to background script
+			chrome.runtime.sendMessage({
+				action: "toggleProxy",
+				enabled: config.enabled,
+			});
+
+			showStatus(config.enabled ? "Proxy enabled" : "Proxy disabled");
+		} catch (error) {
+			console.error("Error toggling proxy:", error);
+			showStatus("Error toggling proxy", false);
+		}
+	});
+
+	// Global settings event listeners
+	maskingModeCheckbox.addEventListener("change", function () {
+		config.maskingMode = this.checked;
+	});
+
+	clearCacheOnEnableCheckbox.addEventListener("change", function () {
+		config.clearCacheOnEnable = this.checked;
+	});
+
+	disableCacheForRedirectsCheckbox.addEventListener("change", function () {
+		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();
+	});
+
+	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();
+	});
+
+	// 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();
+	});
+
+	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();
+	});
+
+	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();
+	});
+
+	clearCacheButton.addEventListener("click", async function () {
+		try {
+			this.textContent = "Clearing...";
+			this.disabled = true;
+
+			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
+				);
+			}
+		} catch (error) {
+			console.error("Error clearing cache:", error);
+			showStatus("Error clearing cache", false);
+		} finally {
+			this.textContent = "Clear Cache Now";
+			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 };
+
+		// Validate JS rule if enabled
+		if (config.rules.js.enabled) {
+			const jsRedirectUrlValue = jsRedirectUrl.value.trim();
+			const jsPatternValue = config.rules.js.useCustomPattern
+				? jsCustomPatternInput.value.trim()
+				: defaultConfig.rules.js.pattern;
+
+			if (!jsRedirectUrlValue) {
+				showStatus(
+					"JavaScript redirect URL is required when JS rule is enabled",
+					false
+				);
+				return;
+			}
+
+			const jsUrlError = validateRedirectUrl(jsRedirectUrlValue);
+			if (jsUrlError) {
+				showStatus("JavaScript rule: " + jsUrlError, false);
+				return;
+			}
+
+			const jsPatternError = validatePattern(jsPatternValue);
+			if (jsPatternError) {
+				showStatus("JavaScript rule: " + jsPatternError, false);
+				return;
+			}
+
+			// Update JS rule config
+			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 cssPatternValue = config.rules.css.useCustomPattern
+				? 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
+				);
+				return;
+			}
+
+			if (!config.rules.css.returnBlank) {
+				const cssUrlError = validateRedirectUrl(cssRedirectUrlValue);
+				if (cssUrlError) {
+					showStatus("CSS rule: " + cssUrlError, false);
+					return;
+				}
+			}
+
+			const cssPatternError = validatePattern(cssPatternValue);
+			if (cssPatternError) {
+				showStatus("CSS rule: " + cssPatternError, false);
+				return;
+			}
+
+			// Update CSS rule config
+			config.rules.css.redirectUrl = normalizeUrl(cssRedirectUrlValue);
+			config.rules.css.pattern = cssPatternValue;
+		}
+
+		try {
+			await chrome.storage.sync.set(config);
+
+			// Send updated config to background script
+			chrome.runtime.sendMessage({
+				action: "updateConfig",
+				config: config,
+			});
+
+			updateUI();
+			updatePatternDisplays();
+			showStatus("Configuration saved successfully");
+		} catch (error) {
+			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) {
+			inspectorToggle.classList.add("enabled");
+			inspectorText.textContent = "ON";
+		} else {
+			inspectorToggle.classList.remove("enabled");
+			inspectorText.textContent = "OFF";
+		}
+	}
+
+	// Get initial inspector state from content script
+	async function getInspectorState() {
+		try {
+			const [tab] = await chrome.tabs.query({
+				active: true,
+				currentWindow: true,
+			});
+			if (tab?.id) {
+				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,
+			});
+			if (tab?.id) {
+				const response = await chrome.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);
+		}
+	});
+
+	// Initialize inspector state
+	getInspectorState();
+});

package/browser-extensions/chrome/rules.json

@@ -0,0 +1 @@
+[] 

package/browser-extensions/chrome/test-chrome.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Test Chrome Extension</title>
+    <style>
+        body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; }
+        .test-section { margin: 20px 0; padding: 20px; border: 2px solid #ddd; border-radius: 8px; }
+        .success { border-color: #28a745; background: #f8fff8; }
+        .warning { border-color: #ffc107; background: #fffbf0; }
+        .info { border-color: #17a2b8; background: #f0f9ff; }
+        .code { background: #e9ecef; padding: 8px; font-family: monospace; margin: 8px 0; word-break: break-all; }
+        .results { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 4px; max-height: 300px; overflow-y: auto; }
+        button { padding: 10px 15px; margin: 5px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 4px; }
+    </style>
+</head>
+<body>
+    <h1>🔧 Chrome Extension Test</h1>
+    
+    <div class="test-section info">
+        <h2>📋 Chrome Extension Differences</h2>
+        <ul>
+            <li><strong>Manifest V3:</strong> Uses service workers instead of background scripts</li>
+            <li><strong>declarativeNetRequest:</strong> Replaces webRequest API for better performance</li>
+            <li><strong>chrome API:</strong> Uses <code>chrome.*</code> instead of <code>browser.*</code></li>
+            <li><strong>Limited Regex:</strong> Chrome's declarativeNetRequest has more limited pattern matching</li>
+        </ul>
+    </div>
+
+    <div class="test-section warning">
+        <h2>⚠️ Installation Steps for Chrome</h2>
+        <ol>
+            <li>Open Chrome and go to <code>chrome://extensions/</code></li>
+            <li>Enable "Developer mode" (toggle in top right)</li>
+            <li>Click "Load unpacked"</li>
+            <li>Select the <code>chrome</code> folder</li>
+            <li>The extension should appear in your toolbar</li>
+        </ol>
+    </div>
+
+    <div class="test-section success">
+        <h2>🧪 Chrome Extension Tests</h2>
+        <button onclick="checkChromeExtension()">Check Chrome Extension</button>
+        <button onclick="testChromeRequest()">Test Chrome Request</button>
+        <button onclick="testDeclarativeRules()">Test Declarative Rules</button>
+        <div id="chromeResults" class="results"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>📊 Chrome vs Firefox Comparison</h2>
+        <table style="width: 100%; border-collapse: collapse;">
+            <tr style="background: #f8f9fa;">
+                <th style="border: 1px solid #ddd; padding: 8px;">Feature</th>
+                <th style="border: 1px solid #ddd; padding: 8px;">Firefox</th>
+                <th style="border: 1px solid #ddd; padding: 8px;">Chrome</th>
+            </tr>
+            <tr>
+                <td style="border: 1px solid #ddd; padding: 8px;">API</td>
+                <td style="border: 1px solid #ddd; padding: 8px;">browser.*</td>
+                <td style="border: 1px solid #ddd; padding: 8px;">chrome.*</td>
+            </tr>
+            <tr>
+                <td style="border: 1px solid #ddd; padding: 8px;">Manifest</td>
+                <td style="border: 1px solid #ddd; padding: 8px;">v2</td>
+                <td style="border: 1px solid #ddd; padding: 8px;">v3</td>
+            </tr>
+            <tr>
+                <td style="border: 1px solid #ddd; padding: 8px;">Background</td>
+                <td style="border: 1px solid #ddd; padding: 8px;">Persistent scripts</td>
+                <td style="border: 1px solid #ddd; padding: 8px;">Service worker</td>
+            </tr>
+            <tr>
+                <td style="border: 1px solid #ddd; padding: 8px;">Network API</td>
+                <td style="border: 1px solid #ddd; padding: 8px;">webRequest (full regex)</td>
+                <td style="border: 1px solid #ddd; padding: 8px;">declarativeNetRequest (limited patterns)</td>
+            </tr>
+        </table>
+    </div>
+
+    <script>
+        function log(message, type = 'info') {
+            const results = document.getElementById('chromeResults');
+            const timestamp = new Date().toLocaleTimeString();
+            const icon = type === 'error' ? '❌' : type === 'success' ? '✅' : type === 'warning' ? '⚠️' : 'ℹ️';
+            results.innerHTML += `<div>${timestamp} ${icon} ${message}</div>`;
+        }
+
+        async function checkChromeExtension() {
+            log('Checking Chrome extension status...');
+            
+            try {
+                if (typeof chrome === 'undefined' || !chrome.runtime) {
+                    log('Chrome extension API not available', 'error');
+                    return;
+                }
+                
+                const response = await chrome.runtime.sendMessage({ action: 'getState' });
+                log(`✅ Chrome extension responding: Enabled=${response.enabled}, Rules=${response.rules.length}`, 'success');
+                
+                response.rules.forEach((rule, index) => {
+                    log(`Rule ${index + 1}: ${rule.pattern} → ${rule.redirect} (Mask: ${rule.maskUrl || false})`, 'info');
+                });
+                
+            } catch (error) {
+                log(`Chrome extension communication failed: ${error.message}`, 'error');
+            }
+        }
+
+        async function testChromeRequest() {
+            log('Testing request with Chrome extension...');
+            
+            try {
+                const response = await fetch('https://httpbin.org/get?test=chrome');
+                const data = await response.json();
+                log(`Request successful: ${response.status}`, 'success');
+                log(`Response URL: ${data.url}`, 'info');
+                log('Check Chrome DevTools Network tab to see if request was intercepted', 'info');
+            } catch (error) {
+                log(`Request failed: ${error.message}`, 'error');
+            }
+        }
+
+        async function testDeclarativeRules() {
+            log('Testing Chrome declarativeNetRequest rules...');
+            
+            try {
+                if (chrome.declarativeNetRequest) {
+                    const rules = await chrome.declarativeNetRequest.getDynamicRules();
+                    log(`Found ${rules.length} declarative rules`, 'success');
+                    
+                    rules.forEach((rule, index) => {
+                        log(`Rule ${rule.id}: ${rule.condition.regexFilter || rule.condition.urlFilter} → ${rule.action.type}`, 'info');
+                    });
+                } else {
+                    log('declarativeNetRequest API not available', 'warning');
+                }
+            } catch (error) {
+                log(`Error checking declarative rules: ${error.message}`, 'error');
+            }
+        }
+
+        // Auto-run extension check on page load
+        window.addEventListener('load', checkChromeExtension);
+    </script>
+</body>
+</html>