📖 Magical Reader Mode

Transform cluttered web pages into clean, focused reading views with customizable themes and typography.

✨ Features

🎯 Core Functionality

• Smart Content Detection - Automatically identifies and extracts main article content
• Distraction-Free Reading - Removes ads, sidebars, pop-ups, and clutter
• One-Click Activation - Toggle reader mode instantly from the toolbar

🎨 Customization

• Three Beautiful Themes - Light, Dark, and Sepia modes
• Typography Controls - Adjustable font size, line height, and reading width
• Font Family Options - Choose from serif, sans-serif, or monospace fonts
• Per-Site Settings - Auto-activation and custom rules for specific websites

⌨️ Keyboard Shortcuts

• Cmd + I - Toggle Magical Reader Mode on/off
• Esc - Exit reader mode (when active)

♿ Accessibility

• WCAG AA Compliant - High contrast and accessible color schemes
• Screen Reader Support - Full compatibility with assistive technologies
• Keyboard Navigation - Complete keyboard accessibility
• Reduced Motion - Respects user's motion preferences

🚀 Installation

From Chrome Web Store (Coming Soon)

1. Visit the Chrome Web Store (link pending)
2. Click "Add to Chrome"
3. Click "Add extension" to confirm

Developer Installation

1. Download or clone this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" (toggle in top right)
4. Click "Load unpacked" and select the reader-x folder
5. The extension will appear in your Chrome toolbar

📖 How to Use

🔧 Basic Usage

1. Activate Reader Mode

   • Click the 📖 icon in your Chrome toolbar
   • Or press Alt + R on any article page
   • Or use the popup to activate

2. Customize Your Reading

   • Use the floating mini-toolbar to adjust:
     • Theme (Light/Dark/Sepia)
     • Font size (A- / A+)
     • Line spacing
     • Article width

3. Exit Reader Mode

   • Click the ✕ button in the mini-toolbar
   • Press Esc key
   • Click the toolbar icon again

⚙️ Advanced Settings

Access the full settings page by:

• Right-clicking the extension icon → "Options"
• Or clicking "Settings" in the popup

Reading Preferences

• Default Theme - Choose your preferred theme
• Font Family - Select from 8+ font options
• Typography - Fine-tune font size and line height
• Article Width - Set comfortable reading width

Behavior Settings

• Auto-activation - Automatically enter reader mode on article pages
• Keyboard Shortcuts - Enable/disable keyboard controls
• Smooth Animations - Control transition effects
• Preserve Images - Include images in reader mode

Site Management

• Whitelist Sites - Auto-activate reader mode on specific domains
• Custom Rules - Advanced per-site configurations
• Blacklist Sites - Disable reader mode on certain sites

Accessibility Options

• High Contrast - Enhanced visibility
• Reduced Motion - Minimize animations
• Large Click Targets - Easier interaction
• Screen Reader Optimization - Enhanced assistive technology support

🔧 Technical Details

Architecture

• Manifest V3 - Uses the latest Chrome extension standard
• Minimal Permissions - Only requests activeTab, storage, and scripting
• Shadow DOM - Isolated styling prevents conflicts with host pages
• Performance Optimized - <150ms activation time, <50MB memory footprint

Content Extraction Algorithm

• Heuristic Analysis - Intelligent DOM scoring to identify main content
• Semantic Structure - Preserves headings, paragraphs, lists, and links
• Image Handling - Maintains images with proper captions
• Fallback Support - Manual content selection for complex pages

Privacy & Security

• Local Processing - All content analysis happens on your device
• No Data Collection - No personal information is transmitted
• No External Requests - Extension works completely offline
• Minimal Permissions - Only requests necessary browser access

🐛 Troubleshooting

Reader Mode Won't Activate

• Ensure the page contains article content (minimum 200 words)
• Try manual content selection if auto-detection fails
• Check if the site blocks content scripts (rare)

Content Not Detected Properly

• Use the manual selection mode from error toast
• Report problematic sites via the feedback option
• Some single-page apps may need page refresh

Styling Issues

• Reset settings to defaults in Options page
• Check for conflicts with other extensions
• Try different themes if content appears incorrectly

Performance Issues

• Disable other extensions temporarily to test
• Clear browser cache and restart Chrome
• Check Chrome's Task Manager for memory usage

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for details.

Development Setup

# Clone the repository
git clone https://github.com/yourusername/reader-x.git
cd reader-x

# Load in Chrome
# 1. Open chrome://extensions/
# 2. Enable Developer mode
# 3. Click "Load unpacked" and select this folder

File Structure

reader-x/
├── manifest.json           # Extension configuration
├── background.js          # Service worker
├── content.js            # Content script & reader overlay
├── content.css           # Content script styles
├── popup/               # Popup interface
│   ├── popup.html
│   ├── popup.css
│   └── popup.js
├── options/             # Settings page
│   ├── options.html
│   ├── options.css
│   └── options.js
└── icons/              # Extension icons
    ├── icon-16.svg
    ├── icon-32.svg
    ├── icon-48.svg
    └── icon-128.svg

📋 Roadmap

Version 1.1 (Coming Soon)

• PDF support for reading documents
• Text-to-speech functionality
• Reading time estimates
• Bookmark and save articles

Version 1.2 (Future)

• AI-powered content enhancement
• Multi-language support
• Sync settings across devices
• Advanced typography options

❓ FAQ

Q: Does this extension work on all websites? A: Magical Reader Mode works on most article-based websites. Some sites with complex layouts or heavy JavaScript may require manual content selection.

Q: Will this extension slow down my browsing? A: No! The extension only activates when you use it and has minimal impact on page loading or browsing performance.

Q: Can I use this extension offline? A: Yes! Once loaded, reader mode works completely offline since all processing happens locally on your device.

Q: Is my reading data tracked or stored? A: No personal data is collected. Only your settings preferences are stored locally on your device.

Q: How do I report bugs or request features? A: Please use the GitHub Issues page or the feedback option in the extension popup.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with modern Chrome Extension APIs
• Icons created with custom SVG design
• Typography inspired by leading reading applications
• Accessibility guidelines from WCAG 2.1

---

Magical Reader Mode - Making the web more readable, one page at a time. ✨

For support, feature requests, or bug reports, please visit our GitHub repository or contact us through the extension popup.