Tab Timer Chrome Extension

Track your browsing habits and boost productivity with intelligent time monitoring

Source Code Install Extension
Tab Timer Chrome Extension Interface

About This Project

Tab Timer is a Chrome extension designed to help users understand and optimize their web browsing habits. By automatically tracking time spent on different domains, it provides valuable insights into digital behavior patterns and helps identify areas for improved productivity.

Built using Chrome's Manifest V3 architecture, this extension demonstrates modern browser extension development practices with service workers, persistent storage, and efficient background processing. The lightweight design ensures minimal impact on browser performance while providing comprehensive time tracking functionality.

Key Features

  • Automatic domain-based time tracking
  • Service worker architecture for efficient background processing
  • Persistent data storage with Chrome Storage API
  • Clean, intuitive popup interface
  • Daily, weekly, and monthly time reports
  • Idle time detection and exclusion

Development Challenges

The main challenge was adapting to Chrome's Manifest V3 requirements, which introduced significant changes to extension architecture. Moving from background pages to service workers required rethinking data persistence and event handling. Additionally, accurately tracking time while respecting user privacy and minimizing performance impact required careful optimization of tracking algorithms and storage strategies.

Feature Showcase

⏱️

Real-time Tracking

Automatically tracks time spent on each domain with second-level precision

📊

Visual Reports

Clean, organized display of time data with domain rankings and percentages

🔒

Privacy First

All data stored locally, no tracking or external data transmission

⚡

Lightweight

Minimal memory footprint and CPU usage with efficient service worker design

Installation Guide

1

Download Extension

Clone or download the extension files from the GitHub repository

2

Enable Developer Mode

Open Chrome Extensions page and enable Developer Mode toggle

3

Load Extension

Click "Load unpacked" and select the extension directory

4

Start Tracking

Extension will automatically begin tracking your browsing time

Code Highlights

Service Worker

chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.tabs.get(activeInfo.tabId, (tab) => {
    if (tab.url) {
      const domain = new URL(tab.url).hostname;
      trackTime(domain);
    }
  });
});

Data Storage

function saveTimeData(domain, timeSpent) {
  chrome.storage.local.get([domain], (result) => {
    const currentTime = result[domain] || 0;
    chrome.storage.local.set({
      [domain]: currentTime + timeSpent
    });
  });
}