Chrome Extension Habit Tracker — Developer Guide

2 min read

Build a Habit Tracker Extension — Full Tutorial

What We’re Building

Daily habit tracking with streak counting and check-off functionality
Midnight reset using alarms, notification reminders for incomplete habits
Options page for managing habits and reminder settings
Weekly summary with visual chart, badge showing progress
Uses alarms, storage, notifications permissions

manifest.json — MV3, alarms + storage + notifications permissions, action with icon, background SW

Step 1: Manifest Configuration

Declare alarms, storage, notifications permissions in manifest.json
Add options_page for habit management UI
Background service worker for alarm handling
Badge text updates for completed/total count

See: [Alarms API](https://theluckystrike.github.io/extension-monetization-playbook/monetization/api-monetization), Notifications API, [Storage API](https://theluckystrike.github.io/extension-monetization-playbook/monetization/api-monetization) Deep Dive

Step 2: Storage Schema

Habit object structure: { id, name, createdDate, completionLog: { "YYYY-MM-DD": boolean } }
Settings object: { reminderTime: "HH:MM", enabled: boolean }
Use [chrome.storage](https://theluckystrike.github.io/extension-monetization-playbook/monetization/api-monetization).local for persistence across sessions

Display today’s date and habits as checkboxes
Show streak count per habit (consecutive days completed)
Visual indicator for completed vs remaining habits
Quick add habit input at bottom

Step 4: Streak Calculation Logic

Iterate through completion log in reverse chronological order
Count consecutive days where completionLog[date] === true
Reset to 0 if a day is missed (excluding today if not yet completed)
Store calculated streaks for display

Step 5: Daily Reset with Alarms

Create alarm using [chrome.alarms](https://theluckystrike.github.io/extension-monetization-playbook/monetization/api-monetization).create() to fire at midnight
Use when parameter with calculated milliseconds until midnight
On alarm trigger: clear today’s completion flags, recalculate streaks
Re-schedule alarm for next day after reset

See: [Alarms API](https://theluckystrike.github.io/extension-monetization-playbook/monetization/api-monetization)

Step 6: Notification Reminders

Use chrome.notifications.create() for reminder alerts
Check incomplete habits at reminder time
Notification shows count of remaining habits
Click notification opens popup for quick check-off
Respect user’s reminder time preference from options

See: Notifications API

Step 7: Options Page

List all habits with delete button
Add new habit input with name field
Reminder time picker (24-hour format)
Toggle for enabling/disabling reminders
Save settings to [chrome.storage](https://theluckystrike.github.io/extension-monetization-playbook/monetization/api-monetization).local

Step 8: Weekly Summary View

Calculate completion rate for past 7 days
Simple bar chart using HTML/CSS (no external libraries)
Each bar represents one day, height based on completion percentage
Display total habits, completed count, average streak

Step 9: Badge Progress Indicator

Update badge text with “X/Y” format (completed/total)
Use chrome.action.setBadgeText() in popup and on completion
Badge updates in real-time as habits are checked off
Clear badge when all habits completed

Testing

Test midnight reset by simulating alarm
Verify streak calculation across multiple days
Check notification triggers at correct times
Ensure data persists after browser restart

What You Learned

Alarm scheduling for daily tasks, notification API for reminders
Storage schema design for habit tracking, streak calculation algorithms
Options page implementation, badge updates, weekly analytics -e

Turn Your Extension Into a Business

Ready to monetize? The Extension Monetization Playbook covers freemium models, Stripe integration, subscription architecture, and growth strategies for Chrome extension developers. —

Part of the Chrome Extension Guide by theluckystrike. Built at zovo.one.

No previous article

No next article