A Chrome extension that enforces distraction-free work sessions with commitment-contract mechanics, a soft exit with reflection, and a simple weekly focus summary. Built solo, shippable in 6–8 weeks.
- Session Modes — Choose between Deep Work 🧠, Study 📚, or Custom ⚙️
- Commitment Contract — Once a session starts, the blocklist is locked and cannot be edited
- Dynamic Blocking — Automatically blocks distracting sites when a session starts and unblocks when it ends
- Soft Exit with Reflection — Exiting early triggers a 10-second reflection screen asking what pulled you away
- Session Stats — Track today's focus time, weekly sessions, 7-day consistency score, and recent session history
- First-Run Onboarding — 3-step setup in under 60 seconds
- No frameworks — Built with vanilla HTML, CSS, and JS using Manifest V3
| Technology | Purpose |
|---|---|
| Manifest V3 | Chrome Extension framework |
| HTML / CSS / JS | UI and logic |
declarativeNetRequest |
Site blocking engine |
chrome.storage.local |
Persisting session state and stats |
chrome.alarms |
Session timer and service worker keep-alive |
| Service Worker | Background session management |
focusguard-v1/
├── manifest.json
├── background/
│ └── service-worker.js # Session controller, blocking engine
├── popup/
│ ├── popup.html # Extension popup UI
│ ├── popup.css
│ └── popup.js
├── blocked/
│ ├── blocked.html # Page shown when a site is blocked
│ ├── blocked.js
│ ├── reflection.html # Soft exit reflection screen
│ ├── reflection.css
│ └── reflection.js
├── options/
│ ├── options.html # Blocklist management page
│ └── options.js
├── onboarding/
│ ├── onboarding.html # First-run onboarding flow
│ ├── onboarding.css
│ └── onboarding.js
├── stats/
│ ├── stats.html # Focus stats screen
│ ├── stats.css
│ └── stats.js
└── rules/
└── blocklist.json # declarativeNetRequest rules
Since FocusGuard is not yet on the Chrome Web Store, you can load it manually:
-
Clone the repository:
git clone https://github.com/Richard-1904/FocusGuard.git
-
Open Chrome and navigate to:
chrome://extensions -
Enable Developer Mode using the toggle in the top right corner.
-
Click Load unpacked and select the
FocusGuardfolder. -
The FocusGuard icon will appear in your Chrome toolbar. Click it to get started!
- Click the 🛡️ FocusGuard icon in your toolbar
- Select a mode (Deep Work, Study, or Custom)
- Choose a duration (25, 50, 90 mins or custom)
- Optionally add Today's Work Sites — these will be whitelisted for the session
- Click Start Session
- Blocked sites will redirect to the FocusGuard blocked page showing your remaining time
- The blocklist cannot be edited while a session is active
- Click Exit Session on the blocked page or popup to end early
- A 10-second reflection screen will appear asking "What pulled you away?"
- Choose a preset reason or type your own
- Click Stay in Session to go back, or wait for the countdown to end the session
- Click the FocusGuard icon → Options (or right-click the icon → Options)
- Add or remove domains (one per line)
- Changes can only be made outside of active sessions
- Click 📊 View Stats in the popup
- See today's focus time, weekly sessions, 7-day consistency, and recent session history
- Each session shows whether it was completed fully or exited early with the reason
FocusGuard comes pre-configured to block these sites during sessions:
- youtube.com
- x.com
- instagram.com
- reddit.com
You can customise this list at any time outside of active sessions via the Options page.
All data stays entirely on your device. FocusGuard uses chrome.storage.local exclusively — no accounts, no cloud sync, no data collection of any kind.
Contributions are welcome! Feel free to open an issue or submit a pull request.
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m "Add your feature" - Push to the branch:
git push origin feature/your-feature - Open a Pull Request
MIT License — feel free to use, modify, and distribute.
Built with focus, for focus. 🛡️