A premium, minimal Chrome/Edge new tab page with a dark-glass bento grid aesthetic.
Add unlimited shortcuts, drag to reorder, auto-loads favicons, full dark & light theme.
Coming soon — link will be added on approval.
- Download the latest ZIP
- Unzip it
- Open Chrome →
chrome://extensions/or Edge →edge://extensions/ - Enable Developer mode (top-right toggle)
- Click "Load unpacked" → select the
mosaic/folder - Open a new tab ✅
| Feature | Detail |
|---|---|
| Unlimited shortcuts | Add as many site shortcuts as you want |
| Auto favicon | Icons load automatically via Google S2 favicon API with a letter-badge fallback |
| Drag & drop order | Drag any shortcut card to resequence — saved instantly |
| Edit & delete | Hover a card to reveal ✏️ edit and 🗑 delete action buttons |
| Dark & Light theme | Toggle with ☀️/🌙 — View Transition API cross-fade |
| Multi-engine search | Google · GitHub · DuckDuckGo · YouTube — Tab cycles |
| Live clock | Real-time HH:MM:SS with context-aware greeting |
| Editable name | Click the greeting name to personalise it |
| Web Audio tones | Synth sounds on actions (toggle with 🔊) |
| Keyboard navigation | Full keyboard accessibility throughout |
| Persistent | Everything saved in localStorage — no account needed |
| Zero dependencies | Pure HTML + CSS + JS — loads in < 5ms |
| Key | Action |
|---|---|
/ |
Focus the search bar |
Tab |
Next shortcut card |
Shift + Tab |
Previous shortcut card |
Enter / Space |
Open focused shortcut |
E |
Edit focused shortcut |
Delete / Backspace |
Delete focused shortcut |
Tab (in search) |
Cycle search engine |
Enter (in search) |
Execute search |
Escape |
Close modal |
mosaic/
├── index.html — Page structure, widgets, modal
├── styles.css — Full design system, dark/light themes
├── app.js — All logic: shortcuts, drag-drop, theme, clock, search
├── manifest.json — Chrome/Edge Extension Manifest v3
├── icons/
│ ├── icon.svg — Source icon (edit this to change the design)
│ ├── icon-16.png — Toolbar icon
│ ├── icon-32.png — Windows taskbar icon
│ ├── icon-48.png — Extensions management page icon
│ └── icon-128.png — Store + install dialog icon
├── store-listing/
│ └── ready/ — 1280×800 screenshots ready for store upload
├── CHANGELOG.md — Version history
├── PUBLISHING.md — Chrome Web Store publishing guide
├── EDGE_PUBLISHING.md — Edge Add-ons publishing guide
└── GITHUB_RELEASES.md — GitHub Releases setup guide
- Fork the repo
- Create a feature branch:
git checkout -b feat/my-feature - Commit:
git commit -m 'feat: add my feature' - Push and open a Pull Request
Mosaic collects zero data. All state (shortcuts, theme, name) is stored locally in your browser's localStorage. Nothing is sent to any server.
MIT © Aditya Shelke