The OS You Were Always Missing
Transform every new Chrome tab into a hyper-customizable productivity command center.
✨ Features · 🚀 Quick Start · 🏗️ Architecture · 🤝 Contributing · 📜 License
Project OS is a cutting-edge Chrome New Tab Extension built with React 19, Vite, and Tailwind CSS v4. It replaces your standard blank new tab with an interactive, fully modular productivity dashboard — designed for developers, students, power users, and builders who live in the browser.
A companion landing website (web/) built with GSAP, Lenis smooth scroll, and a liquid-glass UI effect showcases the extension.
🔒 100% local & private. No accounts. No tracking. No telemetry. Your data never leaves your machine.
|
4 handcrafted visual themes:
|
|
|
|
|
|
|
|
|
|
| Layer | Technology |
|---|---|
| Extension Framework | React 19 + Vite 7 |
| Styling | Tailwind CSS v4 + Vanilla CSS Theme Engines |
| Drag & Drop | @dnd-kit/core + @dnd-kit/utilities |
| Activity Graph | react-activity-calendar |
| Icons | Remix Icon (remixicon) |
| Extension API | Chrome Manifest V3 (chrome.storage.local, declarativeNetRequest) |
| Landing Site | GSAP 3 + Lenis smooth scroll |
| Build Tool | Vite 7 (extension) · Vite 8 (web) |
Chrome_Extension/
├── README.md # You are here
├── CONTRIBUTING.md # Contribution guidelines
├── CODE_OF_CONDUCT.md # Community code of conduct
├── LICENSE # MIT License
│
├── Frontend/ # Chrome Extension (Manifest V3)
│ ├── package.json
│ ├── vite.config.js
│ ├── index.html
│ ├── public/
│ │ ├── manifest.json # Chrome Extension manifest
│ │ ├── rules.json # declarativeNetRequest rules
│ │ └── logo.png
│ └── src/
│ ├── App.jsx # Root: state, storage sync, settings
│ ├── main.jsx
│ ├── index.css # Global styles & design tokens
│ ├── components/
│ │ ├── DashboardGrid.jsx # dnd-kit drag & drop layout
│ │ ├── HeroView.jsx # Distraction-free focus view
│ │ ├── Clock.jsx # Smart clock & greeting widget
│ │ ├── Taskbar.jsx # Shortcuts quick-launch bar
│ │ ├── Timer.jsx # Pomodoro focus timer
│ │ ├── Todo.jsx # Task manager
│ │ ├── TimeBoxing.jsx # Hourly routine planner
│ │ ├── StreakGrid.jsx # GitHub-style activity matrix
│ │ ├── WaterReminder.jsx # Hydration tracker
│ │ ├── SongPlayer.jsx # Lofi & YouTube audio player
│ │ ├── ImportantTabs.jsx # Categorized bookmarks
│ │ ├── SettingsPage.jsx # Full settings & theme drawer
│ │ ├── FigmaGlassCard.jsx # Frosted glass card wrapper
│ │ ├── IconPicker.jsx # Custom icon picker UI
│ │ └── TimePicker.jsx # Time picker component
│ ├── utils/
│ │ ├── storage.js # Chrome storage wrapper
│ │ ├── activityStore.js # Focus streak activity logger
│ │ ├── youtube.js # YouTube player helper
│ │ └── spotify.js # Spotify integration helper
│ └── themes/
│ ├── index.js # Theme registry
│ ├── cyberpunk.css
│ ├── manga.css
│ └── pixel.css
│
└── web/ # Landing Website
├── package.json
├── vite.config.js
└── src/
├── App.jsx # Lenis + GSAP scroll orchestration
├── components/
│ ├── Navbar.jsx
│ ├── CursorFollower.jsx # Magnetic custom cursor
│ └── RippleButton.jsx # Ripple-effect CTA button
├── sections/
│ ├── Hero.jsx # Liquid-glass CTA hero
│ ├── Video.jsx # Product showcase
│ ├── Features.jsx # Interactive feature cards
│ ├── Themes.jsx # Theme showcase carousel
│ ├── Comparison.jsx # Before/after comparison
│ ├── Setup.jsx # Installation guide
│ ├── Contributions.jsx # Contributors orbital display
│ ├── FAQs.jsx # Accordion FAQ
│ └── Footer.jsx # Footer with liquid-glass CTAs
├── data/
│ └── contributors.json
└── utils/
└── useLiquidGlass.js # WebGL liquid-glass hook
- Node.js
v18+ - Google Chrome, Brave, Edge, Arc, or any Chromium-based browser
- Mozilla Firefox (also supported)
1. Clone the repository
git clone https://github.com/rahul3rj/Project-OS.git
cd Project-OS2. Install dependencies & build
cd Frontend
npm install
npm run build3. Load into Chrome
- Open
chrome://extensionsin your browser - Enable Developer mode (top-right toggle)
- Click Load unpacked
- Select the
Frontend/distfolder
4. Open a new tab and experience Project OS! 🎉
cd Frontend
npm install
npm run dev
⚠️ The new-tab override requires the built extension.npm run devis for fast UI iteration.
cd Frontend
npm run buildThen open chrome://extensions → click the Reload 🔄 icon on Project OS.
cd web
npm install
npm run devProject OS requests only the minimum permissions required:
"permissions": ["storage", "unlimitedStorage", "declarativeNetRequest"]| Permission | Why it's needed |
|---|---|
storage / unlimitedStorage |
Saves themes, wallpapers, shortcuts, todos, timer stats locally on your device only |
declarativeNetRequest |
Enables smooth audio streaming for Lofi radio & YouTube embeds |
No external servers. No analytics. No accounts. Ever.
Contributions are what make open source such an amazing place to learn, inspire, and create. Any contribution you make is greatly appreciated. 💙
Read our full Contributing Guide →
Quick contribution flow:
# 1. Fork the repo & clone your fork
git clone https://github.com/YOUR_USERNAME/Project-OS.git
# 2. Create a feature branch
git checkout -b feat/your-amazing-feature
# 3. Commit your changes
git commit -m "feat: add your amazing feature"
# 4. Push & open a Pull Request
git push origin feat/your-amazing-featureThanks goes to these wonderful people 💙
Made with contrib.rocks
Is Project OS free?
Yes — 100% free and open source under the MIT License.
Does it collect any data?
No. All data is stored locally using
chrome.storage.local. Nothing is sent to external servers.
Can I use it on Firefox or Edge?
Yes! Firefox is fully supported. Edge and other Chromium-based browsers work great too.
How do I back up my configuration?
Go to Settings → Backup & Restore → Export JSON. To restore, import the same JSON file.
Can I contribute a new widget?
Absolutely! See the Contributing Guide for how to propose and build new widgets.
Distributed under the MIT License. See LICENSE for the full text.
Crafted with ❤️ by Rahul Jha
Developer · Student · Builder · Hustler 🚀
If this project helped you, consider giving it a ⭐ — it means a lot!
