Major refactor: Multi-user Chrome MCP extension with remote server architecture
This commit is contained in:
nasir@endelospay.com
280
test-user-id-page.html
Normal file
280
test-user-id-page.html
Normal file
@@ -0,0 +1,280 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chrome Extension User ID Test</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.status {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
|
||||
.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
|
||||
.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
|
||||
.warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
|
||||
button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
button:hover { background-color: #0056b3; }
|
||||
.code {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
font-family: monospace;
|
||||
margin: 10px 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.method {
|
||||
border: 1px solid #ddd;
|
||||
margin: 10px 0;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.method h3 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Chrome Extension User ID Test Page</h1>
|
||||
<p>This page demonstrates different methods to access the Chrome extension user ID.</p>
|
||||
|
||||
<div id="overall-status" class="status info">
|
||||
Checking for Chrome extension user ID...
|
||||
</div>
|
||||
|
||||
<div class="method">
|
||||
<h3>Method 1: Global Window Variable</h3>
|
||||
<button onclick="checkWindowVariable()">Check window.chromeExtensionUserId</button>
|
||||
<div id="window-result" class="code">Click button to test</div>
|
||||
</div>
|
||||
|
||||
<div class="method">
|
||||
<h3>Method 2: Session Storage</h3>
|
||||
<button onclick="checkSessionStorage()">Check sessionStorage</button>
|
||||
<div id="storage-result" class="code">Click button to test</div>
|
||||
</div>
|
||||
|
||||
<div class="method">
|
||||
<h3>Method 3: Helper API (Async)</h3>
|
||||
<button onclick="checkHelperAPI()">Use getChromeExtensionUserId()</button>
|
||||
<div id="helper-result" class="code">Click button to test</div>
|
||||
</div>
|
||||
|
||||
<div class="method">
|
||||
<h3>Method 4: Helper API (Sync)</h3>
|
||||
<button onclick="checkHelperSync()">Use getChromeExtensionUserIdSync()</button>
|
||||
<div id="helper-sync-result" class="code">Click button to test</div>
|
||||
</div>
|
||||
|
||||
<div class="method">
|
||||
<h3>Method 5: Event Listener</h3>
|
||||
<button onclick="setupEventListener()">Setup Event Listener</button>
|
||||
<div id="event-result" class="code">Click button to setup listener</div>
|
||||
</div>
|
||||
|
||||
<div class="method">
|
||||
<h3>Manual Injection</h3>
|
||||
<button onclick="requestManualInjection()">Request Manual Injection</button>
|
||||
<div id="injection-result" class="code">Click button to request injection</div>
|
||||
</div>
|
||||
|
||||
<h3>Console Output</h3>
|
||||
<div id="console-output" class="code">Console messages will appear here...</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let consoleOutput = [];
|
||||
|
||||
// Override console.log to capture output
|
||||
const originalConsoleLog = console.log;
|
||||
console.log = function(...args) {
|
||||
originalConsoleLog.apply(console, args);
|
||||
consoleOutput.push(args.join(' '));
|
||||
updateConsoleOutput();
|
||||
};
|
||||
|
||||
function updateConsoleOutput() {
|
||||
document.getElementById('console-output').textContent = consoleOutput.slice(-10).join('\n');
|
||||
}
|
||||
|
||||
function updateOverallStatus() {
|
||||
const statusDiv = document.getElementById('overall-status');
|
||||
|
||||
if (window.chromeExtensionUserId) {
|
||||
statusDiv.className = 'status success';
|
||||
statusDiv.textContent = `✅ User ID Available: ${window.chromeExtensionUserId}`;
|
||||
} else if (sessionStorage.getItem('chromeExtensionUserId')) {
|
||||
statusDiv.className = 'status success';
|
||||
statusDiv.textContent = `✅ User ID in Storage: ${sessionStorage.getItem('chromeExtensionUserId')}`;
|
||||
} else {
|
||||
statusDiv.className = 'status warning';
|
||||
statusDiv.textContent = '⚠️ No user ID detected. Make sure Chrome extension is connected.';
|
||||
}
|
||||
}
|
||||
|
||||
function checkWindowVariable() {
|
||||
const result = document.getElementById('window-result');
|
||||
if (window.chromeExtensionUserId) {
|
||||
result.textContent = `✅ Found: ${window.chromeExtensionUserId}`;
|
||||
console.log('Window variable method - User ID:', window.chromeExtensionUserId);
|
||||
} else {
|
||||
result.textContent = '❌ Not found in window.chromeExtensionUserId';
|
||||
console.log('Window variable method - No user ID found');
|
||||
}
|
||||
}
|
||||
|
||||
function checkSessionStorage() {
|
||||
const result = document.getElementById('storage-result');
|
||||
const userId = sessionStorage.getItem('chromeExtensionUserId');
|
||||
if (userId) {
|
||||
result.textContent = `✅ Found: ${userId}`;
|
||||
console.log('Session storage method - User ID:', userId);
|
||||
} else {
|
||||
result.textContent = '❌ Not found in sessionStorage';
|
||||
console.log('Session storage method - No user ID found');
|
||||
}
|
||||
}
|
||||
|
||||
async function checkHelperAPI() {
|
||||
const result = document.getElementById('helper-result');
|
||||
result.textContent = 'Loading...';
|
||||
|
||||
try {
|
||||
if (typeof window.getChromeExtensionUserId === 'function') {
|
||||
const userId = await window.getChromeExtensionUserId();
|
||||
if (userId) {
|
||||
result.textContent = `✅ Found: ${userId}`;
|
||||
console.log('Helper API method - User ID:', userId);
|
||||
} else {
|
||||
result.textContent = '❌ Helper API returned null';
|
||||
console.log('Helper API method - No user ID returned');
|
||||
}
|
||||
} else {
|
||||
result.textContent = '❌ Helper API not available';
|
||||
console.log('Helper API method - Function not available');
|
||||
}
|
||||
} catch (error) {
|
||||
result.textContent = `❌ Error: ${error.message}`;
|
||||
console.log('Helper API method - Error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function checkHelperSync() {
|
||||
const result = document.getElementById('helper-sync-result');
|
||||
|
||||
if (typeof window.getChromeExtensionUserIdSync === 'function') {
|
||||
const userId = window.getChromeExtensionUserIdSync();
|
||||
if (userId) {
|
||||
result.textContent = `✅ Found: ${userId}`;
|
||||
console.log('Helper sync method - User ID:', userId);
|
||||
} else {
|
||||
result.textContent = '❌ Helper sync returned null';
|
||||
console.log('Helper sync method - No user ID available');
|
||||
}
|
||||
} else {
|
||||
result.textContent = '❌ Helper sync API not available';
|
||||
console.log('Helper sync method - Function not available');
|
||||
}
|
||||
}
|
||||
|
||||
function setupEventListener() {
|
||||
const result = document.getElementById('event-result');
|
||||
result.textContent = 'Event listener setup...';
|
||||
|
||||
window.addEventListener('chromeExtensionUserIdReady', function(event) {
|
||||
const userId = event.detail.userId;
|
||||
result.textContent = `✅ Event received: ${userId}`;
|
||||
console.log('Event listener method - User ID received:', userId);
|
||||
updateOverallStatus();
|
||||
});
|
||||
|
||||
// Check if already available
|
||||
if (window.chromeExtensionUserId) {
|
||||
result.textContent = `✅ Already available: ${window.chromeExtensionUserId}`;
|
||||
console.log('Event listener method - Already available:', window.chromeExtensionUserId);
|
||||
} else {
|
||||
result.textContent = '⏳ Waiting for chromeExtensionUserIdReady event...';
|
||||
console.log('Event listener method - Waiting for event...');
|
||||
}
|
||||
}
|
||||
|
||||
function requestManualInjection() {
|
||||
const result = document.getElementById('injection-result');
|
||||
result.textContent = 'Requesting injection...';
|
||||
|
||||
if (typeof chrome !== 'undefined' && chrome.runtime) {
|
||||
chrome.runtime.sendMessage({ type: 'injectUserIdHelper' }, (response) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
result.textContent = `❌ Error: ${chrome.runtime.lastError.message}`;
|
||||
console.log('Manual injection - Error:', chrome.runtime.lastError);
|
||||
} else if (response && response.success) {
|
||||
result.textContent = `✅ ${response.message}`;
|
||||
console.log('Manual injection - Success:', response.message);
|
||||
setTimeout(updateOverallStatus, 1000);
|
||||
} else {
|
||||
result.textContent = `❌ Failed: ${response ? response.error : 'Unknown error'}`;
|
||||
console.log('Manual injection - Failed:', response);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
result.textContent = '❌ Chrome extension context not available';
|
||||
console.log('Manual injection - No Chrome extension context');
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-check on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Page loaded, checking for user ID...');
|
||||
updateOverallStatus();
|
||||
|
||||
// Set up automatic event listener
|
||||
window.addEventListener('chromeExtensionUserIdReady', function(event) {
|
||||
console.log('Auto event listener - User ID ready:', event.detail.userId);
|
||||
updateOverallStatus();
|
||||
});
|
||||
|
||||
// Check periodically for the first 10 seconds
|
||||
let checkCount = 0;
|
||||
const checkInterval = setInterval(() => {
|
||||
checkCount++;
|
||||
updateOverallStatus();
|
||||
|
||||
if (window.chromeExtensionUserId || checkCount >= 20) {
|
||||
clearInterval(checkInterval);
|
||||
if (window.chromeExtensionUserId) {
|
||||
console.log('Auto check - User ID found:', window.chromeExtensionUserId);
|
||||
} else {
|
||||
console.log('Auto check - Stopped checking after 10 seconds');
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user