Major refactor: Multi-user Chrome MCP extension with remote server architecture

2025-08-21 20:09:57 +05:00
parent d97cad1736
commit 5d869f6a7c
125 changed files with 16249 additions and 11906 deletions
--- a/app/chrome-extension/PERSISTENT_CONNECTION_CHANGES.md
+++ b/app/chrome-extension/PERSISTENT_CONNECTION_CHANGES.md
@@ -0,0 +1,133 @@
+# Persistent Connection Implementation Summary
+
+## Overview
+Modified the Chrome extension to implement persistent connection management that maintains connections until explicitly disconnected by the user.
+
+## Key Changes Made
+
+### 1. Enhanced RemoteServerClient (`utils/remote-server-client.ts`)
+
+#### Connection State Persistence
+- **Added persistent connection state management**:
+  - `persistentConnectionEnabled = true` by default
+  - `connectionStateKey = 'remoteServerConnectionState'` for storage
+  - Automatic state saving/loading to chrome.storage.local
+
+#### New Methods Added
+- `saveConnectionState()`: Saves connection state to chrome storage
+- `loadConnectionState()`: Loads and restores connection state on startup
+- `clearConnectionState()`: Clears saved state on manual disconnect
+- `setPersistentConnection(enabled)`: Enable/disable persistent behavior
+- `isPersistentConnectionEnabled()`: Get current persistence setting
+
+#### Enhanced Reconnection Logic
+- **Increased max reconnection attempts**: From 10 to 50 for persistent connections
+- **Extended reconnection delays**: Up to 60 seconds for persistent connections
+- **Smarter reconnection**: Only attempts reconnection for unexpected disconnections
+- **Connection restoration**: Automatically restores connections within 24 hours
+
+#### Connection Lifecycle Improvements
+- **State saving on connect**: Automatically saves state when connection established
+- **State clearing on disconnect**: Clears state only on manual disconnect
+- **Robust error handling**: Better handling of connection timeouts and errors
+
+### 2. Enhanced Background Script (`entrypoints/background/index.ts`)
+
+#### Browser Event Listeners
+- **Added `initBrowserEventListeners()`** function with listeners for:
+  - `chrome.runtime.onStartup`: Browser startup detection
+  - `chrome.runtime.onInstalled`: Extension install/update events
+  - `chrome.runtime.onSuspend`: Browser suspension events
+  - `chrome.tabs.onActivated`: Tab switch monitoring
+  - `chrome.windows.onFocusChanged`: Window focus monitoring
+
+#### Connection Health Monitoring
+- **Added `startConnectionHealthCheck()`**: 5-minute interval health checks
+- **Periodic status logging**: Regular connection status verification
+- **Proactive monitoring**: Detects and logs connection state changes
+
+### 3. Enhanced Popup UI (`entrypoints/popup/App.vue`)
+
+#### Visual Indicators
+- **Persistent connection badge**: "🔗 Persistent: Active" indicator
+- **Enhanced status text**: "Connected (Persistent)" vs "Disconnected - Click Connect for persistent connection"
+- **Persistent info message**: "🔗 Connection will persist until manually disconnected"
+
+#### CSS Styling
+- **`.persistent-indicator`**: Styling for persistent connection elements
+- **`.persistent-badge`**: Green gradient badge with shadow
+- **`.persistent-info`**: Info box with green accent border
+
+#### Status Text Updates
+- **Clear messaging**: Emphasizes persistent nature of connections
+- **User guidance**: Explains that connections persist until manual disconnect
+
+## Technical Implementation Details
+
+### Connection State Storage
+```javascript
+const state = {
+  wasConnected: boolean,
+  connectionTime: number,
+  serverUrl: string,
+  lastSaveTime: number
+}
+```
+
+### Reconnection Strategy
+- **Exponential backoff**: 5s, 10s, 20s, 40s, up to 60s intervals
+- **Persistent attempts**: Up to 50 attempts for persistent connections
+- **Smart restoration**: Only restores connections from last 24 hours
+
+### Browser Event Handling
+- **Tab switches**: Connection maintained across all tab operations
+- **Window focus**: Connection persists during window focus changes
+- **Browser suspension**: State saved before suspension, restored after
+- **Extension updates**: Connection state preserved across updates
+
+## Behavior Changes
+
+### Before Implementation
+- Manual connection required each session
+- Connections might not survive browser events
+- Limited reconnection attempts (10)
+- No connection state persistence
+
+### After Implementation
+- **"Connect once, stay connected"** behavior
+- **Connections persist across**:
+  - Popup open/close cycles
+  - Browser tab switches
+  - Window focus changes
+  - Extended idle periods
+  - Browser suspension/resume
+- **Robust reconnection**: Up to 50 attempts with smart backoff
+- **State restoration**: Automatic connection restoration after browser restart
+- **Manual disconnect only**: Connections only terminate when explicitly disconnected
+
+## User Experience Improvements
+
+### Clear Visual Feedback
+- Persistent connection status clearly indicated
+- Real-time connection duration display
+- Visual badges and indicators for connection state
+
+### Predictable Behavior
+- Users know connections will persist until manually disconnected
+- No unexpected disconnections during tool operations
+- Consistent behavior across browser lifecycle events
+
+### Robust Connectivity
+- Automatic reconnection when server becomes available
+- Connection state restoration after browser restart
+- Extended retry attempts for better reliability
+
+## Testing
+- Comprehensive test plan provided in `PERSISTENT_CONNECTION_TEST_PLAN.md`
+- Covers all aspects of persistent connection behavior
+- Includes verification points and success criteria
+
+## Compatibility
+- Maintains backward compatibility with existing MCP clients
+- No breaking changes to tool execution or API
+- Enhanced reliability without changing core functionality