codeseed
Sign in
Explore Projects
JavaScriptadvancedwebAI generated

Productivity Browser Extension

A browser extension that tracks time spent per website, shows a daily usage breakdown in a popup, and lets users set time limits with gentle block reminders. Learners practice the WebExtensions API, background scripts, and cross-tab state tracking.

Estimate
~12h
Steps
6
Completed by
0
Proposed by
codeseed.app

WebExtensions API · Chrome APIs · IndexedDB

Sign in to claim this project

Project roadmap

  1. 01

    Set up the extension

    ~2h

    Configure the extension manifest and a background service worker that tracks active tab changes.

  2. 02

    Track time per site

    ~2.5h

    Record time spent per domain into IndexedDB as tabs switch and the user goes idle.

  3. 03

    Build the popup UI

    ~2h

    Show today's usage breakdown as a chart inside the extension popup.

  4. 04

    Add time limits

    ~2.5h

    Let users set per-site daily time limits and show a content-script warning overlay when exceeded.

  5. 05

    Add an options page

    ~1.5h

    Build an options page for managing tracked sites and their limits.

  6. 06

    Handle idle and sleep states

    ~1.5h

    Account for browser idle and sleep states so tracked time stays accurate.

Resources

Ready to build this?

Get a GitHub repo and start building. Your AI reviewer checks each step as you go.

~12h · 6 steps

Tech stack

WebExtensions APIChrome APIsIndexedDB