205 lines
5.7 KiB
Markdown
205 lines
5.7 KiB
Markdown
# 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
|