gh-christianlouis-docuelevate/browser-extension/VISUAL_GUIDE_V1.0.md

# Browser Extension - Visual Guide

This document provides a visual overview of the DocuElevate browser extension interface and functionality.

## Extension Icon

The extension icon appears in your browser's toolbar:

- **Location**: Browser toolbar (top right, next to address bar)
- **Icon**: DocuElevate logo in multiple sizes (16px, 32px, 48px, 128px)
- **Action**: Click to open popup interface

## Popup Interface

### Configuration View (First-Time Setup)

When you first install the extension, you'll see the configuration screen:

```
┌─────────────────────────────────────────┐
│  [🔷 logo]  DocuElevate                 │
├─────────────────────────────────────────┤
│                                         │
│  Configuration                          │
│                                         │
│  DocuElevate Server URL:                │
│  ┌───────────────────────────────────┐ │
│  │ https://docuelevate.example.com   │ │
│  └───────────────────────────────────┘ │
│                                         │
│  Session Cookie (optional):             │
│  ┌───────────────────────────────────┐ │
│  │ session=your_session_value        │ │
│  └───────────────────────────────────┘ │
│  Required if authentication is enabled │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │     Save Configuration            │ │
│  └───────────────────────────────────┘ │
│                                         │
└─────────────────────────────────────────┘
```

**Dimensions**: 400px wide, ~300px height
**Colors**: Green buttons (#4CAF50), clean white background

### Send File View (Main Interface)

After configuration, the main interface appears:

```
┌─────────────────────────────────────────┐
│  [🔷 logo]  DocuElevate                 │
├─────────────────────────────────────────┤
│                                         │
│  Send File to DocuElevate               │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │ Current URL:                      │ │
│  │ https://example.com/document.pdf  │ │
│  └───────────────────────────────────┘ │
│                                         │
│  Filename (optional):                   │
│  ┌───────────────────────────────────┐ │
│  │                                   │ │
│  └───────────────────────────────────┘ │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │    Send to DocuElevate            │ │
│  └───────────────────────────────────┘ │
│  ┌───────────────────────────────────┐ │
│  │      Change Settings              │ │
│  └───────────────────────────────────┘ │
│                                         │
└─────────────────────────────────────────┘
```

### Success Message View

After successfully sending a file:

```
┌─────────────────────────────────────────┐
│  [🔷 logo]  DocuElevate                 │
├─────────────────────────────────────────┤
│                                         │
│  Send File to DocuElevate               │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │ Current URL:                      │ │
│  │ https://example.com/document.pdf  │ │
│  └───────────────────────────────────┘ │
│                                         │
│  Filename (optional):                   │
│  ┌───────────────────────────────────┐ │
│  │                                   │ │
│  └───────────────────────────────────┘ │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │    Send to DocuElevate            │ │
│  └───────────────────────────────────┘ │
│  ┌───────────────────────────────────┐ │
│  │      Change Settings              │ │
│  └───────────────────────────────────┘ │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │ ✓ File sent successfully!         │ │
│  │   Task ID: abc-123-def            │ │
│  │   Filename: document.pdf          │ │
│  └───────────────────────────────────┘ │
│                                         │
└─────────────────────────────────────────┘
```

**Success Message**: Green background (#d4edda), bordered

### Error Message View

If an error occurs:

```
┌─────────────────────────────────────────┐
│  [🔷 logo]  DocuElevate                 │
├─────────────────────────────────────────┤
│                                         │
│  Send File to DocuElevate               │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │ Current URL:                      │ │
│  │ https://example.com/file.exe      │ │
│  └───────────────────────────────────┘ │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │    Send to DocuElevate            │ │
│  └───────────────────────────────────┘ │
│  ┌───────────────────────────────────┐ │
│  │      Change Settings              │ │
│  └───────────────────────────────────┘ │
│                                         │
│  ┌───────────────────────────────────┐ │
│  │ ✗ Error: Unsupported file type   │ │
│  └───────────────────────────────────┘ │
│                                         │
└─────────────────────────────────────────┘
```

**Error Message**: Red background (#f8d7da), bordered

## Context Menu Integration

When you right-click on a page or link:

```
┌────────────────────────────┐
│  Copy                      │
│  Cut                       │
│  Paste                     │
│ ─────────────────────────  │
│  Save Link As...           │
│  Copy Link Address         │
│ ─────────────────────────  │
│  🔷 Send to DocuElevate    │  ← Added by extension
│ ─────────────────────────  │
│  Inspect                   │
└────────────────────────────┘
```

## Browser Notification

After sending a file via context menu, a system notification appears:

```
┌─────────────────────────────────────────┐
│  [🔷]  DocuElevate                      │
│                                         │
│  File sent successfully!                │
│  Task ID: abc-123-def                   │
│                                         │
│                              [Dismiss]  │
└─────────────────────────────────────────┘
```

**Notification Type**: Browser native notification
**Duration**: Auto-dismiss after 5-10 seconds

## Chrome Extensions Page

The extension appears in Chrome's extensions management:

```
Chrome Extensions (chrome://extensions/)
┌───────────────────────────────────────────────────────┐
│  DocuElevate - Send to Document Processor             │
│  [🔷 Icon]                                            │
│                                                       │
│  Send files from your browser directly to             │
│  DocuElevate for processing                           │
│                                                       │
│  Version: 1.0.0                                       │
│  ID: (auto-generated)                                 │
│                                                       │
│  ☑ Enabled                                            │
│                                                       │
│  Permissions:                                         │
│  • Read and change data on websites                   │
│  • Display notifications                              │
│  • Manage downloads                                   │
│                                                       │
│  [Details]  [Remove]  [Errors]                        │
└───────────────────────────────────────────────────────┘
```

## Color Scheme

- **Primary Green**: #4CAF50 (buttons, active elements)
- **Hover Green**: #45a049
- **Background**: #f8f9fa (light gray)
- **Text**: #333 (dark gray)
- **Border**: #e9ecef (light gray)
- **Success**: #d4edda (light green background)
- **Error**: #f8d7da (light red background)
- **Info**: #e7f3ff (light blue background)

## Typography

- **Font Family**: System fonts (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto)
- **Font Size**: 14px (body), 20px (h1), 16px (h2)
- **Line Height**: 1.5
- **Font Weight**: 400 (normal), 500 (labels), 600 (headings)

## Responsive Design

The extension popup maintains a fixed width of 400px but adjusts height based on content:

- **Configuration view**: ~300px height
- **Send file view**: ~350px height
- **With status message**: ~400px height

## Accessibility Features

- **Keyboard Navigation**: Full tab navigation support
- **ARIA Labels**: Proper labeling for screen readers
- **Focus States**: Clear visual focus indicators (green outline)
- **Color Contrast**: WCAG AA compliant contrast ratios
- **Semantic HTML**: Proper heading hierarchy and form structure

## User Flow Diagram

```
    ┌─────────────┐
    │   Install   │
    │  Extension  │
    └──────┬──────┘
           │
           ▼
    ┌─────────────┐
    │  Configure  │
    │  Server URL │
    └──────┬──────┘
           │
           ▼
    ┌─────────────┐     ┌──────────────┐
    │ Navigate to │────▶│ Click Icon   │
    │  File URL   │     │ (or R-click) │
    └─────────────┘     └──────┬───────┘
                               │
                               ▼
                        ┌──────────────┐
                        │ Send to API  │
                        └──────┬───────┘
                               │
                   ┌───────────┴───────────┐
                   ▼                       ▼
            ┌─────────────┐         ┌─────────────┐
            │   Success   │         │    Error    │
            │ Notification│         │   Message   │
            └─────────────┘         └─────────────┘
```

## Browser Support

| Browser | Version | Status | Notes |
|---------|---------|--------|-------|
| Chrome | 88+ | ✅ Supported | Full Manifest v3 support |
| Edge | 88+ | ✅ Supported | Chromium-based, full support |
| Brave | Latest | ✅ Supported | Chromium-based |
| Opera | Latest | ✅ Supported | Chromium-based |
| Firefox | 109+ | ⚠️ Partial | Manifest v3 support (temporary install) |
| Safari | 15.4+ | ❓ Untested | May require modifications |

## Security Indicators

The extension displays no security warnings and requests minimal permissions:

- ✅ No "Read and change all your data" warning
- ✅ Only requests specific host permissions when configured
- ✅ No access to browsing history
- ✅ No access to bookmarks or downloads
- ✅ No remote code execution

## Performance

- **Popup Load Time**: < 100ms
- **API Request**: Depends on server (typically 1-3 seconds)
- **Memory Usage**: < 5MB
- **CPU Usage**: Negligible (only active when popup is open)
- **Network**: Only communicates with configured DocuElevate server

---

This visual guide provides an overview of the browser extension interface. For installation instructions, see [QUICKSTART.md](QUICKSTART.md). For detailed documentation, see [docs/BrowserExtension.md](../docs/BrowserExtension.md).