# Install and configure desktop-new-tab

Follow the source instructions for **desktop-new-tab**. Read the prerequisites and configuration steps before running an example.

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

## Check the installation

After setup, continue with the [first example](/docs/up-to-code-desktop-new-tab/quick-start-guide). If a command fails, compare the runtime version, working directory, and required configuration with the original README before changing dependencies.

## 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.