📖 Quick Dictionary - Browser Extension

Define any word instantly without leaving your page

A lightweight, privacy-focused browser extension that provides instant dictionary definitions with a single double-click. No context switching, no new tabs - just seamless learning while you read.

---

✨ Features

🎯 Core Functionality

• One-Click Definitions - Double-click any word to see its meaning instantly
• Smart Caching - Lightning-fast lookups for previously searched words (< 1ms)
• PDF Support - Works seamlessly with PDF documents and regular web pages
• Cross-Browser Compatible - Chrome, Edge, and Brave supported

🎨 User Experience

• Beautiful UI - Clean, modern interface inspired by Oxford Languages
• Dark Mode - Automatically adapts to your system theme
• Smart Positioning - Definition popup never goes off-screen
• Pronunciation Guide - Phonetic transcriptions included
• Example Sentences - See words used in context
• Synonyms - Discover similar words

🔒 Privacy & Performance

• No Tracking - Your searches are never logged or shared
• No Account Required - Works immediately after installation
• Offline Capable - Cached words available without internet
• Minimal Permissions - Only requests what's necessary
• Open Source - Fully transparent codebase

---

🚀 Installation

From Source (Development)

1. Clone the repository

   git clone https://github.com/yourusername/quick-dictionary-extension.git
   cd quick-dictionary-extension

2. Load in Chrome/Edge

   • Open chrome://extensions/ (or edge://extensions/)
   • Enable "Developer mode" (toggle in top-right)
   • Click "Load unpacked"
   • Select the extension folder

3. Configure permissions

   • Click "Details" on the extension
   • Enable "Allow access to file URLs" (for PDF support)
   • Set "Site access" to "On all sites"

4. You're ready! 🎉

   • Open any webpage or PDF
   • Double-click a word
   • See the magic happen ✨

📚 Usage

Basic Usage

1. On Websites

   • Navigate to any webpage
   • Double-click any word
   • A circular button appears
   • Hover/click to see the definition

2. On PDFs

   • Open any PDF in Chrome
   • Select text (click and drag or double-click)
   • Click the circular button
   • View instant definition

Keyboard Shortcuts (Planned)

• Alt + D - Define selected word
• Esc - Close definition popup

---

🛠️ Technical Stack

Technologies Used

• JavaScript (ES6+) - Modern, async/await syntax
• Chrome Extension API (Manifest V3) - Latest extension standard
• CSS3 - Advanced animations and responsive design
• Free Dictionary API - Oxford-quality definitions

Architecture

Extension Structure
│
├── manifest.json          # Extension configuration
├── content.js            # Main logic & DOM manipulation
├── styles.css            # Modern UI styling
├── popup.html            # Extension info popup
│
└── icons/                # Extension icons
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Key Design Patterns

• Event-Driven Architecture - Efficient event handling
• Cache-First Strategy - Optimized for speed
• Graceful Degradation - Handles errors elegantly
• Responsive Design - Works on all screen sizes

---

⚙️ Configuration

Customizing Button Position

Edit content.js (lines 67-68):

buttonX = rect.right + window.scrollX + 5;  // Horizontal offset
buttonY = rect.top + window.scrollY - 5;    // Vertical offset

Changing Button Color

Edit styles.css (line 11):

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Cache Size Limit

Edit content.js (line 393):

if (cacheKeys.length > 100) {  // Change 100 to your preferred limit

---

🐛 Troubleshooting

Button Not Appearing on PDFs

Solution:

1. Go to chrome://extensions/
2. Click "Details" on Quick Dictionary
3. Enable "Allow access to file URLs"
4. Reload your PDF

Extension Not Working on Any Site

Check for ad blockers:

• Disable uBlock Origin, AdBlock, or similar extensions temporarily
• These may block the extension's API calls
• Whitelist api.dictionaryapi.dev in your ad

---