# Use and adapt desktop-new-tab

Use the documented interfaces and source layout for **desktop-new-tab**. The sections below retain the README’s examples and configuration details.

## 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](https://github.com/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.

| Command | What it is for |
| --- | --- |
| `npm run dev` | Preview at `http://127.0.0.1:5173` while you edit. Not the real New Tab. |
| `npm run build` | Writes a static extension into `dist/`. Load that folder in Chrome. **No Vite process needed after this.** |

### Preview while developing

```bash
npm install
npm run dev
```

Open [http://127.0.0.1:5173](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)

```bash
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.

## Troubleshoot a local change

1. Reproduce the smallest example from the [quick-start guide](/docs/up-to-code-desktop-new-tab/quick-start-guide).
2. Compare required configuration and dependency versions with the README.
3. Check the linked issue tracker for the same error. Include the command, runtime version, and relevant error when reporting a problem; omit credentials.

## Source and help

- [GitHub repository](https://github.com/qentrah/desktop-new-tab)
- [Original README](https://github.com/qentrah/desktop-new-tab/blob/main/README.md)
- [Issues and existing reports](https://github.com/qentrah/desktop-new-tab/issues)

The catalog identifies the license as **MIT**. Read the repository license before redistributing source or assets.