Your browser, but focused. Flow State by Design.
Munshin is a privacy-first Chrome extension that transforms your browser into a distraction-free sanctuary. Instead of relying on harsh blocklists or punishing restrictions, Munshin uses gentle friction, warm aesthetics, and mindful intentionality to help you rebuild your attention span.
During a "deep work" session, Munshin temporarily hides your distracting tabs and intercepts attempts to visit non-work websites, asking you to pause and reconsider your action.
Click to view interface screenshots
| The Popup Interface | The Interceptor |
|---|---|
 |
 |
| Active Session Timer | Session Complete Notification |
|---|---|
 |
 |
| Session History | Settings Menu |
|---|---|
 |
 |
- Tab Hiding (Not Closing): Select the tabs you need for work. Munshin safely stows away everything else until your session ends.
- The Interceptor: If you try to open a new tab to a distracting site during a session, Munshin intercepts the request and presents a mindful pause screen.
- Dynamic Blocklists: Add or remove your own distracting domains via the Settings menu. No more hardcoded limits.
- Warm Glassy Aesthetics: Designed to feel like a "quiet, warm room" rather than a productivity tool.
- Session Recovery: Browser crashed? Munshin remembers your stowed tabs and lets you restore them.
- Customizable Timers: Set deep work sessions for any duration.
- 100% Local & Private: No accounts. No servers. Everything stays in your browser's
chrome.storage.local.
This extension is built using modern web technologies, outputting a static site that Chrome can run natively.
- Framework: Next.js 15 (App Router, Static Export)
- UI Library: React 19
- Styling: Tailwind CSS v4
- Animations: Motion (Framer Motion)
- Icons: Lucide React
- Extension APIs: Manifest V3 (Service Workers, Declarative Net Requests, Alarms)
Because this is a Next.js application compiled into a Chrome Extension, the development workflow requires building the static export and loading it into Chrome.
- Node.js (v18+)
- npm or pnpm
- Google Chrome browser
Clone the repository and install the dependencies:
git clone <repository-url>
cd Focus
npm installTo build the project for Chrome:
npm run buildThis command runs the Next.js build process, exports the static files to the out/ directory, and then runs a custom postbuild script (rename_next.js).
Why the postbuild script? Next.js prefixes its internal assets with an underscore (e.g.,
_next/). Chrome Extensions explicitly forbid directories starting with an underscore. Therename_next.jsscript safely renames these directories and updates all file references to ensure the extension functions correctly in Chrome.
- Open Google Chrome and navigate to
chrome://extensions/. - Enable Developer mode (toggle in the top right corner).
- Click Load unpacked.
- Select the
out/folder generated in the previous step.
The Munshin extension icon should now appear in your browser toolbar!
The application is structured to support both Next.js page routing (for full-page extension views) and Manifest V3 background scripts.
├── app/ # Next.js App Router pages
│ ├── interceptor/ # The mindful pause screen
│ ├── onboarding/ # Initial setup and permissions flow
│ ├── popup/ # The main extension dropdown UI
│ ├── recovery/ # Session crash recovery screen
│ ├── page.tsx # Marketing/Homepage view
│ └── layout.tsx # Global layout and fonts
├── public/ # Static extension assets
│ ├── background.js # Service Worker (Timer logic, Rules)
│ ├── content.js # Content Script (In-page toasts)
│ ├── manifest.json # Chrome Extension Manifest V3
│ └── icon*.png # Brand icons
├── lib/ # Shared utilities
│ └── chrome.ts # Wrapper around chrome.* APIs
├── wireframes/ # Original design specifications
└── rename_next.js # Crucial build script for Chrome compatibility
- Starting a Session (
app/popup/page.tsx): The user selects tabs to keep open and clicks "Start". The React UI sends a message to the Background Service Worker. - Background Worker (
public/background.js):- Receives the start message.
- Hides (stows) unselected tabs.
- Registers dynamic blocking rules via the
chrome.declarativeNetRequestAPI to redirect distracting sites to theinterceptor.htmlpage. - Starts a
chrome.alarmstimer.
- The Interceptor (
app/interceptor/page.tsx): If a user navigates to a blocked site, they are redirected here. It reads the target URL and the remaining session time from local storage. - Session End: The alarm fires. The background worker removes the blocking rules, restores the hidden tabs, and broadcasts a message to the
content.jsscript to display the "Session Complete" toast notification on the user's active screen.
Munshin requires the following permissions in manifest.json:
tabs: Required to read the user's open tabs (to show in the popup) and to stow/restore them.storage: Required to save session state, preferences, and stowed tab URLs locally.alarms: Required to run the session timer reliably in the background without draining battery.declarativeNetRequest: Required to intercept and redirect requests to distracting websites.notifications: (Optional) Used for system-level alerts.
Everything stays in the browser. There is no database, no telemetry, and no tracking.
Munshin has undergone a rigorous, professional security and architecture audit to ensure the safety and robustness of the extension. All identified vulnerabilities and architectural improvements have been 100% resolved.
Please see the Security_Review.md file in the root directory for the full report and the completed action plan.
Ensure the postbuild script ran successfully. If _next folders exist in your out/ directory, Chrome will refuse to load the scripts.
If you modify background.js, you must open chrome://extensions/ and click the reload icon (↻) on the Munshin extension card to apply the changes. Rebuilding the Next.js app does not automatically hot-reload the background worker.
This project uses the new Tailwind v4. Ensure you aren't trying to use deprecated v3 configuration patterns. The CSS entrypoint is app/globals.css.