Focus Mode

A minimalist browser extension that blocks distracting websites and helps you stay focused.

---

How It Works

1. Add sites to block -- from the popup or the dashboard
2. Visit a blocked site -- a full-screen overlay prevents access
3. Request access -- complete a timed reflection challenge to proceed
4. Session expires -- the overlay returns when your browse time runs out

Features

• Wildcard patterns -- block reddit.com, *.twitter.com, or reddit.com/r/funny/*
• Exceptions -- allow specific pages even when the domain is blocked
• Configurable sessions -- set challenge duration, browse time, and session limits per rule
• Reflection prompts -- customizable prompts shown during the challenge timer
• Presets -- one-click import for Social Media and Video site blocks
• Import / Export -- share configs as JSON files
• Activity heatmap -- GitHub-style visualization of blocked distractions over the past year
• Dark mode -- follows your system preference

Quick Start

Install from source

git clone git@github.com:the-wc/focus-mode.git
cd focus-mode
pnpm install
pnpm build

Load the extension in Chrome:

1. Open chrome://extensions
2. Enable Developer mode
3. Click Load unpacked
4. Select the .output/chrome-mv3 folder

Development

pnpm dev            # Start dev server with hot reload
pnpm build          # Production build for Chrome
pnpm build:firefox  # Production build for Firefox
pnpm zip            # Package for distribution

Project Structure

focus-mode/
  entrypoints/
    background.ts          # Storage initialization
    content/               # Overlay (Shadow DOM + React)
      index.tsx             # Content script entry
      App.tsx               # Dark mode wrapper
      BlockedOverlay.tsx
      TimerPrompt.tsx       # Challenge timer + prompt
    popup/                  # Browser action popup
    dashboard/              # Full-page settings UI
  lib/
    storage.ts              # Typed storage definitions
    matching.ts             # Wildcard pattern matching
    prompts.ts              # Prompt pool + random selection
    presets.ts              # Built-in presets
  block-configs/            # Preset JSON files
    social-media.json
    videos.json
    default-prompts.json
  components/ui/            # shadcn components
  wxt.config.ts

Config Format

Export and import configs as JSON:

{
  "name": "My Config",
  "rules": [
    {
      "pattern": "reddit.com",
      "timerSeconds": 30,
      "accessLimit": 2,
      "limitPeriod": "day",
      "browseSeconds": 300
    }
  ]
}

Tech Stack

WXT -- React 19 -- Tailwind CSS v4 -- shadcn/ui -- Lucide Icons

---

_{Built to help you focus on what matters.}