Productivity Browser Extension

Project roadmap

1. 01

   Create the extension skeleton

   ~1.5h

   Create a Manifest V3 extension: manifest.json with a background service worker, an action popup, an options page and the permissions tabs, idle, alarms and storage, plus host permissions for content scripts. Load it in Chrome from chrome://extensions with Load unpacked. Done when: the extension loads without errors, and its popup opens.

2. 02

   Track the active site

   ~3h

   In the service worker, listen to tabs.onActivated, tabs.onUpdated and windows.onFocusChanged to know which domain is currently active. Service workers can be stopped at any time, so save the current session (domain and start time) with chrome.storage.session instead of relying on variables, and use a chrome.alarms alarm every minute to add elapsed time. Ignore browser pages such as chrome://. Done when: switching between sites records time for each domain, even after the service worker restarts.

3. 03

   Store usage in IndexedDB

   ~2h

   Create an IndexedDB database with a usage store keyed by date and domain, holding the total seconds. Write small helper functions (or use the idb library) to add time and read a day's totals. Keep 30 days of history and delete older entries. Done when: after browsing, today's totals per domain can be read from IndexedDB.

4. 04

   Handle idle and sleep

   ~2h

   Use chrome.idle.onStateChanged with a 60-second detection interval: stop counting when the state is idle or locked, and resume when it's active again. Also stop counting when no browser window has focus. When the computer wakes from sleep, never count the time it was asleep. Done when: leaving the computer idle for a few minutes adds no time to the active site.

5. 05

   Show the daily breakdown

   ~2h

   In the popup, read today's totals and show the top sites as a bar or donut chart (for example with Chart.js, bundled locally since extensions can't load remote scripts), plus a list with minutes per site and today's total. Add buttons to switch between today and the last 7 days. Done when: the popup shows an accurate breakdown that matches your browsing.

6. 06

   Add limits and reminders

   ~2.5h

   On the options page, let the user add sites with a daily limit in minutes, saved in chrome.storage.sync. When a site goes over its limit, the service worker tells a content script on that tab to show an overlay saying how long you've spent, with Close and Snooze 10 minutes buttons. Show the reminder at most once per snooze period. Done when: going over a test limit of 1 minute shows the overlay, and Snooze works.

7. 07

   Test the time logic

   ~2h

   Move the time calculations (splitting a session across midnight, ignoring idle periods, adding to totals) into plain functions and test them with Vitest. Write a manual test checklist in TESTING.md covering switching tabs, idle, sleep, closing the browser and limits, and go through it. Done when: npm test passes and TESTING.md is filled in.

Resources

• DocsChrome extensions: getting started
• DocsExtension service worker lifecycle
• Docschrome.idle API
• DocsUsing IndexedDB (MDN)
• DocsWebExtensions (MDN)