Special Folders: pages/

Opens a welcome page in a new tab when the extension loads.

Runs on Chrome, Edge, Firefox · Manifest V3 · Surfaces: background service worker · Styling: CSS · Level: beginner

Create this project

npx extension@latest create my-special-folders-pages --template special-folders-pages
cd my-special-folders-pages
npm install
npm run dev

!Powered by Extension.js

Special Folders (Pages) Example

Opens a welcome page in a new tab when the extension loads.

What you'll see: A welcome page that opens on install / startup, served from pages/.

How it works: Files inside pages/ are treated as auto-discovered entrypoints , with no manifest.json wiring required. The background script opens one of them on install / startup.

Demonstrates Extension.js's pages/ convention: every HTML file inside the project-root pages/ directory becomes an entrypoint without manifest wiring. The background script opens pages/welcome.html on install / startup.

Try it locally

npx extension@latest create my-special-folders-pages --template special-folders-pages
cd my-special-folders-pages
npm install
npm run dev

A fresh browser window opens with the extension already loaded.

Project layout

.
├── src/
│   ├── images/
│   │   ├── icon.png
│   │   └── javascript.png
│   ├── sandbox/
│   │   ├── index.html
│   │   ├── scripts.js
│   │   └── styles.css
│   ├── background.js
│   └── manifest.json
└── pages/
    ├── custom.html
    ├── main.html
    ├── main.js
    └── welcome.html

Commands

Cloned this repo instead? The examples ship without npm scripts, so run Extension.js directly from the example directory. Run npm install first when the example declares dependencies.

dev

Run the extension in development mode. Target a browser with --browser:

npx extension@latest dev .                  # Chromium (default)
npx extension@latest dev . --browser=chrome
npx extension@latest dev . --browser=edge
npx extension@latest dev . --browser=firefox

build

Build for production:

npx extension@latest build .                # Chromium (default)
npx extension@latest build . --browser=firefox
npx extension@latest build . --browser=edge

preview

Preview the production build with the bundled browser:

npx extension@latest preview .

Tests

This template ships an end-to-end check (template.spec.ts) validated by the examples-repo CI on every commit.

Learn more

extension.devDocumentation for extension.dev