TelemedPro/broswer-automation

Fork 0

Files

nasir@endelospay.com 5d869f6a7c Major refactor: Multi-user Chrome MCP extension with remote server architecture

2025-08-21 20:09:57 +05:00

5.7 KiB

Raw Blame History

Getting Chrome Extension User ID in Any Tab

This guide shows you how to access the Chrome extension user ID from any web page or tab.

Method 1: Automatic Content Script (Recommended)

The content script automatically injects the user ID into every page. You can access it in several ways:

A. Global Window Variable

// Check if user ID is available
if (window.chromeExtensionUserId) {
    console.log('User ID:', window.chromeExtensionUserId);
} else {
    console.log('User ID not available yet');
}

B. Session Storage

// Get user ID from session storage
const userId = sessionStorage.getItem('chromeExtensionUserId');
if (userId) {
    console.log('User ID from storage:', userId);
}

C. Event Listener (Best for Dynamic Loading)

// Listen for user ID ready event
window.addEventListener('chromeExtensionUserIdReady', function(event) {
    const userId = event.detail.userId;
    console.log('User ID received:', userId);
    // Your code here
});

// Also check if it's already available
if (window.chromeExtensionUserId) {
    console.log('User ID already available:', window.chromeExtensionUserId);
}

Method 2: User ID Helper API

If the automatic injection doesn't work, you can use the helper API:

A. Simple Promise-based Access

// Get user ID asynchronously
window.getChromeExtensionUserId().then(userId => {
    if (userId) {
        console.log('User ID:', userId);
        // Your code here
    } else {
        console.log('No user ID available');
    }
});

B. Synchronous Access (if already loaded)

// Get user ID synchronously (only if already available)
const userId = window.getChromeExtensionUserIdSync();
if (userId) {
    console.log('User ID (sync):', userId);
}

C. Callback-based Access

// Execute callback when user ID becomes available
window.ChromeExtensionUserID.onUserIdReady(function(userId) {
    console.log('User ID ready:', userId);
    // Your code here
});

Method 3: Manual Injection

You can manually inject the user ID helper into any tab:

// Inject into current active tab
chrome.runtime.sendMessage({ type: 'injectUserIdHelper' }, (response) => {
    if (response.success) {
        console.log('User ID helper injected:', response.message);
    } else {
        console.error('Failed to inject:', response.error);
    }
});

// Inject into specific tab
chrome.runtime.sendMessage({ 
    type: 'injectUserIdHelper', 
    tabId: 123 
}, (response) => {
    console.log('Injection result:', response);
});

Complete Example

Here's a complete example for any web page:

<!DOCTYPE html>
<html>
<head>
    <title>User ID Example</title>
</head>
<body>
    <div id="user-info">Loading user ID...</div>
    
    <script>
        async function getUserId() {
            // Method 1: Check if already available
            if (window.chromeExtensionUserId) {
                return window.chromeExtensionUserId;
            }
            
            // Method 2: Check session storage
            const storedUserId = sessionStorage.getItem('chromeExtensionUserId');
            if (storedUserId) {
                return storedUserId;
            }
            
            // Method 3: Wait for event
            return new Promise((resolve) => {
                const listener = (event) => {
                    window.removeEventListener('chromeExtensionUserIdReady', listener);
                    resolve(event.detail.userId);
                };
                
                window.addEventListener('chromeExtensionUserIdReady', listener);
                
                // Timeout after 5 seconds
                setTimeout(() => {
                    window.removeEventListener('chromeExtensionUserIdReady', listener);
                    resolve(null);
                }, 5000);
            });
        }
        
        // Use the user ID
        getUserId().then(userId => {
            const userInfoDiv = document.getElementById('user-info');
            if (userId) {
                userInfoDiv.textContent = `User ID: ${userId}`;
                console.log('Chrome Extension User ID:', userId);
                
                // Your application logic here
                initializeWithUserId(userId);
            } else {
                userInfoDiv.textContent = 'No user ID available (extension not connected)';
            }
        });
        
        function initializeWithUserId(userId) {
            // Your custom logic here
            console.log(`Initializing application for user: ${userId}`);
        }
    </script>
</body>
</html>

User ID Format

The user ID follows this format: user_{timestamp}_{random}

Example: user_1704067200000_abc123def456

Troubleshooting

User ID Not Available

Extension not connected: Make sure the Chrome extension is connected to the remote server
Content script blocked: Some sites may block content scripts
Timing issues: Use event listeners instead of immediate checks

Manual Injection

If automatic injection fails, you can manually inject the helper:

// From browser console or your page script
chrome.runtime.sendMessage({ type: 'injectUserIdHelper' });

Checking Connection Status

// Check if extension is available
if (typeof chrome !== 'undefined' && chrome.runtime) {
    console.log('Chrome extension context available');
} else {
    console.log('No Chrome extension context');
}

Security Notes

User IDs are anonymous and don't contain personal information
User IDs persist across browser sessions
Each Chrome extension instance has a unique user ID
User IDs are only available when connected to the remote server

5.7 KiB Raw Blame History