Distraction Blocker with Focus Timer

About

# Distraction Blocker — Focus Timer for the Web ✨

A Chrome extension that helps you stay focused by setting daily time limits per website, giving you a gentle nudge when time is up, and keeping controls at your fingertips via a floating button and right-side sidebar.

## 🌟 Highlights

- 🟦 Floating, draggable right-edge button showing remaining time
- 🧭 Slide‑in sidebar from the right with quick controls
- ⏱️ Per‑site Daily Time Limits (1–1440 minutes)
- 🔔 Polite, motivational full‑page modal when time is up
- ☕ Temporary break (15 min) blocking when you choose to take a pause
- ♻️ Reset Today’s Timer instantly (sidebar and button update immediately)
- 🧠 Heartbeat tracking (no tab switching needed; time accrues automatically)
- ⚙️ Robust Options page with presets and full settings

## 🧑‍💻 How It Works

- The extension tracks time per hostname. You set a daily limit for each site.
- A small rectangular floating button sits on the right edge. It shows remaining time and can be dragged vertically. It expands on hover.
- Click the button to open a right‑side sidebar with:
  - Current site: set/remove limit, quick time buttons, usage summary
  - Today’s usage across your blocked sites
  - “Open Full Settings” (Options page)
- When your time is up, a friendly modal appears in the center of the page with options:
  - Set New Limit & Continue
  - Reset Today’s Timer (usage→0 for current site)
  - Take a 15 min Break (temporarily blocks the site)
  - Continue without changes
- A background heartbeat (every minute) accrues time even when you stay on the same tab, so the time‑up modal shows without needing to switch tabs.

## 🔧 Key Features

- 🕹️ Floating Button
  - Shows remaining time
  - Draggable on the right edge
  - Expands on hover

- 📊 Sidebar Controls
  - Set per‑site limit (1–1440 minutes)
  - Quick add: 15m / 30m / 1h / 2h
  - Remove limit
  - See current site usage + remaining time
  - Open Full Settings

- 🧘 Time‑Up Modal (Polite & Motivational)
  - Clear, friendly language encouraging focus
  - Choose to continue, reset, take a break, or set a new limit
  - Blocks page interaction until you choose (persistent modal)

- ♻️ Instant UI Refresh
  - Reset Today’s Timer updates the sidebar and floating button immediately
  - Background sends a message to refresh visible UI

- ⏳ Heartbeat Tracking
  - A 1‑minute alarm accrues time periodically
  - Time‑up is detected even without tab switching

## ⚙️ Options (Full Settings)

- Add/remove blocked sites
- Set reminder block duration (temporary block after reminder)
- Preset adders for common distracting sites
- Start Fresh: clear all local data (with confirmation)

## 🚀 Quick Start

1. Load the extension (see Install).
2. Visit a site like YouTube.
3. Click the floating button → set a Daily Time Limit (e.g., 15 minutes).
4. Work/browse; when time’s up, you’ll see the modal.
5. Use the sidebar at any time to adjust limits.

## 🧪 Testing Tips

- To see the modal quickly, set a 1‑minute limit. The heartbeat will trigger the modal after about a minute even if you don’t leave the tab.
- You can also switch tabs briefly to force an immediate time update.