@gramercytech/gx-toolkit
Version:
Dev tools for create platform plugins
145 lines (129 loc) • 6.92 kB
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>