@gramercytech/gx-toolkit
Version:
Dev tools for create platform plugins
199 lines (175 loc) • 7.08 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Proxy URI Pattern Test</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
}
.container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 30px;
}
.test-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #e9ecef;
border-radius: 6px;
}
.test-section h3 {
margin-top: 0;
color: #495057;
}
.url-test {
margin: 10px 0;
padding: 10px;
background: #f8f9fa;
border-left: 4px solid #007bff;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 13px;
word-break: break-all;
}
.should-match {
border-left-color: #28a745;
}
.should-not-match {
border-left-color: #dc3545;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #0056b3;
}
.status {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
font-weight: bold;
}
.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>
</head>
<body>
<div class="container">
<h1>JavaScript Proxy URI Pattern Test</h1>
<div class="test-section">
<h3>Default Pattern</h3>
<p>Default pattern: <code>uploads\/plugin-version\/\d+\/file_name\/.*\.js(\?.*)?</code></p>
<p>This should match JavaScript files in the uploads/plugin-version/* path on any domain.</p>
</div>
<div class="test-section">
<h3>URLs That Should Match (Will Redirect)</h3>
<div class="url-test should-match">
https://example.com/uploads/plugin-version/123/file_name/script.js
</div>
<div class="url-test should-match">
https://westernightwall.zenith-develop.env.eventfinity.app/uploads/plugin-version/3/file_name/T9OvqS1727804478.js
</div>
<div class="url-test should-match">
https://different-domain.com/uploads/plugin-version/456/file_name/myfile.js?signature=abc123&expires=789
</div>
<div class="url-test should-match">
https://api.staging.example.org/uploads/plugin-version/999/file_name/component.js?token=xyz
</div>
</div>
<div class="test-section">
<h3>URLs That Should NOT Match (No Redirect)</h3>
<div class="url-test should-not-match">
https://example.com/uploads/versions/123/file_name/script.js
<small>(different path: versions instead of plugin-version)</small>
</div>
<div class="url-test should-not-match">
https://example.com/uploads/plugin-version/123/file_name/style.css
<small>(not a .js file)</small>
</div>
<div class="url-test should-not-match">
https://example.com/other-path/plugin-version/123/file_name/script.js
<small>(wrong base path)</small>
</div>
<div class="url-test should-not-match">
https://localhost:3060/src/Plugin.vue
<small>(localhost - prevent redirect loops)</small>
</div>
</div>
<div class="test-section">
<h3>Test Actions</h3>
<p>Click the buttons below to test loading JavaScript files:</p>
<button onclick="testUrl('https://example.com/uploads/plugin-version/123/file_name/test.js')">
Test Matching URL
</button>
<button onclick="testUrl('https://example.com/uploads/plugin-version/456/file_name/test.js?signed=true')">
Test Matching URL with Query
</button>
<button onclick="testUrl('https://example.com/other-path/test.js')">
Test Non-Matching URL
</button>
<div id="status"></div>
</div>
<div class="test-section">
<h3>Instructions</h3>
<ol>
<li>Install and enable the JavaScript Proxy extension</li>
<li>Configure it to redirect to your local development server</li>
<li>Open browser developer tools to see network requests</li>
<li>Click the test buttons above to see which URLs get redirected</li>
<li>URLs matching the pattern should redirect to your local server</li>
<li>URLs not matching should load normally (and probably fail)</li>
</ol>
</div>
</div>
<script>
function testUrl(url) {
const status = document.getElementById('status');
status.innerHTML = `<div class="status">Testing: ${url}</div>`;
// Create a script element to test the URL
const script = document.createElement('script');
script.src = url;
script.onload = function() {
status.innerHTML = `<div class="status success">✅ Successfully loaded: ${url}</div>`;
};
script.onerror = function() {
status.innerHTML = `<div class="status error">❌ Failed to load: ${url}<br><small>This is expected for test URLs that don't exist</small></div>`;
};
// Add to page to trigger the request
document.head.appendChild(script);
// Remove after a short delay
setTimeout(() => {
if (script.parentNode) {
script.parentNode.removeChild(script);
}
}, 5000);
}
// Log current page URL for reference
console.log('Test page URL:', window.location.href);
console.log('Use browser dev tools to monitor network requests and see proxy behavior');
</script>
</body>
</html>