GitHubTry a project
Projects

desktop-new-tab

Turn Chrome’s new tab into a desktop with folders, links, widgets, and local storage.

GitHubDocs
Account
qentrah
License
MIT
Technology
JavaScript
Status
Public repository
desktop-new-tab — original project screenshot 1

About desktop-new-tab

Turn Chrome’s new tab into a desktop with folders, links, widgets, and local storage.

Original project page

Install & get started

Terminal
Shell
git clone https://github.com/qentrah/desktop-new-tab.git
cd desktop-new-tab
npm install
npm run build
Follow the installation guide

From the repository

Desktop New Tab

A macOS-style Chrome new tab. Folders, site links, Finder windows, a dock, wallpaper, and desktop widgets — all stored locally in SQLite (sql.js) inside the browser.

MIT licensed. Open source.

What you get

  • Desktop folders and links (right-click for New Folder / New Site / Add Widget)
  • Finder windows with breadcrumbs and nested folders
  • Drag URLs from Chrome onto the desktop or into a folder
  • Widgets: GitHub Stats (defaults to Up-to-code), Clock, Notes
  • Settings: wallpaper, light / dark / system, boot screen
  • Local persistence — no account, no server

Two ways to run it

Chrome cannot use the Vite dev server as a New Tab page. Vite is only a live preview.

CommandWhat it is for
npm run devPreview at http://127.0.0.1:5173 while you edit. Not the real New Tab.
npm run buildWrites a static extension into dist/. Load that folder in Chrome. No Vite process needed after this.

Preview while developing

Terminal
Shell
npm install
npm run dev

Open http://127.0.0.1:5173. Hot reload works here. Your real New Tab still uses whatever you last loaded from dist/.

Load the extension locally (no Vite)

Terminal
Shell
npm install
npm run build

Then in Chrome:

  1. Open chrome://extensions
  2. Turn on Developer mode
  3. Click Load unpacked
  4. Choose the dist folder in this repo

Every new tab opens dist/index.html as a normal page so Chrome does not draw the “Customise Chrome” footer under the dock. Rebuild and click Reload on the extension card when source changes. Allow the extra permissions if Chrome asks.

The extension icon (public/icons/) is copied into dist/icons/ on build and shows on chrome://extensions.

Icons

Chrome wants 16, 48, and 128. They live here:

  • public/icons/icon-16.png
  • public/icons/icon-32.png
  • public/icons/icon-48.png
  • public/icons/icon-128.png
  • public/icons/icon-1024.png (source, white Apple on black)

index.html also points at the 128px icon so the Vite preview tab matches.

Stack

  • React 18 + Vite (base: './' so the unpacked build uses relative paths)
  • Chrome MV3 chrome_url_overrides.newtab
  • sql.js WASM + IndexedDB
  • Local wallpapers and macOS-style icons in public/

License

MIT © 2026 Ahmed Mansour