A stunning, productivity-focused Chrome extension that transforms your new tab into a personalized dashboard to track 2026 and stay focused.
- 2026 Grid Visualization – A beautiful pixel-art grid showing days passed and remaining
- Live Counters – Days remaining, hours left today, and percentage of year completed
- Animated Progress Rings – Retro-styled circular progress indicators
| Widget | Description |
|---|---|
| 🍅 Pomodoro Timer | Focus sessions with break tracking and audio alerts |
| ✅ To-Do List | Kanban-style tasks (Today / This Week / Later) with drag-and-drop |
| 📓 Notepad | Quick notes with optional Google Drive sync |
| ⏱️ Timer | Customizable countdown timer |
| ⏲️ Stopwatch | Simple stopwatch with lap tracking |
| 🕐 Clock | Clean digital clock display |
- Google Calendar Sync – View your events directly in the new tab
- Daily Events – Today's schedule at a glance
- Week View – Full week calendar overview
- Month View – Monthly calendar with event indicators
- 2048 – Classic sliding puzzle game with state persistence
- Tetris – Full-featured Tetris with scoring and levels
- Drag & Drop Layout – Arrange widgets anywhere on screen
- Resizable Widgets – Adjust widget sizes to your preference
- Custom Labels – Rename any widget
- Custom Image Widget – Add your own background images
- YouTube Player – Embed videos or playlists for ambient music/focus
- Daily Affirmations – Rotating motivational messages
-
Clone the repository
git clone https://github.com/uday03meh/mitab.git cd mitab -
Install dependencies & build
npm install npm run build
-
Load in Chrome
- Navigate to
chrome://extensions/ - Enable Developer mode (toggle in top-right)
- Click Load unpacked
- Select the
distfolder
- Navigate to
-
Open a new tab – Your dashboard is ready!
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite 7 | Build tool & dev server |
| Chrome Extension APIs | Storage, identity, new tab override |
| Google Calendar API | Calendar event fetching |
| Google Drive API | Notepad cloud sync |
| react-draggable | Widget drag functionality |
| react-resizable | Widget resize functionality |
| react-grid-layout | Layout management |
- Hero View – Full new tab with the 2026 grid and counters
- Widget Dashboard – Multiple widgets arranged (Pomodoro, Calendar, ToDo, Clock)
- Calendar Integration – Week view showing real Google Calendar events
- Games – 2048 or Tetris in action
- Widget Selector – The add widget popup menu
- Customization – Resized/repositioned widgets showing flexibility
The extension requires:
- Storage – Save widget positions, settings, and game states locally
- Identity – Google OAuth for Calendar and Drive integration (optional)
react-extension/
├── public/
│ ├── manifest.json # Chrome extension manifest
│ └── icon.png # Extension icon
├── src/
│ ├── components/ # All widget components
│ │ ├── Dashboard.jsx
│ │ ├── Pomodoro.jsx
│ │ ├── ToDoList.jsx
│ │ ├── Game2048.jsx
│ │ ├── Tetris.jsx
│ │ └── ...
│ ├── App.jsx # Main app with year calculations
│ ├── index.css # Global styles & theming
│ └── main.jsx # React entry point
├── bridge/
│ └── yt-bridge.html # YouTube player iframe bridge
└── package.json
Made with ♥ by Uday Mehtani
This project is open source and available under the MIT License.