# 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
```javascript
// 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
```javascript
// 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)
```javascript
// 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
```javascript
// 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)
```javascript
// Get user ID synchronously (only if already available)
const userId = window.getChromeExtensionUserIdSync();
if (userId) {
    console.log('User ID (sync):', userId);
}
```

### C. Callback-based Access
```javascript
// 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:

### From Extension Popup or Background Script
```javascript
// 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:

```html
<!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
1. **Extension not connected**: Make sure the Chrome extension is connected to the remote server
2. **Content script blocked**: Some sites may block content scripts
3. **Timing issues**: Use event listeners instead of immediate checks

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

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

### Checking Connection Status
```javascript
// 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
