Technical Documentation

Technical Documentation

Comprehensive technical documentation for developers and contributors.

System Architecture

Web Guide is built on Chrome's Manifest V3 architecture with three main components communicating via message passing and API calls.

Architecture Overview

┌─────────────────────────────────────────────────────────────┐
│                         User Interface                       │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  Popup UI (popup.html + popup.js)                   │   │
│  │  - Voice input (Web Speech API)                     │   │
│  │  - Voice output (Speech Synthesis)                  │   │
│  │  - Command processing                               │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                            ↕
┌─────────────────────────────────────────────────────────────┐
│                      Content Scripts                         │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  content.js                                          │   │
│  │  - PageExtractor: DOM analysis & data extraction    │   │
│  │  - VisualGuide: Highlights, arrows, tooltips        │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                            ↕
┌─────────────────────────────────────────────────────────────┐
│                    Background Services                       │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  background.js (Service Worker)                      │   │
│  │  - Lifecycle management                              │   │
│  │  - Settings storage                                  │   │
│  │  - Chrome APIs access                                │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                            ↕
┌─────────────────────────────────────────────────────────────┐
│                     External Services                        │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  Groq API (Llama)                                    │   │
│  │  - Page summarization                                │   │
│  │  - Natural language understanding                    │   │
│  │  - Element identification                            │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

Component Table

Component	Technology	Purpose
Popup Script	JavaScript (ES6)	User interface, voice I/O, API orchestration
Content Script	JavaScript (ES6)	DOM extraction, visual guidance rendering
Background Script	Service Worker	Lifecycle, storage, future features
Groq API	Llama (LLM)	Natural language processing, intelligence

Development Tools

Debugging

1. Popup Console: Right-click popup → Inspect
2. Content Script: Right-click page → Inspect → Console tab
3. Background Worker: chrome://extensions → Background Page

Testing

# No build step required
# Just reload extension after code changes
In chrome://extensions:

Click reload icon on extension card
Refresh test webpage
Test functionality

Extension APIs Used

• chrome.runtime - Messaging between components
• chrome.tabs - Current tab information
• chrome.scripting - Content script injection
• chrome.storage - User preferences
• Web Speech API - Voice recognition
• Speech Synthesis API - Text-to-speech

---

← Back to User Guide | Next: API Reference →