copilot-swe-agent[bot]
14d7d1b4ef
- Created comprehensive visual guide with ASCII diagrams - Renamed old visual guide to VISUAL_GUIDE_V1.0.md - Added UI mockups, data flow diagrams, and use cases - Documented feature comparison and browser compatibility - Added security model visualization Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
312 lines
16 KiB
Markdown
312 lines
16 KiB
Markdown
# 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).
|