ReadoMeter - Chrome Reading Progress Tracker

ReadoMeter is a Chrome extension that helps you track your reading progress across different websites. It automatically saves your position in articles, allows you to manage tracked domains, and provides an easy way to resume reading where you left off.

Features

1. Reading Progress Tracking

• Automatic scroll position tracking on whitelisted domains
• Visual progress bar at the top of tracked pages
• Persistent progress storage across browser sessions
• Automatic scroll restoration to last read position
• Unobtrusive visual feedback with toast notifications

2. Domain Management

• Whitelist specific domains for tracking
• Quick "Add Current" domain functionality
• Easy domain removal
• Clean domain handling (automatically formats URLs to domains)

3. Reading History

• Comprehensive reading progress history
• Fuzzy search through read articles
• Filter by current domain
• Sort by most recent
• Clickable articles that open in new tabs

4. User Interface

• Modern, clean design
• Real-time search and filtering
• Progress visualization
• Responsive and animated components
• User-friendly toast notifications

Installation

Local Development Setup

1. Clone the repository:

git clone https://github.com/yourusername/reado-meter.git
cd reado-meter

2. Load the extension in Chrome:
   • Open Chrome and navigate to chrome://extensions/
   • Enable "Developer mode" in the top-right corner
   • Click "Load unpacked"
   • Select the reado-meter directory

Building for Production

Currently, the extension is loaded unpacked for development. For production:

1. Create a zip file containing:

   • manifest.json
   • background.js
   • content.js
   • popup.js
   • popup.html

2. Submit to Chrome Web Store (when ready for distribution)

Architecture

Component Overview

1. Background Script (background.js)

   • Handles extension initialization
   • Manages tab updates and URL monitoring
   • Coordinates between popup and content scripts
   • Handles domain whitelist checking

2. Content Script (content.js)

   • Tracks scroll position
   • Manages progress bar UI
   • Handles scroll restoration
   • Manages toast notifications
   • Saves reading progress

3. Popup UI (popup.js, popup.html)

   • Manages domain whitelist
   • Displays reading progress
   • Handles search and filtering
   • Provides domain management interface

Data Storage

The extension uses Chrome's storage API to persist:

• Whitelisted domains
• Reading progress per URL
• Scroll positions
• Timestamps

Data structure:

{
  // Whitelisted domains
  whitelistedDomains: ['example.com', 'another-site.com'],
  
  // Reading progress (per URL)
  'https://example.com/article': {
    position: 1234,        // Absolute scroll position
    percentage: 45,        // Progress percentage
    timestamp: 1234567890  // Last read timestamp
  }
}

Key Features Implementation

1. Progress Tracking

   • Uses scroll event listeners with throttling
   • Stores absolute scroll positions
   • Calculates percentage for display
   • Updates in real-time

2. Domain Management

   • Extracts domains from URLs
   • Validates and cleans domain format
   • Manages whitelist in storage
   • Provides quick current domain addition

3. Search & Filtering

   • Implements fuzzy search algorithm
   • Real-time filtering
   • Combines domain and URL matching
   • Supports current domain filtering

Development

File Structure

reado-meter/
├── manifest.json      # Extension configuration
├── background.js     # Background service worker
├── content.js        # Content script for web pages
├── popup.html        # Extension popup UI
├── popup.js          # Popup functionality
└── README.md         # Documentation

Adding New Features

1. Modify Content Script

   • Add new tracking functionality in content.js
   • Update UI components
   • Handle new storage requirements

2. Update Popup

   • Add new UI elements to popup.html
   • Implement handlers in popup.js
   • Update styles as needed

3. Background Processing

   • Add new background tasks in background.js
   • Update message handling
   • Modify storage structure

Best Practices

1. Performance

   • Throttle scroll events
   • Minimize storage operations
   • Use efficient DOM operations
   • Clean up event listeners

2. Security

   • Validate all input
   • Sanitize domain inputs
   • Handle storage safely
   • Follow CSP guidelines

3. User Experience

   • Provide visual feedback
   • Handle errors gracefully
   • Maintain consistent UI
   • Use smooth animations

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

MIT License - feel free to use and modify as needed.

Future Enhancements

Planned features:

• Reading time estimates
• Progress sync across devices
• Reading statistics and analytics
• Custom progress markers
• Export/import functionality
• Reading list integration