Reddit Audio Reader

A Chrome extension that reads Reddit posts and comments aloud with visual highlighting, voice selection, speed control, and keyboard navigation.

✨ Features

🔊 Text-to-Speech

• Reads Reddit post titles, body text, and all comments aloud
• Natural-sounding voices with preference for enhanced TTS voices
• Adjustable speech speed (0.5x - 2x)
• Voice selection from all available system voices
• Persists your voice preference across sessions

🎨 Visual Highlighting

• Highlights the currently read content on the page
• Automatic smooth scrolling to keep highlighted content visible
• 9 color themes: Auto, Orange, Gold, Blue, Green, Purple, Pink, Cyan, Sunset
• Visual theme swatches for easy selection
• Adaptive colors for light and dark Reddit themes
• Synchronized popup theme matches your highlight selection

⌨️ Keyboard Shortcuts

Shortcut	Action
Enter	Start reading
Space	Pause / Resume
Escape	Stop
← / →	Previous / Next item
Shift + ←/→	Previous / Next top-level comment
Ctrl + ←/→	Previous / Next reply
Alt + ←/→	Previous / Next nested reply

📊 Smart Content Detection

• Automatically extracts post title, body, and all comments
• Reads post author username with title (when enabled)
• Tracks comment depth (comment, reply, nested reply)
• Reads upvote counts for posts and comments
• Reads comment author usernames (optional)
• Works with Reddit's new (shreddit) interface

🎛️ Modern Side Panel Interface

• Opens as a side panel for easy access while browsing
• Icon-based playback controls (prev, pause/resume, stop, next)
• Collapsible accordion sections for navigation, settings, and shortcuts
• Real-time progress indicator (X of Y items)
• Status badge with animated indicator (Ready, Playing, Paused)
• Responsive design works at any panel width
• Accessibility-first with ARIA labels and keyboard navigation

⚙️ Reading Options

• Toggle upvotes: Choose whether to read vote counts for posts and comments
• Toggle usernames: Optionally read the author's username for the post and each comment
• Skip long comments: Set a character limit to automatically skip overly long comments (keeps highlighting in sync)

Installation

From Source (Developer Mode)

1. Clone or download this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" in the top right
4. Click "Load unpacked"
5. Select the voice_reddit folder

Files Structure

voice_reddit/
├── manifest.json       # Extension configuration (Manifest V3)
├── background.js       # Service worker for message routing
├── content.js          # Content extraction and highlighting
├── popup.html          # Side panel UI with accordions
├── popup.js            # Side panel controls and state management
├── popup.css           # Modern CSS with design tokens
├── offscreen.html      # Offscreen document for TTS
├── offscreen.js        # TTS engine and queue management
├── icons/
│   ├── icon16.png      # Toolbar icon
│   ├── icon48.png      # Extension page icon
│   └── icon128.png     # Chrome Web Store icon
├── README.md           # Documentation
└── LICENSE             # MIT License

Usage

1. Navigate to any Reddit post (https://www.reddit.com/...)
2. Click the Reddit Reader extension icon in your toolbar
3. The side panel will open on the right side of your browser
4. Click "Read Thread" or press Enter to start reading
5. Use the navigation buttons or keyboard shortcuts to control playback

Settings

• Voice Dropdown: Select from available TTS voices on your system
• Theme Swatches: Click a color swatch to choose your highlight theme
• Speed Slider: Adjust reading speed from 0.5x to 2x with visual markers

Reading Options

Option	Default	Description
Read Upvotes	ON	Include vote counts when reading posts and comments
Read Usernames	OFF	Read the author's username for the post title and each comment
Max Comment Length	0	Skip comments longer than this character count (0 = read all)

🔧 Technical Details

• Manifest V3: Uses modern Chrome extension APIs
• Offscreen Document: Required for Web Speech API in Manifest V3 (service workers don't have access to speechSynthesis)
• Side Panel API: Opens as a persistent side panel instead of popup
• Storage API: Persists user preferences (voice, theme, speed, reading options)
• Element Index Tracking: Maintains proper highlighting sync even when comments are skipped
• CSS Custom Properties: Design system with variables for consistent theming
• Accessibility: ARIA labels, focus states, reduced motion support

Permissions

• activeTab: Access to the current Reddit tab
• scripting: Inject content script for highlighting
• offscreen: Create offscreen document for TTS
• storage: Save user preferences
• sidePanel: Open as side panel

🌐 Browser Compatibility

Browser	Minimum Version	Notes
Chrome	114+	Full support
Edge	114+	Chromium-based, full support
Brave	114+	Chromium-based, should work

🤝 Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

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

---

Made with ❤️ for Reddit users who prefer listening over reading