A Chrome extension that makes you think twice before accessing distracting websites
Features • Demo • Installation • How It Works • Development
InPeace isn't just another website blocker. It's a productivity tool with a psychological twist. When you attempt to visit a blocked site, you'll face a multi-stage "shame ritual" designed to make you genuinely reconsider your choice.
| 1️⃣ Disappointment A reminder of what you're doing | 2️⃣ Flashlight Hunt Find & click hidden button 10 times | 3️⃣ Reflection Confront your choices | 4️⃣ Commitment Acknowledge you're wasting time |
The Goal: Add enough friction and self-reflection that you'll often decide it's not worth it.
|
|
demo.mp4
📹 View Demo Video
- Download the latest release
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" (toggle in top-right corner)
- Click "Load unpacked"
- Select the
distfolder from the downloaded release
# Clone the repository git clone https://github.com/yourusername/inpeace.git cd inpeace # Install dependencies npm install # Build the extension npm run build # The extension is now built in the 'dist' folderLoad in Chrome:
- Navigate to
chrome://extensions/ - Enable "Developer mode"
- Click "Load unpacked"
- Select the
distfolder
| Command | Description |
|---|---|
npm run build | 🏗️ Build production version |
npm run dev | 👀 Watch mode for development |
npm run clean | 🧹 Clean dist folder |
npm run format | ✨ Format code with Prettier |
npm test | 🧪 Run tests |
 TypeScript Type-safe code |  Webpack Module bundling |  Tailwind CSS Modern styling |  Manifest V3 Latest API |  Vitest Unit testing |
inpeace/ ├── 📂 src/ │ ├── 🔧 background.ts # Background service worker & blocking logic │ ├── 🎨 popup.ts # Extension popup UI logic │ ├── 🎭 blocked.ts # Shame ritual implementation │ └── 📘 types.ts # TypeScript type definitions ├── 📂 public/ │ ├── 🖼️ popup.html # Extension popup │ ├── 🚫 blocked.html # Blocked page view │ ├── 💅 blocked.css # Blocked page animations & styles │ ├── 🎨 styles.css # Global styles │ └── ⚙️ manifest.json # Extension manifest ├── 📂 tests/ │ └── 🧪 unit/ # Unit tests ├── ⚙️ webpack.config.js # Webpack configuration ├── ⚙️ tailwind.config.js # Tailwind configuration └── 📦 package.json # Dependencies & scripts | 1 | Blocking → Uses Chrome's Declarative Net Request API to intercept requests to blocked websites |
| 2 | Redirect → Automatically redirects to a custom "blocked" page with the shame ritual |
| 3 | Ritual → User must complete four psychological stages designed to create friction |
| 4 | Whitelist → After completion, site is temporarily whitelisted for 30 minutes |
| 5 | Statistics → Tracks daily visit attempts per site to show usage patterns |
Contributions, issues, and feature requests are welcome!
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
For major changes, please open an issue first to discuss what you would like to change.
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by the need for mindful technology use
- Built with modern web technologies and Chrome Extension APIs
- Thanks to all contributors who help improve InPeace
Made with ❤️ and ☕ for a more focused web