⏱️ Browsing Time Tracker

A Chrome extension that tracks your browsing time on each website with beautiful visual charts and idle detection.

✨ Features

• 📊 Time Tracking: Automatically tracks time spent on each website
• 🎨 Visual Charts: Beautiful bar charts showing top 5 most visited sites
• 📋 Detailed List: Complete list of all sites sorted by time spent
• ⏸️ Idle Detection: Automatically pauses tracking when you're idle
• 💾 Data Persistence: Saves data locally (resets daily at midnight)
• 📤 CSV Export: Export your browsing data for analysis
• 🔄 Auto-Reset: Data automatically resets each day

📦 Installation

Method 1: Developer Mode (Recommended for testing)

1. Download or clone this repository to your computer

2. Generate icons (one-time setup):

   • Open icon-generator.html in your browser
   • Click "Download Icons"
   • Move the downloaded PNG files to the icons/ folder

3. Install in Chrome:

   • Open Chrome and navigate to chrome://extensions/
   • Enable Developer mode (toggle in top-right corner)
   • Click Load unpacked
   • Select the browsing-time-tracker folder
   • The extension is now installed!

4. Pin the extension (optional but recommended):

   • Click the extensions icon (puzzle piece) in Chrome toolbar
   • Click the pin icon next to "Browsing Time Tracker"

Method 2: Manual Icon Creation

If the icon generator doesn't work:

1. Create a simple clock icon at sizes: 16x16, 48x48, 128x128
2. Save as: icon16.png, icon48.png, icon128.png
3. Place in the icons/ folder

🚀 Usage

Viewing Your Data

1. Click the extension icon in Chrome toolbar
2. See your browsing statistics:
   • Total sites visited today
   • Total time spent browsing
   • Bar chart of top 5 sites
   • Complete list with time bars

Time Format

• Displayed as: 2h 34m (hours and minutes)
• Tracks: Hours, minutes, seconds (internally)

Idle Detection

The extension automatically pauses tracking when:

• No mouse/keyboard activity for 60 seconds
• Computer is locked
• Tracking resumes when you become active again

Exporting Data

1. Open the extension popup
2. Click "📊 Export CSV" button
3. File downloads as: browsing-time-YYYY-MM-DD.csv
4. CSV contains: Domain, Time (HH:MM), Total Seconds

Resetting Data

1. Open the extension popup
2. Click "🗑️ Reset" button
3. Confirm to clear all data for today
4. Note: Data also auto-resets at midnight

🔒 Privacy

• All data stays local - No external servers
• No tracking - We don't track you
• Chrome storage only - Data stored in browser
• Daily reset - Automatic cleanup

📁 File Structure

browsing-time-tracker/
├── manifest.json          # Extension configuration
├── background.js          # Time tracking logic
├── popup.html            # Extension popup UI
├── popup.css             # Popup styles
├── popup.js              # Popup functionality
├── icon-generator.html   # Icon generator tool
├── icons/
│   ├── icon16.png        # Extension icon (16px)
│   ├── icon48.png        # Extension icon (48px)
│   └── icon128.png       # Extension icon (128px)
└── README.md             # This file

🛠️ Technical Details

Permissions Used

• tabs - Track tab switches and URLs
• storage - Save browsing data locally
• idle - Detect when user is idle
• activeTab - Access current tab information

Tracking Logic

• Tracks time when tab is active and focused
• Groups by domain (e.g., youtube.com, github.com)
• Ignores: chrome://, edge://, file://, extension pages
• Saves every 30 seconds for persistence

Data Storage

{
  "siteData": {
    "youtube.com": 3600,
    "github.com": 1800
  },
  "lastResetDate": "2026-02-06"
}

🐛 Troubleshooting

Extension not tracking?

1. Check if extension is enabled in chrome://extensions/
2. Refresh the page you want to track
3. Make sure you're not in incognito mode (unless enabled)
4. Check console for errors (background script)

Icons not showing?

1. Generate icons using icon-generator.html
2. Verify PNG files are in icons/ folder
3. Check file names: icon16.png, icon48.png, icon128.png

Data not saving?

1. Check Chrome storage permissions
2. Clear extension data and reinstall
3. Check browser console for errors

🔄 Updates

To update the extension after making changes:

1. Make your changes to the files
2. Go to chrome://extensions/
3. Find "Browsing Time Tracker"
4. Click the refresh icon (circular arrow)
5. Changes are now active!

📄 License

MIT License - Feel free to use, modify, and distribute!

💡 Future Enhancements

• Weekly/monthly reports
• Set time limits for specific sites
• Dark mode support
• Notification when reaching time limits
• Sync across devices

🤝 Contributing

Feel free to fork and submit pull requests!

---

Happy tracking! ⏱️