diff --git a/browser-extension/VISUAL_GUIDE.md b/browser-extension/VISUAL_GUIDE.md index 06e248f9..54879854 100644 --- a/browser-extension/VISUAL_GUIDE.md +++ b/browser-extension/VISUAL_GUIDE.md @@ -1,311 +1,239 @@ -# Browser Extension - Visual Guide +# Web Clipping Feature - Visual Overview (v1.1.0) -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: +## New UI Elements +### Popup Interface - Mode Selection ``` -┌─────────────────────────────────────────┐ -│ [🔷 logo] DocuElevate │ -├─────────────────────────────────────────┤ -│ │ -│ Configuration │ -│ │ -│ DocuElevate Server URL: │ -│ ┌───────────────────────────────────┐ │ -│ │ https://docuelevate.example.com │ │ -│ └───────────────────────────────────┘ │ -│ │ -│ Session Cookie (optional): │ -│ ┌───────────────────────────────────┐ │ -│ │ session=your_session_value │ │ -│ └───────────────────────────────────┘ │ -│ Required if authentication is enabled │ -│ │ -│ ┌───────────────────────────────────┐ │ -│ │ Save Configuration │ │ -│ └───────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────┘ +┌─────────────────────────────────────┐ +│ 🔧 DocuElevate │ +├─────────────────────────────────────┤ +│ │ +│ Select Mode: │ +│ ┌──────────┐ ┌──────────┐ │ +│ │ Send URL │ │ Clip Page│ │ +│ └──────────┘ └──────────┘ │ +│ (active) (inactive) │ +│ │ +└─────────────────────────────────────┘ ``` -**Dimensions**: 400px wide, ~300px height -**Colors**: Green buttons (#4CAF50), clean white background - -### Send File View (Main Interface) - -After configuration, the main interface appears: - +### Send URL Mode ``` -┌─────────────────────────────────────────┐ -│ [🔷 logo] DocuElevate │ -├─────────────────────────────────────────┤ -│ │ -│ Send File to DocuElevate │ -│ │ -│ ┌───────────────────────────────────┐ │ -│ │ Current URL: │ │ -│ │ https://example.com/document.pdf │ │ -│ └───────────────────────────────────┘ │ -│ │ -│ Filename (optional): │ -│ ┌───────────────────────────────────┐ │ -│ │ │ │ -│ └───────────────────────────────────┘ │ -│ │ -│ ┌───────────────────────────────────┐ │ -│ │ Send to DocuElevate │ │ -│ └───────────────────────────────────┘ │ -│ ┌───────────────────────────────────┐ │ -│ │ Change Settings │ │ -│ └───────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────┘ +┌─────────────────────────────────────┐ +│ 📤 Send URL to DocuElevate │ +├─────────────────────────────────────┤ +│ Current URL: │ +│ https://example.com/document.pdf │ +│ │ +│ Filename (optional): │ +│ [ ] │ +│ │ +│ ┌───────────────────────────────┐ │ +│ │ Send to DocuElevate │ │ +│ └───────────────────────────────┘ │ +│ ┌───────────────────────────────┐ │ +│ │ Change Settings │ │ +│ └───────────────────────────────┘ │ +└─────────────────────────────────────┘ ``` -### Success Message View - -After successfully sending a file: - +### Clip Page Mode ``` -┌─────────────────────────────────────────┐ -│ [🔷 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 │ │ -│ └───────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────┘ +┌─────────────────────────────────────┐ +│ 📝 Clip Web Page │ +├─────────────────────────────────────┤ +│ Page Title: │ +│ Example Blog Post - My Site │ +│ │ +│ Filename (optional): │ +│ [ ] │ +│ Will be saved as PDF │ +│ │ +│ ┌───────────────────────────────┐ │ +│ │ Clip Full Page │ │ +│ └───────────────────────────────┘ │ +│ ┌───────────────────────────────┐ │ +│ │ Clip Selection │ │ +│ └───────────────────────────────┘ │ +│ ┌───────────────────────────────┐ │ +│ │ Change Settings │ │ +│ └───────────────────────────────┘ │ +└─────────────────────────────────────┘ ``` -**Success Message**: Green background (#d4edda), bordered - -### Error Message View - -If an error occurs: +## Context Menu Options +### Right-click on any page: ``` -┌─────────────────────────────────────────┐ -│ [🔷 logo] DocuElevate │ -├─────────────────────────────────────────┤ -│ │ -│ Send File to DocuElevate │ -│ │ -│ ┌───────────────────────────────────┐ │ -│ │ Current URL: │ │ -│ │ https://example.com/file.exe │ │ -│ └───────────────────────────────────┘ │ -│ │ -│ ┌───────────────────────────────────┐ │ -│ │ Send to DocuElevate │ │ -│ └───────────────────────────────────┘ │ -│ ┌───────────────────────────────────┐ │ -│ │ Change Settings │ │ -│ └───────────────────────────────────┘ │ -│ │ -│ ┌───────────────────────────────────┐ │ -│ │ ✗ Error: Unsupported file type │ │ -│ └───────────────────────────────────┘ │ -│ │ -└─────────────────────────────────────────┘ +┌────────────────────────────────┐ +│ Back │ +│ Forward │ +│ Reload │ +│ ────────────────────── │ +│ Save as... │ +│ Print... │ +│ ────────────────────── │ +│ ▶ Send URL to DocuElevate │ ← v1.0.0 +│ ▶ Clip Full Page │ ← v1.1.0 NEW +│ ────────────────────── │ +│ Inspect │ +└────────────────────────────────┘ ``` -**Error Message**: Red background (#f8d7da), bordered - -## Context Menu Integration - -When you right-click on a page or link: - +### Right-click on selected text: ``` -┌────────────────────────────┐ -│ Copy │ -│ Cut │ -│ Paste │ -│ ───────────────────────── │ -│ Save Link As... │ -│ Copy Link Address │ -│ ───────────────────────── │ -│ 🔷 Send to DocuElevate │ ← Added by extension -│ ───────────────────────── │ -│ Inspect │ -└────────────────────────────┘ +┌────────────────────────────────┐ +│ Copy │ +│ Search Google for... │ +│ ────────────────────── │ +│ ▶ Clip Selection │ ← v1.1.0 NEW +│ ────────────────────── │ +│ Inspect │ +└────────────────────────────────┘ ``` -## Browser Notification - -After sending a file via context menu, a system notification appears: +## Data Flow Diagrams +### URL Mode (v1.0.0 - Existing) ``` -┌─────────────────────────────────────────┐ -│ [🔷] DocuElevate │ -│ │ -│ File sent successfully! │ -│ Task ID: abc-123-def │ -│ │ -│ [Dismiss] │ -└─────────────────────────────────────────┘ +User clicks Extension sends DocuElevate +"Send URL" → URL to API → downloads file + | | + └─ /api/process-url ``` -**Notification Type**: Browser native notification -**Duration**: Auto-dismiss after 5-10 seconds - -## Chrome Extensions Page - -The extension appears in Chrome's extensions management: - +### Clip Mode (v1.1.0 - New) ``` -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] │ -└───────────────────────────────────────────────────────┘ +User clicks Content script Browser API Background DocuElevate +"Clip Page" → captures HTML → converts to → script → processes + with styles PDF (local) uploads PDF + | + └─ /api/files/upload ``` -## Color Scheme +## Feature Comparison -- **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) +| Feature | v1.0.0 | v1.1.0 | +|---------|--------|--------| +| Send file URLs | ✅ | ✅ | +| Clip full pages | ❌ | ✅ | +| Clip selections | ❌ | ✅ | +| PDF conversion | ❌ | ✅ | +| Context menu | 1 option | 3 options | +| Permissions | 4 perms | 6 perms | +| Host access | None | All sites* | -## Typography +*Only when user explicitly clips -- **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) +## Use Cases -## Responsive Design +### URL Mode +- Send document links (PDFs, Word files) +- Send image URLs +- Quick sharing of file links -The extension popup maintains a fixed width of 400px but adjusts height based on content: +### Clip Full Page +- Save articles and blog posts +- Archive web pages +- Capture documentation +- Save receipts and confirmations +- Preserve web content -- **Configuration view**: ~300px height -- **Send file view**: ~350px height -- **With status message**: ~400px height +### Clip Selection +- Save specific sections +- Extract important quotes +- Capture data tables +- Save highlighted text -## 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 +## Example Workflow ``` - ┌─────────────┐ - │ Install │ - │ Extension │ - └──────┬──────┘ - │ - ▼ - ┌─────────────┐ - │ Configure │ - │ Server URL │ - └──────┬──────┘ - │ - ▼ - ┌─────────────┐ ┌──────────────┐ - │ Navigate to │────▶│ Click Icon │ - │ File URL │ │ (or R-click) │ - └─────────────┘ └──────┬───────┘ - │ - ▼ - ┌──────────────┐ - │ Send to API │ - └──────┬───────┘ - │ - ┌───────────┴───────────┐ - ▼ ▼ - ┌─────────────┐ ┌─────────────┐ - │ Success │ │ Error │ - │ Notification│ │ Message │ - └─────────────┘ └─────────────┘ +1. User browses article + └─ https://blog.example.com/article + +2. User likes content, wants to save + +3. Option A: Click extension → Clip Page → Clip Full Page + └─ Entire article saved as PDF + +4. Option B: Select important text → Right-click → Clip Selection + └─ Only selected content saved as PDF + +5. PDF uploaded to DocuElevate + └─ Processed (OCR, metadata extraction) + +6. Saved to configured storage + └─ Dropbox / Google Drive / etc. ``` -## Browser Support +## Browser Compatibility -| 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 | +``` +Chrome 90+ ✅ Full support +Edge 90+ ✅ Full support +Firefox 94+ ✅ Full support +Brave ✅ Full support +Opera ✅ Full support +``` -## Security Indicators +## Security Model -The extension displays no security warnings and requests minimal permissions: +``` +┌─────────────────────────────────────┐ +│ User Action Required │ +│ (Click "Clip" or context menu) │ +└──────────────┬──────────────────────┘ + │ + ▼ +┌─────────────────────────────────────┐ +│ Content Access (Active Tab Only) │ +│ - Capture HTML │ +│ - Extract styles │ +└──────────────┬──────────────────────┘ + │ + ▼ +┌─────────────────────────────────────┐ +│ Local Processing │ +│ - Convert to PDF in browser │ +│ - No server-side conversion │ +└──────────────┬──────────────────────┘ + │ + ▼ +┌─────────────────────────────────────┐ +│ Upload to User's Server │ +│ - Only to configured DocuElevate │ +│ - No third-party transmission │ +└─────────────────────────────────────┘ +``` -- ✅ 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 +## Notifications -## Performance +### Success +``` +┌──────────────────────────────────┐ +│ ✅ DocuElevate │ +│ Page clipped successfully! │ +│ Task ID: abc-123-def │ +└──────────────────────────────────┘ +``` -- **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 +### Error +``` +┌──────────────────────────────────┐ +│ ❌ DocuElevate Error │ +│ Failed to clip page: │ +│ Connection timeout │ +└──────────────────────────────────┘ +``` ---- +## Summary -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). +**v1.1.0 adds powerful web clipping capabilities while maintaining the simplicity and security of v1.0.0.** + +Key improvements: +- 🆕 Clip full pages or selections +- 🆕 Local PDF conversion +- 🆕 Enhanced context menu +- 🔒 User-initiated only +- 🌐 Cross-browser compatible +- 📝 Comprehensive documentation diff --git a/browser-extension/VISUAL_GUIDE_V1.0.md b/browser-extension/VISUAL_GUIDE_V1.0.md new file mode 100644 index 00000000..06e248f9 --- /dev/null +++ b/browser-extension/VISUAL_GUIDE_V1.0.md @@ -0,0 +1,311 @@ +# 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).