chore(release): v0.2.3

fix: Some fields cannot be overridden from config.manifest (#46 )
fix: Read boolean maniest options from meta tags correctly
2023-07-16 17:05:39 +00:00 · 2023-07-16 12:03:14 -05:00 · 2023-07-16 11:29:34 -05:00 · 2023-07-16 11:17:33 -05:00 · 2023-07-16 11:14:50 -05:00 · 2023-07-16 15:47:47 +00:00
135 changed files with 6592 additions and 4964 deletions
@@ -19,7 +19,7 @@ jobs:
      - name: Setup PNPM
        uses: pnpm/action-setup@v2
        with:
-          version: 7
+          version: 8

      - name: Setup NodeJS
        uses: actions/setup-node@v3
@@ -47,4 +47,4 @@ jobs:
          pnpm publish

      - name: GitHub Release
-        run: pnpx changelogen@latest gh release
+        run: pnpx changelogen@latest gh release --token ${{ secrets.GITHUB_TOKEN }}
@@ -16,7 +16,7 @@ jobs:
      - name: Setup PNPM
        uses: pnpm/action-setup@v2
        with:
-          version: 7
+          version: 8

      - name: Setup NodeJS
        uses: actions/setup-node@v3
@@ -15,3 +15,6 @@ node_modules
 TODOs.md
 web-ext.config.js
 web-ext.config.ts
+templates/*/pnpm-lock.yaml
+templates/*/yarn.lock
+templates/*/package-lock.json
@@ -1,2 +1 @@
 ignore-workspace-root-check=true
-use-node-version=18.16.0
@@ -1,3 +1,7 @@
 .output
 coverage
 dist
+e2e/project
+.wxt
+docs/.vitepress/cache
+pnpm-lock.yaml
@@ -1,5 +1,216 @@
 # Changelog

+## v0.2.3
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.2.2...v0.2.3)
+
+### 🩹 Fixes
+
+- Correctly lookup open port ([#45](https://github.com/aklinker1/wxt/pull/45))
+- Read boolean maniest options from meta tags correctly ([495c5c8](https://github.com/aklinker1/wxt/commit/495c5c8))
+- Some fields cannot be overridden from `config.manifest` ([#46](https://github.com/aklinker1/wxt/pull/46))
+
+### ❤️ Contributors
+
+- Aaron
+- Aaron Klinker
+
+## v0.2.2
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.2.1...v0.2.2)
+
+### 🩹 Fixes
+
+- Register content scripts correctly in dev mode ([2fb5a54](https://github.com/aklinker1/wxt/commit/2fb5a54))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+
+## v0.2.1
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.2.0...v0.2.1)
+
+### 🚀 Enhancements
+
+- Support all content script options ([6f5bf89](https://github.com/aklinker1/wxt/commit/6f5bf89))
+
+### 🩹 Fixes
+
+- Remove HMR log ([90fa6bf](https://github.com/aklinker1/wxt/commit/90fa6bf))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+
+## v0.2.0
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.1.6...v0.2.0)
+
+### 🚀 Enhancements
+
+- ⚠️ Rename `defineBackgroundScript` to `defineBackground` ([5b48ae9](https://github.com/aklinker1/wxt/commit/5b48ae9))
+- Recongize unnamed content scripts (`content.ts` and `content/index.ts`) ([3db5cec](https://github.com/aklinker1/wxt/commit/3db5cec))
+
+### 📖 Documentation
+
+- Update templates ([f28a29e](https://github.com/aklinker1/wxt/commit/f28a29e))
+- Add docs for each type of entrypoint ([77cbfc1](https://github.com/aklinker1/wxt/commit/77cbfc1))
+- Add inline JSDoc for public types ([375a2a6](https://github.com/aklinker1/wxt/commit/375a2a6))
+
+### 🏡 Chore
+
+- Run `wxt prepare` on `postinstall` ([c1ea9ba](https://github.com/aklinker1/wxt/commit/c1ea9ba))
+- Don't format lockfile ([5c7e041](https://github.com/aklinker1/wxt/commit/5c7e041))
+
+#### ⚠️ Breaking Changes
+
+- ⚠️ Rename `defineBackgroundScript` to `defineBackground` ([5b48ae9](https://github.com/aklinker1/wxt/commit/5b48ae9))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+
+## v0.1.6
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.1.5...v0.1.6)
+
+### 🩹 Fixes
+
+- Resolve tsconfig paths in vite ([ea92a27](https://github.com/aklinker1/wxt/commit/ea92a27))
+- Add logs when a hot reload happens ([977246f](https://github.com/aklinker1/wxt/commit/977246f))
+
+### 🏡 Chore
+
+- React and Vue starter templates ([#33](https://github.com/aklinker1/wxt/pull/33))
+- Svelte template ([#34](https://github.com/aklinker1/wxt/pull/34))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+- Aaron
+
+## v0.1.5
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.1.4...v0.1.5)
+
+### 🩹 Fixes
+
+- Include `vite/client` types ([371be99](https://github.com/aklinker1/wxt/commit/371be99))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+
+## v0.1.4
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.1.3...v0.1.4)
+
+### 🩹 Fixes
+
+- Fix regression where manifest was not listed first in build summary ([fa2b656](https://github.com/aklinker1/wxt/commit/fa2b656))
+- Fix config hook implementations for vite plugins ([49965e7](https://github.com/aklinker1/wxt/commit/49965e7))
+
+### 📖 Documentation
+
+- Update CLI screenshot ([0a26673](https://github.com/aklinker1/wxt/commit/0a26673))
+
+### 🏡 Chore
+
+- Update prettier ignore ([68611ae](https://github.com/aklinker1/wxt/commit/68611ae))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+
+## v0.1.3
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.1.2...v0.1.3)
+
+### 🚀 Enhancements
+
+- Add tsconfig path aliases ([#32](https://github.com/aklinker1/wxt/pull/32))
+
+### 🩹 Fixes
+
+- Merge `manifest` option from both inline and user config ([05ca998](https://github.com/aklinker1/wxt/commit/05ca998))
+- Cleanup build summary with sourcemaps ([ac0b28e](https://github.com/aklinker1/wxt/commit/ac0b28e))
+
+### 📖 Documentation
+
+- Create documentation site ([#31](https://github.com/aklinker1/wxt/pull/31))
+
+### 🏡 Chore
+
+- Upgrade to pnpm 8 ([0ce7c9d](https://github.com/aklinker1/wxt/commit/0ce7c9d))
+
+### ❤️ Contributors
+
+- Aaron
+- Aaron Klinker
+
+## v0.1.2
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.1.1...v0.1.2)
+
+### 🚀 Enhancements
+
+- Accept a function for `config.manifest` ([ee49837](https://github.com/aklinker1/wxt/commit/ee49837))
+
+### 🩹 Fixes
+
+- Add missing types for `webextension-polyfill` and the `manifest` option ([636aa48](https://github.com/aklinker1/wxt/commit/636aa48))
+- Only add imports to JS files ([b29c3c6](https://github.com/aklinker1/wxt/commit/b29c3c6))
+- Generate valid type for `EntrypointPath` when there are no entrypoints ([6e7184d](https://github.com/aklinker1/wxt/commit/6e7184d))
+
+### 🌊 Types
+
+- Change `config.vite` to `UserConfig` ([ef6001e](https://github.com/aklinker1/wxt/commit/ef6001e))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+
+## v0.1.1
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.1.0...v0.1.1)
+
+### 🩹 Fixes
+
+- Allow dashes in entrypoint names ([2e51e73](https://github.com/aklinker1/wxt/commit/2e51e73))
+- Unable to read entrypoint options ([#28](https://github.com/aklinker1/wxt/pull/28))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+
+## v0.1.0
+
+Initial release of WXT. Full support for production builds and initial toolkit for development:
+
+- HMR support when HTML page dependencies change
+- Reload extension when background changes
+- Reload HTML pages when saving them directly
+- Re-register and reload tabs when content scripts change
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.0.2...v0.1.0)
+
+### 🚀 Enhancements
+
+- Content scripts reloading ([#25](https://github.com/aklinker1/wxt/pull/25))
+
+### 📖 Documentation
+
+- Update feature list ([0255028](https://github.com/aklinker1/wxt/commit/0255028))
+
+### 🤖 CI
+
+- Create github release ([b7c078f](https://github.com/aklinker1/wxt/commit/b7c078f))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+
 ## v0.0.2

 [compare changes](https://github.com/aklinker1/wxt/compare/v0.0.1...v0.0.2)
@@ -25,7 +236,6 @@

 ### 🏡 Chore

- Update changelog ([a9af4d3](https://github.com/aklinker1/wxt/commit/a9af4d3))
 - Refactor build output type ([#19](https://github.com/aklinker1/wxt/pull/19))
 - Refactor build outputs to support transpiled templates ([a78aada](https://github.com/aklinker1/wxt/commit/a78aada))
 - Rename `templates` to `virtual-modules` ([#24](https://github.com/aklinker1/wxt/pull/24))
@@ -34,7 +244,6 @@
 ### ❤️ Contributors

 - Aaron Klinker
- Aaron

 ## v0.0.1

@@ -2,37 +2,28 @@

 <p align="center"><i>Next gen framework for developing web extensions.<br/>Powered by <a href="https://vitejs.dev/" target="_blank">Vite</a>. Inspired by <a href="https://nuxt.com/" target="_blank">Nuxt</a>.</i></p>

-![Example CLI Output](./.github/assets/cli-output.png)
-
-> **Warning**
->
-> [![GitHub milestone](https://img.shields.io/github/milestones/progress-percent/aklinker1/wxt/1)](https://github.com/aklinker1/wxt/milestone/1)
->
-> WXT is not ready for use yet. Production builds work, but dev mode is incomplete.
->
-> See the [Initial Release Candidate](https://github.com/aklinker1/wxt/milestone/1) milestone for more details.
+![Example CLI Output](./docs/assets/cli-output.png)

 ## Features

 - 🌐 Supports all browsers
 - ✅ Supports both MV2 and MV3
- 📂 Directory based entrypoints
+- ⚡ Dev mode with HMR & auto-reload
+- 📂 File based entrypoints
 - 🚔 TypeScript
 - 🦾 Auto-imports
- ⚡ Dev mode with HMR
 - ⬇️ Download and bundle remote URL imports
 - 🎨 Frontend framework agnostic: works with Vue, React, Svelte, etc

 ### Todo

- 🤖 Automated publishing
 - 🖍️ Quickly bootstrap a new project
 - 📏 Bundle analysis
- ⚡ Dev mode with HMR and **_auto-reload_**
+- 🤖 Automated publishing

 ## Get Started

-Checkout the [installation guide](https://wxtjs.dev/get-started) to get started with WXT.
+Checkout the [installation guide](https://wxt.dev/get-started/installation.html) to get started with WXT.

 ## Contributors

@@ -11,7 +11,7 @@
    "build:all:chrome-mv2": "wxt build --mv2",
    "build:all:firefox-mv3": "wxt build -b firefox --mv3",
    "build:all:firefox-mv2": "wxt build -b firefox",
-    "prepare": "pnpm -w build && wxt prepare"
+    "postinstall": "pnpm -w build && wxt prepare"
  },
  "dependencies": {
    "webextension-polyfill": "^0.10.0"
@@ -1,4 +1,4 @@
-export default defineBackgroundScript(() => {
+export default defineBackground(() => {
  console.log(browser.runtime.id);
  logId();
  console.log({
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+defineProps<{
+  name: string;
+  icon?: string;
+}>();
+</script>
+
+<template>
+  <img
+    :src="`https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/icons/${
+      name?.toLowerCase() ?? icon
+    }.svg`"
+    :alt="`${name} Logo`"
+  />
+</template>
+
+<style scoped>
+img {
+  display: inline;
+  transform: translateY(5px);
+  margin-right: 8px;
+  width: 20px;
+}
+</style>
@@ -0,0 +1,72 @@
+import { defineConfig } from 'vitepress';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'WXT',
+  description: 'Next gen framework for developing web extensions',
+  lastUpdated: true,
+
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    // logo: '/logo.svg',
+    editLink: {
+      pattern: 'https://github.com/aklinker1/wxt/edit/main/docs/:path',
+    },
+    search: {
+      provider: 'local',
+    },
+
+    nav: [
+      { text: 'Get Started', link: '/get-started/installation.md' },
+      { text: 'Guide', link: '/guide/auto-imports.md' },
+      { text: 'Config', link: '/config.md' },
+      { text: 'API', link: '/api.md' },
+    ],
+
+    sidebar: {
+      '/get-started/': [
+        {
+          text: 'Get Started',
+          items: [
+            { text: 'Introduction', link: '/get-started/introduction.md' },
+            { text: 'Installation', link: '/get-started/installation.md' },
+            { text: 'Configuration', link: '/get-started/configuration.md' },
+            { text: 'Entrypoints', link: '/get-started/entrypoints.md' },
+            { text: 'Assets', link: '/get-started/assets.md' },
+            { text: 'Build Targets', link: '/get-started/build-targets.md' },
+            { text: 'Publishing', link: '/get-started/publishing.md' },
+            { text: 'Testing', link: '/get-started/testing.md' },
+          ],
+        },
+      ],
+      '/guide/': [
+        {
+          text: 'Guide',
+          items: [
+            { text: 'Auto-imports', link: '/guide/auto-imports.md' },
+            { text: 'Manifest.json', link: '/guide/manifest.md' },
+            { text: 'Extension APIs', link: '/guide/extension-apis.md' },
+          ],
+        },
+        {
+          text: 'Entrypoints',
+          items: [
+            { text: 'Background', link: '/guide/background.md' },
+            { text: 'Bookmarks', link: '/guide/bookmarks.md' },
+            { text: 'Content Scripts', link: '/guide/content-scripts.md' },
+            { text: 'Devtools', link: '/guide/devtools.md' },
+            { text: 'History', link: '/guide/history.md' },
+            { text: 'Newtab', link: '/guide/newtab.md' },
+            { text: 'Options', link: '/guide/options.md' },
+            { text: 'Popup', link: '/guide/popup.md' },
+            { text: 'Sandbox', link: '/guide/sandbox.md' },
+            { text: 'Unlisted Pages', link: '/guide/unlisted-pages.md' },
+            { text: 'Unlisted Scripts', link: '/guide/unlisted-scripts.md' },
+          ],
+        },
+      ],
+    },
+
+    socialLinks: [{ icon: 'github', link: 'https://github.com/aklinker1/wxt' }],
+  },
+});
@@ -0,0 +1,9 @@
+import DefaultTheme from 'vitepress/theme';
+import Icon from '../components/Icon.vue';
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp(ctx) {
+    ctx.app.component('Icon', Icon);
+  },
+};
@@ -0,0 +1,5 @@
+# API Reference
+
+:::warning 🚧&ensp;Under construction
+This documentation does not exist yet.
+:::
@@ -0,0 +1,5 @@
+# Config
+
+:::warning 🚧&ensp;Under construction
+This documentation does not exist yet.
+:::
@@ -0,0 +1,85 @@
+# Assets
+
+WXT has two directories for storing assets like CSS, images, or fonts.
+
+- `<srcDir>/public`: Store files that will be copied into the output directory as-is
+- `<srcDir>/assets`: Store files that will be processed by Vite during the build process
+
+## `/public` Directory
+
+Place static files like the extension icon or `_locales/` directory here. These files will be copied over to the output directory without being transformed by Vite.
+
+```
+<srcDir>
+└─ public/
+   ├─ icon-16.png
+   ├─ icon-32.png
+   ├─ icon-48.png
+   ├─ icon-96.png
+   └─ icon-128.png
+```
+
+### Example
+
+You can reference these files by using absolute paths in HTML files or `browser.runtime.getURL` in content scripts.
+
+:::code-group
+
+```html [popup.html]
+<img src="/icon-128.png" />
+```
+
+```ts [content.ts]
+defineContentScript({
+  main() {
+    const image = document.createElement('img');
+    image.src = browser.runtime.getURL('/icon-128.png');
+    document.body.append(image);
+  },
+});
+```
+
+:::
+
+## `/assets` Directory
+
+Files in the assets directory will be processed by Vite. They are imported in your source code, and will be transformed or renamed in the output directory.
+
+```
+<srcDir>
+└─ assets/
+   ├─ style.css
+   └─ illustration.svg
+```
+
+### Example
+
+:::code-group
+
+```html [popup.html]
+<html>
+  <head>
+    <link rel="stylesheet" href="~/assets/style.css" />
+    <!-- ... -->
+  </head>
+  <body>
+    <img src="~/illustration.svg" />
+    <!-- ... -->
+  </body>
+</html>
+```
+
+```ts [content.ts]
+import '~/assets/style.css';
+import illustration from '~/assets/style.svg';
+
+defineContentScript({
+  main() {
+    const image = document.createElement('img');
+    image.src = illustration;
+    document.body.append(image);
+  },
+});
+```
+
+:::
@@ -0,0 +1,46 @@
+# Build Targets
+
+You can build an extension for any combination of browser and manifest verison. Different browsers and manifest versions support different APIs and entrypoints, so be sure to check that your extension functions as expected for each target.
+
+Separate build targets are written to their own output directories:
+
+```
+<root>
+└─ .output
+   ├─ chrome-mv3
+   ├─ firefox-mv2
+   ├─ edge-mv3
+   └─ ...
+```
+
+## Target Browser
+
+To build for a specific browser, pass the `-b --browser` flag from the CLI:
+
+```
+
+wxt --browser firefox
+wxt build --browser firefox
+
+```
+
+By default, it will build for `chrome`. When excluding the [`--mv2` or `--mv3` flags](#target-manifest-version), it will default to the commonly accepted manifest version used with that browser.
+
+| Browser          | Default Manifest Version |
+| ---------------- | :----------------------: |
+| `chrome`         |            3             |
+| `firefox`        |            2             |
+| `safari`         |            2             |
+| `edge`           |            3             |
+| Any other string |            3             |
+
+## Target Manifest Version
+
+To build for a specific manifest version, pass either the `--mv2` flag or `--mv3` flag from the CLI.
+
+```sh
+wxt --mv2
+wxt build --mv2
+```
+
+When the `-b --browser` flag is not passed, it defaults to `chrome`. So here, we're targetting MV2 for Chrome.
@@ -0,0 +1,92 @@
+# Configuration
+
+WXT's behavior can be configured via the `wxt.config.ts` file. In this file, you can add Vite plugins, change the directory strucutre of your project, and provide permissions or other fields to the `<outdir>/manifest.json`.
+
+However, since WXT is an opinionated framework, some things cannot be configured.
+
+## Config File
+
+To configure WXT, create a `wxt.config.ts` file in your project root. It should have the following contents:
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  // My WXT config
+});
+```
+
+:::info
+See the [API reference](/api.md) for a full list of options.
+:::
+
+## Directory Config
+
+WXT allows you to edit several directories to your liking:
+
+- `root` (default: `process.cwd()`) - Root of the WXT project
+- `srcDir` (default: `<root>`) - Location of all your source code
+- `entrypointsDir` (default: `<srcDir>/entrypoints`) - Folder containing all the entrypoints.
+- `publicDir` (default: `<srcDir>/public`) - Folder containing [public assets](/get-started/assets.md)
+
+### Example
+
+If you want a `src/` directory to contain all your source code, and you want to rename `entrypoints/` to `entries/`, your config would look like this:
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  srcDir: 'src',
+  entrypointsDir: 'entries',
+});
+```
+
+## Vite Config
+
+[Vite](https://vitejs.dev/) is the bundler used to build each entrypoint of your extension. Vite can be configured via the `vite` option.
+
+See [Vite's documentation](https://vitejs.dev/config/) for configuring the bundler.
+
+## Frontend Frameworks
+
+Adding a framework like Vue, React, or Svelte is easy!
+
+In the `wxt.config.ts` file, install and add the framework's Vite plugin to the config.
+
+:::code-group
+
+```ts [Vue]
+import { defineConfig } from 'wxt';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  vite: {
+    plugins: [vue()],
+  },
+});
+```
+
+```ts [React]
+import { defineConfig } from 'wxt';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  vite: {
+    plugins: [react()],
+  },
+});
+```
+
+```ts [Svelte]
+import { defineConfig } from 'wxt';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  vite: {
+    plugins: [svelte()],
+  },
+});
+```
+
+:::
@@ -0,0 +1,89 @@
+# Defining Entrypoints
+
+Entrypoints are any HTML, JS, or CSS file that needs to be bundled and included with the extension.
+
+They may or may not be listed in the extension's `manifest.json`.
+
+## `/entrypoints` Directory
+
+In WXT, entrypoints are defined by adding a file to the `entrypoints/` directory.
+
+For example, a project that looks like this:
+
+```
+<root>
+├─ entrypoints/
+│  ├─ background.ts
+│  ├─ content.ts
+│  ├─ injected.ts
+│  └─ popup.html
+└─ wxt.config.ts
+```
+
+would result in the following `manifest.json`:
+
+```json
+{
+  // ...
+  "manifest_version": 3,
+  "action": {
+    // ...
+    "default_popup": "popup.html"
+  },
+  "background": {
+    // ...
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      // ...
+      "js": ["content-scripts/content.js"]
+    }
+  ]
+}
+```
+
+If a file uses a [special name recognized by WXT](/get-started/entrypoints.md), it will be added to the manifest. In this case:
+
+- `popup.html` &rarr; `action.default_popup`
+- `content.ts` &rarr; `content_scripts.*.js`
+- `background.ts` &rarr; `background.service_worker`
+
+But not all entrypoints are added to the `manifest.json`. If they have a name that is not recognized by WXT, they are still built and included in the extension, but they are unlisted and do not show up in the manifest.
+
+In this case, `injected.ts` gets bundled to `<outdir>/injected.js` and is accessible via `browser.runtime.getURL("/injected.js")`.
+
+:::info
+See [`/entrypoints` folder](/get-started/entrypoints.md) documentation for a full list of recognized entrypoint filenames.
+:::
+
+## Entrypoint Options
+
+Some entrypoints, like content scripts, actions, or the background, can recieve additional options.
+
+In HTML files, options are listed as `meta` tags:
+
+```html
+<html>
+  <head>
+    <!-- Defining the popup's "default_icon" field -->
+    <meta name="manifest.default_icon" content="{ '16': '/icon/16.png' }" />
+  </head>
+</html>
+```
+
+In TS files, options are apart of the file's default export:
+
+```ts
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  runAt: 'document_start',
+  main() {
+    // ...
+  },
+});
+```
+
+:::info
+For a full list of entrypoints and each of their options, see the [`/entrypoints` folder](/get-started/entrypoints.md) documentation.
+:::
@@ -0,0 +1,121 @@
+# Installation
+
+Bootstrap a new project or start from scratch.
+
+## Bootstrap Project
+
+:::warning 🚧&ensp;The `wxt init` command is not implemented yet.
+
+See [From Scratch](#from-scratch) or reference one of the templates below.
+
+:::
+
+:::code-group
+
+```sh [pnpm]
+pnpx wxt@latest init <project-name>
+```
+
+```sh [npm]
+npx wxt@latest init <project-name>
+```
+
+:::
+
+There are several starting templates available.
+
+| TypeScript                                                                                           |
+| ---------------------------------------------------------------------------------------------------- |
+| <Icon name="TypeScript" /> [`vanilla`](https://github.com/aklinker1/wxt/tree/main/templates/vanilla) |
+| <Icon name="Vue" /> [`vue`](https://github.com/aklinker1/wxt/tree/main/templates/vue)                |
+| <Icon name="React" /> [`react`](https://github.com/aklinker1/wxt/tree/main/templates/react)          |
+| <Icon name="Svelte" /> [`svelte`](https://github.com/aklinker1/wxt/tree/main/templates/svelte)       |
+
+> All templates are in TypeScript. WXT does not support JS at this time.
+
+## From Scratch
+
+Create a new NPM project:
+
+:::code-group
+
+```sh [pnpm]
+pnpm init <project-name>
+cd <project-name>
+echo 'shamefully-hoist=true' >> .npmrc
+```
+
+```sh [npm]
+npm init <project-name>
+cd <project-name>
+```
+
+```sh [yarn]
+yarn init <project-name>
+cd <project-name>
+```
+
+:::
+
+Then install `wxt`:
+
+:::code-group
+
+```sh [pnpm]
+pnpm add wxt
+```
+
+```sh [npm]
+npm i --save wxt
+```
+
+```sh [yarn]
+yarn add wxt
+```
+
+:::
+
+Add your first entrypoint:
+
+```ts
+// entrypoints/background.ts
+export default defineBackground(() => {
+  console.log(`Hello from ${browser.runtime.id}!`);
+});
+```
+
+Finally, add scripts to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev": "wxt", // [!code ++]
+    "dev:firefox": "wxt --browser firefox", // [!code ++]
+    "build": "wxt build", // [!code ++]
+    "build:firefox": "wxt build --browser firefox", // [!code ++]
+    "postinstall": "wxt prepare" // [!code ++]
+  }
+}
+```
+
+> You can skip `*:firefox` scripts if you don't want to support Firefox
+
+## Development
+
+Once you've installed WXT, you can start the development server using the `dev` script.
+
+```sh
+pnpm dev
+```
+
+:::tip 🎉&ensp;Well done!
+
+The dev command will build the extension for development, open the browser, and reload the different parts of the extension when you save changes.
+:::
+
+## Next Steps
+
+You're ready to build a out your web extension!
+
+- Learn how to [add entrypoints](./entrypoints.md) like the popup, background, or content scripts
+- [Configure WXT](./configuration.md) by creating a `wxt.config.ts` file
@@ -0,0 +1,32 @@
+# Introduction
+
+WXT is a free and open source framework for building web extensions in an conventional, intuative, and safe way **_for all browsers_**.
+
+WXT comes with full TypeScript support and auto-imports. Sounds familiar? That's right, **_WXT was based off of Nuxt_** and aims to provide the same greate DX and features.
+
+![Example build output](../assets/cli-output.png)
+
+## Conventions
+
+WXT is an optionated framework. This helps keep projects consistent and easy to pick up.
+
+- **Generated manifest**: Based on your project's file structure
+- **Entrypoint configuration**: Configure entrypoints from the same file they're declare in
+- **Type-safety is a priority**: Out-of-the-box TypeScript support with improved browser API typing
+- **Simple output file structure**: Ouptut file paths minimize the path at runtime
+
+## Development
+
+WXT's dev server supports modern features like HMR to provide a lighting fast dev mode.
+
+When changes can't be hot-reloaded, like content scripts or background scripts, they're reloaded individually to prevent reloading the entire extension and slowing down your development cycle.
+
+## Production-ready
+
+Production builds are optimized for store review, changing as few files as possible between builds.
+
+In addition, WXT fully supports Firefox's source code requirements when using a bundler. It will automatically create and upload a ZIP file of your source code.
+
+:::info
+See [Publishing](./publishing.md) for more info around production builds.
+:::
@@ -0,0 +1,5 @@
+# Publishing
+
+:::warning 🚧&ensp;Not implemented yet!
+For now, manually zip the output directory and upload to stores by hand.
+:::
@@ -0,0 +1,5 @@
+# Testing
+
+:::warning 🚧&ensp;Testing utils are not implemented yet!
+Eventually, the plan is to have an integration with Vitest.
+:::
@@ -0,0 +1,66 @@
+# Auto-imports
+
+WXT uses the same tool as Nuxt for auto-imports, [`unimport`](https://github.com/unjs/unimport).
+
+:::info Testing
+To setup your test environment for auto-imports, see [Testing](/get-started/testing.md).
+:::
+
+## WXT Auto-imports
+
+Some WXT APIs can be used without importing them:
+
+- [`browser`](/config.md#browser) from `webextension-polyfill`
+- [`defineContentScript`](/config.md#defiencontentscript) from `wxt/client`
+- [`defineBackground`](/config.md#definebackgroundscript) from `wxt/client`
+
+And more. All [`wxt/client`](/config.md#wxtclient) APIs can be used without imports.
+
+## Project Auto-imports
+
+In addition WXT APIs, default and named exports from inside the following directories can be used without listing them in imports.
+
+- `<srcDir>/components/**/*`
+- `<srcDir>/composables/**/*`
+- `<srcDir>/hooks/**/*`
+- `<srcDir>/utils/**/*`
+
+## TypeScript
+
+For TypeScript to work, you need to run the `wxt prepare` command. This will ensure types are generated for auto-imports.
+
+This should be added to your `postinstall` script:
+
+```json
+// package.json
+{
+  "scripts": {
+    "postinstall": "wxt prepare" // [!code ++]
+  }
+}
+```
+
+## Customization
+
+You can override the default auto-import behavior in your `wxt.config.ts` file.
+
+See [`unimport`'s documentation](https://github.com/unjs/unimport#configurations) for a complete list of options.
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  imports: {
+    // Add auto-imports for vue fuctions like createApp, ref, computed, watch, toRaw, etc...
+    preset: ['vue'],
+  },
+});
+```
+
+To disable auto-imports, set `imports: false`
+
+```ts
+export default defineConfig({
+  imports: false,
+});
+```
@@ -0,0 +1,38 @@
+# Background
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/manifest/background/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background)
+
+For MV2, the background is added as a script to the background page. For MV3, the background becomes a service worker.
+
+## Filenames
+
+`entrypoints/background.ts` is the only recoginzed filename for the background script.
+
+## Definition
+
+:::warning
+The main function of the background **_CANNOT BE ASYNC_**. Event listeners must be added syncronously on background startup. If your main function returns a promise, WXT will log an error.
+:::
+
+```ts
+export default defineBackground(() => {
+  // Executed when background is loaded
+});
+```
+
+or
+
+```ts
+export default defineBackground({
+  // Set manifest options
+  persistent: undefined | true | false,
+  type: undefined | 'module',
+
+  // Executed when background is loaded
+  main() {
+    // ...
+  },
+});
+```
+
+> All manifest options default to `undefined`.
@@ -0,0 +1,26 @@
+# Bookmarks
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/override/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_url_overrides)
+
+## Filenames
+
+- `entrypoints/bookmarks.html`
+- `entrypoints/bookmarks/index.html`
+
+## Definition
+
+Plain old HTML file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
@@ -0,0 +1,60 @@
+# Content Scripts
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)
+
+## Filenames
+
+When a filename matches the pattern below, it is added as a content script in the `manifest.json`.
+
+- `entrypoints/content.tsx?`
+- `entrypoints/<name>.content.tsx?`
+- `entrypoints/content/index.tsx?`
+- `entrypoints/<name>.content/index.tsx?`
+
+## Definition
+
+```ts
+export default defineContentScript({
+  // Set manifest options
+  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+  excludeMatches: undefined | [],
+  includeGlobs: undefined | [],
+  excludeGlobs: undefined | [],
+  allFrames: undefined | [],
+  runAt: undefined | 'document_start' | 'document_end' | 'document_idle',
+  matchAboutBlank: undefined | true | false,
+  matchOriginAsFallback: undefined | true | false,
+  world: undefined | 'ISOLATED' | 'MAIN',
+
+  main() {
+    // Executed when content script is loaded
+  },
+});
+```
+
+> All manifest options default to `undefined`.
+
+## CSS
+
+To include CSS with your content script, import the CSS file at the top of your entrypoint:
+
+```
+
+<srcDir>
+└─ entrypoints/
+   └─ overlay.content/
+      ├─ index.ts
+      └─ style.css
+```
+
+```ts
+// entrypoints/overlay.content/index.ts
+import './style.css';
+
+export default defineContentScript({
+  matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+  main() {
+    // ...
+  },
+});
+```
@@ -0,0 +1,26 @@
+# Devtools
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/devtools/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page)
+
+## Filenames
+
+- `entrypoints/devtools.html`
+- `entrypoints/devtools/index.html`
+
+## Definition
+
+Plain old HTML file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
@@ -0,0 +1,94 @@
+# Extension APIs
+
+WXT is built on top of [`webextension-polyfill`](https://www.npmjs.com/package/webextension-polyfill), which uses the standard `browser` global.
+
+If you're used to Chrome's `chrome` global, its a simple switch:
+
+1. Replace `chrome` with `browser`
+2. [Replace callbacks with async/await](https://developer.chrome.com/docs/extensions/mv3/promises/)
+
+And that's it! Your extension now supports Chrome, Firefox, Safari, Edge, and other Chromium browsers.
+
+## Basic Usage
+
+The `browser` variable is available globally via [auto-imports](/guide/auto-imports.md), or it can be imported manually.
+
+```ts
+import browser from 'webextension-polyfill';
+```
+
+### Example
+
+Let's save the date the extension was installed. Just like `chrome`, some APIs require the permission is added to your manifest before the API is defined. Here, we need to add the `storage` permission to your manifest.
+
+```ts
+// wxt.config.ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  manifest: {
+    permissions: ['storage'],
+  },
+});
+```
+
+Then we can use `browser.storage` to save the install date to local storage.
+
+```ts
+// background.ts
+export default defineBackground(() => {
+  browser.runtime.onInstall.addEventListener(({ reason }) => {
+    if (reason === 'install') {
+      browser.storage.local.setItem({ installDate: Date.now() });
+    }
+  });
+});
+```
+
+## Messaging
+
+Follow [Chrome's message passing guide](https://developer.chrome.com/docs/extensions/mv3/messaging/) to understand how message passing works in web extensions. In Google's examples, just replace `chrome` with `browser`, and it will work in WXT.
+
+Here's a basic request/response example:
+
+```ts
+// background.ts
+export default defineBackground(() => {
+  browser.runtime.onMessage.addEventListener(
+    (message, sender, sendResponse) => {
+      console.log(message); // "ping"
+
+      // Wait 1 second and respond with "pong"
+      setTimeout(() => sendResponse('pong'), 1000);
+      return true;
+    },
+  );
+});
+```
+
+```ts
+// popup/main.ts
+const res = await browser.runtime.sendMessage('ping');
+
+console.log('res'); // "pong"
+```
+
+There are a number of message passing libraries you can use to improve the message passing experience.
+
+Here are some that are compatible with WXT (because they are based off `webextension-polyfill` as well):
+
+- [`@webext-core/messaging`](https://webext-core.aklinker1.io/guide/proxy-service/) - "A light-weight, type-safe wrapper around the `browser.runtime` messaging APIs"
+- [`@webext-core/proxy-service`](https://webext-core.aklinker1.io/guide/messaging/) - "Create TRPC-like services that can be called from anywhere but run in the background"
+- [`webext-bridge`](https://github.com/zikaari/webext-bridge) - "Messaging in Web Extensions made super easy. Out of the box."
+
+## Browser Differences
+
+Some APIs are only available on certain browsers or manifest versions. You will have to check if an API exists at runtime if it is not in the `browser` standard.
+
+```ts
+if ('session' in browser.storage) {
+  // Do something with the non-standard session storage API
+}
+```
+
+> If you're using TypeScript, knowing what is non-standard is easy! APIs that are not typed are non-standard.
@@ -0,0 +1,26 @@
+# History
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/override/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_url_overrides)
+
+## Filenames
+
+- `entrypoints/history.html`
+- `entrypoints/history/index.html`
+
+## Definition
+
+Plain old HTML file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
@@ -0,0 +1,114 @@
+# Manifest.json
+
+The manifest.json is generated at build-time based on files in your `entrypoints` directory and your `wxt.config.ts`.
+
+## Customization
+
+While entrypoints are generated and added to the manifest at build-time, you can customize or add to your `manifest.json` in the config file.
+
+```ts
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  manifest: {
+    host_permissions: ['*://google.com/*'],
+    content_security_policy: {
+      // ...
+    },
+  },
+});
+```
+
+## `name`
+
+If not provided via the `manifest` config, the [manifest's `name`](https://developer.chrome.com/docs/extensions/mv3/manifest/name/) defaults to your package.json's `name` property.
+
+## `version` and `version_name`
+
+The [manifest's `version` and `version_name`](https://developer.chrome.com/docs/extensions/mv3/manifest/version/) fields are based on your package.json's `version` property.
+
+- `version_name` is the exact string listed in your package.json
+- `version` is the string cleaned up, with any invalid suffixes removed
+
+### Example
+
+```json
+// package.json
+{
+  "version": "1.3.0-alpha2"
+}
+```
+
+```json
+// .output/<dir>/manifest.json
+{
+  "version": "1.3.0",
+  "version_name": "1.3.0-alpha2"
+}
+```
+
+### `icons`
+
+The [manifest's `icons`](https://developer.chrome.com/docs/extensions/mv3/manifest/icons/) property needs to be set in the config file. The files should be added to WXT's [`public` directory](/get-started/assets#public-directory).
+
+```
+public/
+├─ icon-16.png
+├─ icon-24.png
+├─ icon-48.png
+├─ icon-96.png
+└─ icon-128.png
+```
+
+```ts
+export default defineConfig({
+  manifest: {
+    icons: {
+      16: '/icon-16.png',
+      24: '/icon-24.png',
+      48: '/icon-48.png',
+      96: '/icon-96.png',
+      128: '/icon-128.png',
+    },
+  },
+});
+```
+
+### Permissions
+
+[Permissions](https://developer.chrome.com/docs/extensions/reference/permissions/) must be listed in the manifest config.
+
+```ts
+export default defineConfig({
+  manifest: {
+    permissions: ['storage', 'tabs'],
+  },
+});
+```
+
+### Localization
+
+Similar to the icon, the [`_locales` directory](https://developer.chrome.com/docs/extensions/reference/i18n/) should be placed inside the the WXT's [`public` directory](/get-started/assets#public-directory).
+
+```
+public/
+└─ _locales/
+   ├─ en/
+   │  └─ messages.json
+   ├─ es/
+   │  └─ messages.json
+   └─ ko/
+      └─ messages.json
+```
+
+Then you'll need to explicitly override the `name` and `description` properties in your config for them to be localized.
+
+```ts
+export default defineConfig({
+  manifest: {
+    name: '__MSG_extName__',
+    description: '__MSG_extDescription__',
+    default_locale: 'en',
+  },
+});
+```
@@ -0,0 +1,26 @@
+# Newtab
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/override/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_url_overrides)
+
+## Filenames
+
+- `entrypoints/newtab.html`
+- `entrypoints/newtab/index.html`
+
+## Definition
+
+Plain old HTML file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
@@ -0,0 +1,31 @@
+# Options
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/options/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui)
+
+## Filenames
+
+- `entrypoints/options.html`
+- `entrypoints/options/index.html`
+
+## Definition
+
+Plain old HTML file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Options Title</title>
+    <meta name="manifest.open_in_tab" content="true|false" />
+    <meta name="manifest.chrome_style" content="true|false" />
+    <meta name="manifest.browser_style" content="true|false" />
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
+
+> All manifest options default to `undefined` when the `meta` tag is not present.
@@ -0,0 +1,37 @@
+# Popup
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/reference/action/) &bull; [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action)
+
+## Filenames
+
+- `entrypoints/popup.html`
+- `entrypoints/popup/index.html`
+
+## Definition
+
+Plain old HTML file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Popup Title</title>
+    <meta
+      name="manifest.default_icon"
+      content="{
+        16: '/icon-16.png',
+        24: '/icon-24.png',
+        ...
+      }"
+    />
+    <meta name="manifest.type" content="page_action|browser_action" />
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
+
+> All manifest options default to `undefined` when the `meta` tag is not present.
@@ -0,0 +1,32 @@
+# Sandbox
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/manifest/sandbox/)
+
+:::tip Chromium Only
+Firefox does not support sandboxed pages.
+:::
+
+## Filenames
+
+- `entrypoints/sandbox.html`
+- `entrypoints/<name>.sandbox.html`
+- `entrypoints/sandbox/index.html`
+- `entrypoints/<name>.sandbox/index.html`
+
+## Definition
+
+Plain old HTML file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
@@ -0,0 +1,32 @@
+# Side Panel
+
+[Chrome Docs](https://developer.chrome.com/docs/extensions/reference/sidePanel/)
+
+:::tip Chromium Only
+Firefox does not support sandboxed pages.
+:::
+
+## Filenames
+
+- `entrypoints/sidepanel.html`
+- `entrypoints/<name>.sidepanel.html`
+- `entrypoints/sidepanel/index.html`
+- `entrypoints/<name>.sidepanel/index.html`
+
+## Definition
+
+Plain old HTML file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
@@ -0,0 +1,42 @@
+# Unlisted Pages
+
+HTML pages that are built by Vite, but are not included in the manifest.
+
+### Examples
+
+- Onboarding
+- Dashboard
+- FAQ
+- Help
+- Changelog
+
+## Filenames
+
+- `entrypoints/<name>.html`
+- `entrypoints/<name>/index.html`
+
+Pages are accessible at `'/<name>.html'`:
+
+```ts
+const url = browser.runtime.getURL('/<name>.html');
+
+console.log(url); // "chrome-extension://<id>/<name>.html"
+```
+
+## Definition
+
+Plain old HTML file.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
@@ -0,0 +1,16 @@
+# Unlisted Scripts
+
+TypeScript files that are built, but are not included in the manifest.
+
+## Filenames
+
+- `entrypoints/<name>.tsx?`
+- `entrypoints/<name>/index.tsx?`
+
+## Definition
+
+Unlike the background and content scripts, you can define this script's logic in the main scope.
+
+```ts
+// Code goes here
+```
@@ -0,0 +1,49 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+titleTemplate: 'Next Generation Web Extension Framework'
+
+hero:
+  name: WXT
+  text: Next gen framework for web extensions
+  tagline: Powered by Vite, inspired by Nuxt.
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /get-started/installation
+    - theme: alt
+      text: Learn More
+      link: /get-started/introduction
+
+features:
+  - icon: 🌐
+    title: Supported Browsers
+    details: Chrome, Firefox, Edge, Safari, and any Chromium based browser.
+  - icon: ✅
+    title: MV2 and MV3
+    details: Supports both manifest versions for each browser.
+  - icon: ⚡
+    title: Fast Dev Mode
+    details: HMR for UIs and fast reload for background and content scripts.
+  - icon: 📂
+    title: File Based Entrypoints
+    details: Manifest is generated based on files inside the project.
+  - icon: 🚔
+    title: TypeScript
+    details: Scale projects with full TS support.
+  - icon: 🦾
+    title: Auto-imports
+    details: Nuxt-like auto-imports to speed up development.
+  - icon: ⬇️
+    title: Bundle Remote Code
+    details: Downloads and bundles remote code imported from URLs.
+  - icon: 🎨
+    title: Frontend framework agnostic
+    details: Works with any front-end framework with a Vite plugin.
+  - icon: 🤖
+    title: Automated Publishing
+    details: 'TODO: Automatically zip, upload, and release extensions.'
+  - icon: 📏
+    title: Bundle analysis
+    details: 'TODO: Tools for analyizing the final extension bundle.'
+---
@@ -6,7 +6,7 @@ describe('Auto Imports', () => {
    const project = new TestProject();
    project.addFile(
      'entrypoints/background.ts',
-      'export default defineBackgroundScript(() => {})',
+      'export default defineBackground(() => {})',
    );
    project.addFile(
      'entrypoints/overlay.content.ts',
@@ -43,7 +43,7 @@ describe('Auto Imports', () => {
      export {}
      declare global {
        const browser: typeof import('webextension-polyfill')
-        const defineBackgroundScript: typeof import('wxt/client')['defineBackgroundScript']
+        const defineBackground: typeof import('wxt/client')['defineBackground']
        const defineConfig: typeof import('wxt')['defineConfig']
        const defineContentScript: typeof import('wxt/client')['defineContentScript']
        const mountContentScriptUi: typeof import('wxt/client')['mountContentScriptUi']
@@ -57,7 +57,7 @@ describe('Manifest Content', () => {
    const optionsContent = `
      <html>
        <head>
-          <meta name="manifest.open_in_tab" content="true">
+          <meta name="manifest.open_in_tab" content="false">
          <meta name="manifest.chrome_style" content="true">
          <meta name="manifest.browser_style" content="true">
        </head>
@@ -72,7 +72,7 @@ describe('Manifest Content', () => {
      const manifest = await project.getOutputManifest();

      expect(manifest.options_ui).toEqual({
-        open_in_tab: true,
+        open_in_tab: false,
        chrome_style: true,
        page: 'options.html',
      });
@@ -88,7 +88,7 @@ describe('Manifest Content', () => {
      );

      expect(manifest.options_ui).toEqual({
-        open_in_tab: true,
+        open_in_tab: false,
        browser_style: true,
        page: 'options.html',
      });
@@ -97,7 +97,7 @@ describe('Manifest Content', () => {

  describe('background', () => {
    const backgroundContent = `
-      export default defineBackgroundScript({
+      export default defineBackground({
        persistent: true,
        type: "module",
        main: () => {},
@@ -149,7 +149,7 @@ describe('Manifest Content', () => {
      `import "./style.css";
      export default defineContentScript({
        matches: ["*://google.com/*"],
-        run_at: "document_end",
+        runAt: "document_end",
        main: () => {},
      })`,
    );
@@ -162,7 +162,7 @@ describe('Manifest Content', () => {
      `import "./style.css";
      export default defineContentScript({
        matches: ["*://google.com/*"],
-        run_at: "document_end",
+        runAt: "document_end",
        main: () => {},
      })`,
    );
@@ -175,7 +175,7 @@ describe('Manifest Content', () => {
      `import "./style.css";
      export default defineContentScript({
        matches: ["*://duckduckgo.com/*"],
-        run_at: "document_end",
+        runAt: "document_end",
        main: () => {},
      })`,
    );
@@ -13,7 +13,7 @@ describe('Output Directory Structure', () => {
    expect(await project.serializeOutput()).toMatchInlineSnapshot(`
      ".output/chrome-mv3/manifest.json
      ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\"}"
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\"}"
    `);
  });

@@ -66,7 +66,31 @@ describe('Output Directory Structure', () => {
      ================================================================================
      .output/chrome-mv3/manifest.json
      ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"*://*/*\\"],\\"css\\":[\\"assets/one.css\\",\\"assets/two.css\\"],\\"js\\":[\\"content-scripts/one.js\\",\\"content-scripts/two.js\\"]}]}"
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"*://*/*\\"],\\"css\\":[\\"assets/one.css\\",\\"assets/two.css\\"],\\"js\\":[\\"content-scripts/one.js\\",\\"content-scripts/two.js\\"]}]}"
+    `);
+  });
+
+  it('should allow inputs with invalid JS variable names, like dashes', async () => {
+    const project = new TestProject();
+    project.addFile(
+      'entrypoints/overlay-one.content.ts',
+      `export default defineContentScript({
+        matches: ["*://*/*"],
+        main: () => {},
+      })`,
+    );
+
+    await project.build();
+
+    expect(await project.serializeOutput()).toMatchInlineSnapshot(`
+      ".output/chrome-mv3/content-scripts/overlay-one.js
+      ----------------------------------------
+      (function(){\\"use strict\\";function i(n){return n}const o={matches:[\\"*://*/*\\"],main:()=>{}};function t(n,...e){if(typeof e[0]==\\"string\\"){const c=e.shift();n(\`[wxt] \${c}\`,...e)}else n(\\"[wxt]\\",...e)}var r={debug:(...n)=>t(console.debug,...n),log:(...n)=>t(console.log,...n),warn:(...n)=>t(console.warn,...n),error:(...n)=>t(console.error,...n)};(async()=>{try{await o.main()}catch(n){r.error(\\"The content script crashed on startup!\\",n)}})()})();
+
+      ================================================================================
+      .output/chrome-mv3/manifest.json
+      ----------------------------------------
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"*://*/*\\"],\\"js\\":[\\"content-scripts/overlay-one.js\\"]}]}"
    `);
  });
 });
@@ -11,7 +11,7 @@ describe('User Config', () => {
    });
    project.addFile(
      'src/entrypoints/background.ts',
-      `export default defineBackgroundScript(
+      `export default defineBackground(
        () => console.log('Hello background'),
      );`,
    );
@@ -27,7 +27,7 @@ describe('User Config', () => {
      ================================================================================
      .output/chrome-mv3/manifest.json
      ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"background\\":{\\"service_worker\\":\\"background.js\\"}}"
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"background\\":{\\"service_worker\\":\\"background.js\\"}}"
    `);
  });

@@ -38,7 +38,7 @@ describe('User Config', () => {
    });
    project.addFile(
      'entries/background.ts',
-      `export default defineBackgroundScript(() => console.log('Hello background'));`,
+      `export default defineBackground(() => console.log('Hello background'));`,
    );

    await project.build();
@@ -52,7 +52,35 @@ describe('User Config', () => {
      ================================================================================
      .output/chrome-mv3/manifest.json
      ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"background\\":{\\"service_worker\\":\\"background.js\\"}}"
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"background\\":{\\"service_worker\\":\\"background.js\\"}}"
+    `);
+  });
+
+  it('should merge inline and user config based manifests', async () => {
+    const project = new TestProject();
+    project.addFile(
+      'wxt.config.ts',
+      `import { defineConfig } from 'wxt';
+      export default defineConfig({
+        manifest: ({ mode, browser }) => ({
+          // @ts-expect-error
+          example_customization: [mode, browser],
+        })
+      })`,
+    );
+
+    await project.build({
+      // @ts-expect-error: Specifically setting an invalid field for the test - it should show up in the snapshot
+      manifest: ({ manifestVersion, command }) => ({
+        example_customization: [String(manifestVersion), command],
+      }),
+    });
+
+    const output = await project.serializeOutput();
+    expect(output).toMatchInlineSnapshot(`
+      ".output/chrome-mv3/manifest.json
+      ----------------------------------------
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"example_customization\\":[\\"production\\",\\"chrome\\",\\"3\\",\\"build\\"]}"
    `);
  });
 });
@@ -55,6 +55,7 @@ export class TestProject {
   */
  addFile(filename: string, content?: string) {
    this.files.push([filename, content ?? '']);
+    if (filename === 'wxt.config.ts') this.config = {};
  }

  /**
@@ -63,15 +64,13 @@ export class TestProject {
  async build(config: InlineConfig = {}) {
    if (this.config == null) this.setConfigFileConfig();

-    await Promise.all(
-      this.files.map(async (file) => {
-        const [name, content] = file;
-        const filePath = resolve(this.root, name);
-        const fileDir = dirname(filePath);
-        await fs.ensureDir(fileDir);
-        await fs.writeFile(filePath, content ?? '', 'utf-8');
-      }),
-    );
+    for (const file of this.files) {
+      const [name, content] = file;
+      const filePath = resolve(this.root, name);
+      const fileDir = dirname(filePath);
+      await fs.ensureDir(fileDir);
+      await fs.writeFile(filePath, content ?? '', 'utf-8');
+    }
    execSync('npm i --ignore-scripts', { cwd: this.root });

    await build({ ...config, root: this.root });
@@ -1,8 +1,12 @@
 {
  "name": "wxt",
  "type": "module",
-  "version": "0.0.2",
+  "version": "0.2.3",
  "description": "Next gen framework for developing web extensions",
+  "engines": {
+    "node": ">=18.16.0",
+    "pnpm": ">=8"
+  },
  "repository": {
    "type": "git",
    "url": "https://github.com/aklinker1/wxt"
@@ -49,9 +53,15 @@
    "test": "vitest",
    "test:coverage": "vitest run --coverage",
    "prepare": "simple-git-hooks",
-    "prepublish": "pnpm -s build"
+    "prepublish": "pnpm -s build",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
  },
  "dependencies": {
+    "@types/webextension-polyfill": "^0.10.0",
+    "@webext-core/fake-browser": "^1.2.2",
+    "@webext-core/match-patterns": "^1.0.1",
    "async-mutex": "^0.4.0",
    "c12": "^1.4.2",
    "cac": "^6.7.14",
@@ -59,6 +69,7 @@
    "fast-glob": "^3.2.12",
    "filesize": "^10.0.7",
    "fs-extra": "^11.1.1",
+    "get-port": "^7.0.0",
    "jiti": "^1.18.2",
    "json5": "^2.2.3",
    "linkedom": "^0.14.26",
@@ -66,6 +77,7 @@
    "picomatch": "^2.3.1",
    "unimport": "^3.0.8",
    "vite": "^4.3.9",
+    "vite-tsconfig-paths": "^4.2.0",
    "web-ext": "^7.6.2",
    "webextension-polyfill": "^0.10.0"
  },
@@ -75,7 +87,6 @@
    "@types/lodash.merge": "^4.6.7",
    "@types/node": "^20.3.1",
    "@types/picomatch": "^2.3.0",
-    "@types/webextension-polyfill": "^0.10.0",
    "@vitest/coverage-v8": "^0.32.2",
    "lodash.merge": "^4.6.2",
    "npm-run-all": "^4.1.5",
@@ -86,7 +97,9 @@
    "tsup": "^7.0.0",
    "tsx": "^3.12.7",
    "typescript": "^5.1.3",
-    "vitest": "^0.32.2",
+    "vitepress": "1.0.0-beta.5",
+    "vitest": "^0.32.4",
+    "vitest-mock-extended": "^1.1.4",
    "webextension-polyfill": "^0.10.0"
  },
  "peerDependencies": {
@@ -95,5 +108,16 @@
  "packageManager": "pnpm@8.6.3",
  "simple-git-hooks": {
    "pre-commit": "pnpm pretty-quick --staged"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search",
+        "search-insights"
+      ],
+      "allowAny": [
+        "node-fetch"
+      ]
+    }
  }
 }
@@ -57,6 +57,13 @@ await Promise.all([
    sourcemap: true,
    silent: true,
  }),
+  tsup.build({
+    entry: {
+      'virtual-modules/fake-browser': `src/client/virtual-modules/fake-browser.ts`,
+    },
+    format: ['esm', 'cjs'],
+    silent: true,
+  }),
 ]).catch((err) => {
  spinner.fail();
  console.error(err);
@@ -23,7 +23,7 @@ export const dev = defineCommand<
  };

  const server = await wxt.createServer(cliConfig);
-  await server.listen(server.port);
+  await server.start();

  return true;
 });
@@ -1,12 +1,10 @@
 import { BackgroundScriptDefintition } from '..';

-export function defineBackgroundScript(
-  main: () => void,
-): BackgroundScriptDefintition;
-export function defineBackgroundScript(
+export function defineBackground(main: () => void): BackgroundScriptDefintition;
+export function defineBackground(
  definition: BackgroundScriptDefintition,
 ): BackgroundScriptDefintition;
-export function defineBackgroundScript(
+export function defineBackground(
  arg: (() => void) | BackgroundScriptDefintition,
 ): BackgroundScriptDefintition {
  if (typeof arg === 'function') return { main: arg };
@@ -1,3 +1,3 @@
 export * from './defineContentScript';
-export * from './defineBackgroundScript';
+export * from './defineBackground';
 export * from './mountContentScriptUi';
@@ -0,0 +1,48 @@
+import browser, { Manifest } from 'webextension-polyfill';
+import { logger } from './logger';
+import { MatchPattern } from '@webext-core/match-patterns';
+
+export function reloadContentScript(contentScript: Manifest.ContentScript) {
+  const manifest = browser.runtime.getManifest();
+  if (manifest.manifest_version == 2) {
+    void reloadContentScriptMv2(contentScript);
+  } else {
+    void reloadContentScriptMv3(contentScript);
+  }
+}
+
+export async function reloadContentScriptMv3(
+  contentScript: Manifest.ContentScript,
+) {
+  const id = `wxt:${contentScript.js![0]}`;
+  logger.log('Reloading content script:', contentScript);
+  const registered = await browser.scripting.getRegisteredContentScripts();
+  logger.debug('Existing scripts:', registered);
+
+  const existing = registered.find((cs) => cs.id === id);
+
+  if (existing) {
+    logger.debug('Updating content script', existing);
+    await browser.scripting.updateContentScripts([{ ...contentScript, id }]);
+  } else {
+    logger.debug('Registering new content script...');
+    await browser.scripting.registerContentScripts([{ ...contentScript, id }]);
+  }
+
+  const allTabs = await browser.tabs.query({});
+  const matchPatterns = contentScript.matches.map(
+    (match) => new MatchPattern(match),
+  );
+  const matchingTabs = allTabs.filter((tab) => {
+    const url = tab.url;
+    if (!url) return false;
+    return !!matchPatterns.find((pattern) => pattern.includes(url));
+  });
+  await Promise.all(matchingTabs.map((tab) => browser.tabs.reload(tab.id)));
+}
+
+export async function reloadContentScriptMv2(
+  contentScript: Manifest.ContentScript,
+) {
+  throw Error('TODO: reloadContentScriptMv2');
+}
@@ -3,15 +3,26 @@ import { setupWebSocket } from '../utils/setupWebSocket';
 import { logger } from '../utils/logger';
 import browser from 'webextension-polyfill';
 import { keepServiceWorkerAlive } from '../utils/keepServiceWorkerAlive';
+import { reloadContentScript } from '../utils/reloadContentScript';

 if (__COMMAND__ === 'serve') {
  try {
-    setupWebSocket((message) => {
+    const ws = setupWebSocket((message) => {
      if (message.event === 'wxt:reload-extension') browser.runtime.reload();
+      if (message.event === 'wxt:reload-content-script' && message.data != null)
+        reloadContentScript(message.data);
    });

-    // Web Socket will disconnect if the service worker is killed
-    keepServiceWorkerAlive();
+    if (__MANIFEST_VERSION__ === 3) {
+      // Tell the server the background script is loaded and ready to go
+      ws.addEventListener('open', () => {
+        const msg = { type: 'custom', event: 'wxt:background-initialized' };
+        ws.send(JSON.stringify(msg));
+      });
+
+      // Web Socket will disconnect if the service worker is killed
+      keepServiceWorkerAlive();
+    }
  } catch (err) {
    logger.error('Failed to setup web socket connection with dev server', err);
  }
@@ -0,0 +1,3 @@
+import { fakeBrowser as browser } from '@webext-core/fake-browser';
+
+export default browser;
@@ -20,3 +20,4 @@ declare const __COMMAND__: 'build' | 'serve';
 declare const __DEV_SERVER_PROTOCOL__: string;
 declare const __DEV_SERVER_HOSTNAME__: string;
 declare const __DEV_SERVER_PORT__: string;
+declare const __MANIFEST_VERSION__: 2 | 3;
@@ -0,0 +1,106 @@
+import { Manifest } from 'webextension-polyfill';
+import { BuildOutput } from './types';
+import { buildEntrypoints } from './build/buildEntrypoints';
+import { findEntrypoints } from './build/findEntrypoints';
+import { generateTypesDir } from './build/generateTypesDir';
+import { InternalConfig, EntrypointGroup } from './types';
+import { generateMainfest, writeManifest } from './utils/manifest';
+import pc from 'picocolors';
+import * as vite from 'vite';
+import fs from 'fs-extra';
+import { groupEntrypoints } from './utils/groupEntrypoints';
+import { formatDuration } from './utils/formatDuration';
+import { printBuildSummary } from './log/printBuildSummary';
+
+/**
+ * Builds the extension based on an internal config.
+ *
+ * This function:
+ * 1. Cleans the output directory
+ * 2. Executes the rebuild function with a blank previous output so everything is built (see
+ *    `rebuild` for more details)
+ * 3. Prints the summary
+ */
+export async function buildInternal(
+  config: InternalConfig,
+): Promise<BuildOutput> {
+  const verb = config.command === 'serve' ? 'Pre-rendering' : 'Building';
+  const target = `${config.browser}-mv${config.manifestVersion}`;
+  config.logger.info(
+    `${verb} ${pc.cyan(target)} for ${pc.cyan(config.mode)} with ${pc.green(
+      `Vite ${vite.version}`,
+    )}`,
+  );
+  const startTime = Date.now();
+
+  // Cleanup
+  await fs.rm(config.outDir, { recursive: true, force: true });
+  await fs.ensureDir(config.outDir);
+
+  const entrypoints = await findEntrypoints(config);
+  const groups = groupEntrypoints(entrypoints);
+  const { output } = await rebuild(config, groups);
+
+  // Post-build
+  config.logger.success(
+    `Built extension in ${formatDuration(Date.now() - startTime)}`,
+  );
+  await printBuildSummary(output, config);
+
+  return output;
+}
+
+/**
+ * Given a configuration, list of entrypoints, and an existing, partial output, build the
+ * entrypoints and merge the new output with the existing output.
+ *
+ * This function will:
+ * 1. Generate the .wxt directory's types
+ * 2. Build the `entrypointGroups` (and copies public files)
+ * 3. Generate the latest manifest for all entrypoints
+ * 4. Write the new manifest to the file system
+ */
+export async function rebuild(
+  config: InternalConfig,
+  entrypointGroups: EntrypointGroup[],
+  existingOutput: Omit<BuildOutput, 'manifest'> = {
+    steps: [],
+    publicAssets: [],
+  },
+): Promise<{ output: BuildOutput; manifest: Manifest.WebExtensionManifest }> {
+  // Update types directory with new files and types
+  const allEntrypoints = await findEntrypoints(config);
+  await generateTypesDir(allEntrypoints, config);
+
+  // Build and merge the outputs
+  const newOutput = await buildEntrypoints(entrypointGroups, config);
+  const mergedOutput: Omit<BuildOutput, 'manifest'> = {
+    steps: [...existingOutput.steps, ...newOutput.steps],
+    publicAssets: [...existingOutput.publicAssets, ...newOutput.publicAssets],
+  };
+
+  const newManifest = await generateMainfest(
+    allEntrypoints,
+    mergedOutput,
+    config,
+  );
+  const finalOutput: BuildOutput = {
+    manifest: newManifest,
+    ...newOutput,
+  };
+
+  // Write manifest
+  await writeManifest(newManifest, finalOutput, config);
+
+  return {
+    output: {
+      manifest: newManifest,
+      steps: [...existingOutput.steps, ...finalOutput.steps],
+      publicAssets: [
+        ...existingOutput.publicAssets,
+        ...finalOutput.publicAssets,
+      ],
+    },
+    manifest: newManifest,
+  };
+}
@@ -7,10 +7,11 @@ import {
  PopupEntrypoint,
 } from '../../types';
 import { resolve } from 'path';
-import { FindEntrypointsConfig, findEntrypoints } from '../findEntrypoints';
+import { findEntrypoints } from '../findEntrypoints';
 import fs from 'fs-extra';
 import { importTsFile } from '../../utils/importTsFile';
 import glob from 'fast-glob';
+import { fakeInternalConfig } from '../../../testing/fake-objects';

 vi.mock('../../utils/importTsFile');
 const importTsFileMock = vi.mocked(importTsFile);
@@ -24,24 +25,11 @@ const readFileMock = vi.mocked(
 );

 describe('findEntrypoints', () => {
-  const config: FindEntrypointsConfig = {
+  const config = fakeInternalConfig({
    root: '/',
    entrypointsDir: resolve('/src/entrypoints'),
    outDir: resolve('.output'),
-    logger: {
-      debug: vi.fn(),
-      error: vi.fn(),
-      fatal: (...args) => {
-        throw Error('logger.fatal called with: ' + JSON.stringify(args));
-      },
-      info: vi.fn(),
-      log: vi.fn(),
-      warn: vi.fn(),
-      success: vi.fn(),
-    },
-    command: 'build',
-    mode: 'production',
-  };
+  });

  it.each<[string, string, PopupEntrypoint]>([
    [
@@ -149,6 +137,15 @@ describe('findEntrypoints', () => {
  );

  it.each<[string, Omit<ContentScriptEntrypoint, 'options'>]>([
+    [
+      'content.ts',
+      {
+        type: 'content-script',
+        name: 'content',
+        inputPath: resolve(config.entrypointsDir, 'content.ts'),
+        outputDir: resolve(config.outDir, 'content-scripts'),
+      },
+    ],
    [
      'overlay.content.ts',
      {
@@ -158,6 +155,15 @@ describe('findEntrypoints', () => {
        outputDir: resolve(config.outDir, 'content-scripts'),
      },
    ],
+    [
+      'content/index.ts',
+      {
+        type: 'content-script',
+        name: 'content',
+        inputPath: resolve(config.entrypointsDir, 'content/index.ts'),
+        outputDir: resolve(config.outDir, 'content-scripts'),
+      },
+    ],
    [
      'overlay.content/index.ts',
      {
@@ -189,7 +195,7 @@ describe('findEntrypoints', () => {

      expect(entrypoints).toHaveLength(1);
      expect(entrypoints[0]).toEqual({ ...expected, options });
-      expect(importTsFileMock).toBeCalledWith(config.root, expected.inputPath);
+      expect(importTsFileMock).toBeCalledWith(expected.inputPath, config);
    },
  );

@@ -216,7 +222,7 @@ describe('findEntrypoints', () => {

      expect(entrypoints).toHaveLength(1);
      expect(entrypoints[0]).toEqual({ ...expected, options });
-      expect(importTsFileMock).toBeCalledWith(config.root, expected.inputPath);
+      expect(importTsFileMock).toBeCalledWith(expected.inputPath, config);
    },
  );

@@ -45,12 +45,12 @@ async function buildSingleEntrypoint(
    ? `virtual:wxt-${entrypoint.type}?${entrypoint.inputPath}`
    : entrypoint.inputPath;

-  const libMode: vite.InlineConfig = {
+  const libMode: vite.UserConfig = {
    build: {
      lib: {
        entry,
        formats: ['iife'],
-        name: entrypoint.name,
+        name: '_',
        fileName: entrypoint.name,
      },
      rollupOptions: {
@@ -89,7 +89,7 @@ async function buildMultipleEntrypoints(
  entrypoints: Entrypoint[],
  config: InternalConfig,
 ): Promise<BuildStepOutput> {
-  const multiPage: vite.InlineConfig = {
+  const multiPage: vite.UserConfig = {
    plugins: [plugins.multipageMove(entrypoints, config)],
    build: {
      rollupOptions: {
@@ -112,7 +112,7 @@ async function buildMultipleEntrypoints(
  const entryConfig = vite.mergeConfig(
    multiPage,
    config.vite,
-  ) as vite.InlineConfig;
+  ) as vite.UserConfig;

  const result = await vite.build(entryConfig);
  return {
@@ -21,7 +21,7 @@ import { getEntrypointName } from '../utils/entrypoints';
 * Return entrypoints and their configuration by looking through the
 */
 export async function findEntrypoints(
-  config: FindEntrypointsConfig,
+  config: InternalConfig,
 ): Promise<Entrypoint[]> {
  const relativePaths = await glob('**/*', {
    cwd: config.entrypointsDir,
@@ -67,7 +67,7 @@ export async function findEntrypoints(
        case 'content-script':
          entrypoint = await getContentScriptEntrypoint(
            config,
-            relativePath.split('.', 2)[0],
+            getEntrypointName(config.entrypointsDir, path),
            path,
          );
          break;
@@ -103,7 +103,7 @@ export async function findEntrypoints(
 * @param content String contents of the file at the path.
 */
 async function getPopupEntrypoint(
-  config: FindEntrypointsConfig,
+  config: InternalConfig,
  path: string,
 ): Promise<PopupEntrypoint> {
  const options: PopupEntrypoint['options'] = {};
@@ -150,7 +150,7 @@ async function getPopupEntrypoint(
 * @param content String contents of the file at the path.
 */
 async function getOptionsEntrypoint(
-  config: FindEntrypointsConfig,
+  config: InternalConfig,
  path: string,
 ): Promise<OptionsEntrypoint> {
  const options: OptionsEntrypoint['options'] = {};
@@ -162,21 +162,21 @@ async function getOptionsEntrypoint(
    .querySelector("meta[name='manifest.open_in_tab']")
    ?.getAttribute('content');
  if (openInTabContent) {
-    options.openInTab = Boolean(openInTabContent);
+    options.openInTab = openInTabContent === 'true';
  }

  const chromeStyleContent = document
    .querySelector("meta[name='manifest.chrome_style']")
    ?.getAttribute('content');
  if (chromeStyleContent) {
-    options.chromeStyle = Boolean(chromeStyleContent);
+    options.chromeStyle = chromeStyleContent === 'true';
  }

  const browserStyleContent = document
    .querySelector("meta[name='manifest.browser_style']")
    ?.getAttribute('content');
  if (browserStyleContent) {
-    options.browserStyle = Boolean(browserStyleContent);
+    options.browserStyle = browserStyleContent === 'true';
  }

  return {
@@ -192,11 +192,11 @@ async function getOptionsEntrypoint(
 * @param path Absolute path to the background's TS file.
 */
 async function getBackgroundEntrypoint(
-  config: FindEntrypointsConfig,
+  config: InternalConfig,
  path: string,
 ): Promise<BackgroundEntrypoint> {
  const { main: _, ...options } =
-    await importTsFile<BackgroundScriptDefintition>(config.root, path);
+    await importTsFile<BackgroundScriptDefintition>(path, config);
  if (options == null) {
    throw Error('Background script does not have a default export');
  }
@@ -213,13 +213,13 @@ async function getBackgroundEntrypoint(
 * @param path Absolute path to the content script's TS file.
 */
 async function getContentScriptEntrypoint(
-  config: FindEntrypointsConfig,
+  config: InternalConfig,
  name: string,
  path: string,
 ): Promise<ContentScriptEntrypoint> {
  const { main: _, ...options } = await importTsFile<ContentScriptDefinition>(
-    config.root,
    path,
+    config,
  );
  if (options == null) {
    throw Error(`Content script ${name} does not have a default export`);
@@ -258,6 +258,8 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {

  'background.ts': 'background',

+  'content.ts?(x)': 'content-script',
+  'content/index.ts?(x)': 'content-script',
  '*.content.ts?(x)': 'content-script',
  '*.content/index.ts?(x)': 'content-script',

@@ -274,8 +276,3 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
  // Don't warn about any files in subdirectories, like CSS or JS entrypoints for HTML files
  '*/*': 'ignored',
 };
-
-export type FindEntrypointsConfig = Pick<
-  InternalConfig,
-  'root' | 'entrypointsDir' | 'outDir' | 'logger' | 'mode' | 'command'
->;
@@ -48,22 +48,23 @@ async function writePathsDeclarationFile(
  config: InternalConfig,
 ): Promise<string> {
  const filePath = resolve(config.typesDir, 'paths.d.ts');
+  const unions = entrypoints
+    .map((entry) => {
+      const path = getEntrypointBundlePath(
+        entry,
+        config.outDir,
+        entry.inputPath.endsWith('.html') ? '.html' : '.js',
+      );
+      return `  | "/${path}"`;
+    })
+    .sort();

  await fs.writeFile(
    filePath,
    [
      '// Generated by wxt',
      'type EntrypointPath =',
-      ...entrypoints
-        .map((entry) => {
-          const path = getEntrypointBundlePath(
-            entry,
-            config.outDir,
-            entry.inputPath.endsWith('.html') ? '.html' : '.js',
-          );
-          return `  | "/${path}"`;
-        })
-        .sort(),
+      ...(unions.length === 0 ? ['  never'] : unions),
    ].join('\n') + '\n',
  );

@@ -99,6 +100,7 @@ async function writeMainDeclarationFile(
    filePath,
    [
      '// Generated by wxt',
+      `/// <reference types="vite/client" />`,
      ...references.map(
        (ref) => `/// <reference types="./${relative(dir, ref)}" />`,
      ),
@@ -128,7 +130,20 @@ async function writeTsConfigFile(
    "strict": true,

    /* Completeness */
-    "skipLibCheck": true
+    "skipLibCheck": true,
+
+    /* Aliases */
+    "baseUrl": "${relative(dir, config.root)}",
+    "paths": {
+      "@@": ["."],
+      "@@/*": ["./*"],
+      "~~": ["."],
+      "~~/*": ["./*"],
+      "@": ["${relative(config.root, config.srcDir)}"],
+      "@/*": ["${relative(config.root, config.srcDir)}/*"],
+      "~": ["${relative(config.root, config.srcDir)}"],
+      "~/*": ["${relative(config.root, config.srcDir)}/*"]
+    }
  },
  "include": [
    "${relative(dir, config.root)}/**/*",
@@ -1,4 +1,4 @@
-import path, { extname, relative, resolve } from 'path';
+import path, { relative, resolve } from 'path';
 import { BuildOutput, InternalConfig } from '../types';
 import { printTable } from './printTable';
 import pc from 'picocolors';
@@ -13,14 +13,8 @@ export async function printBuildSummary(
    ...output.steps.flatMap((step) => step.chunks),
    ...output.publicAssets,
  ].sort((l, r) => {
-    const lWeight =
-      CHUNK_SORT_WEIGHTS[l.fileName] ??
-      CHUNK_SORT_WEIGHTS[extname(l.fileName)] ??
-      DEFAULT_SORT_WEIGHT;
-    const rWeight =
-      CHUNK_SORT_WEIGHTS[r.fileName] ??
-      CHUNK_SORT_WEIGHTS[extname(r.fileName)] ??
-      DEFAULT_SORT_WEIGHT;
+    const lWeight = getChunkSortWeight(l.fileName);
+    const rWeight = getChunkSortWeight(r.fileName);
    const diff = lWeight - rWeight;
    if (diff !== 0) return diff;
    return l.fileName.localeCompare(r.fileName);
@@ -34,9 +28,8 @@ export async function printBuildSummary(
        relative(process.cwd(), config.outDir) + path.sep,
        chunk.fileName,
      ];
-      const ext = extname(chunk.fileName);
      const prefix = i === chunks.length - 1 ? '  └─' : '  ├─';
-      const color = CHUNK_COLORS[ext] ?? DEFAULT_COLOR;
+      const color = getChunkColor(chunk.fileName);
      const stats = await fs.lstat(resolve(config.outDir, chunk.fileName));
      totalSize += stats.size;
      const size = String(filesize(stats.size));
@@ -58,13 +51,28 @@ const DEFAULT_SORT_WEIGHT = 100;
 const CHUNK_SORT_WEIGHTS: Record<string, number> = {
  'manifest.json': 0,
  '.html': 1,
+  '.js.map': 2,
  '.js': 2,
  '.css': 3,
 };
+function getChunkSortWeight(filename: string) {
+  return (
+    Object.entries(CHUNK_SORT_WEIGHTS).find(([key]) =>
+      filename.endsWith(key),
+    )?.[1] ?? DEFAULT_SORT_WEIGHT
+  );
+}

 const DEFAULT_COLOR = pc.blue;
 const CHUNK_COLORS: Record<string, (text: string) => string> = {
+  '.js.map': pc.gray,
  '.html': pc.green,
  '.css': pc.magenta,
  '.js': pc.cyan,
 };
+function getChunkColor(filename: string) {
+  return (
+    Object.entries(CHUNK_COLORS).find(([key]) => filename.endsWith(key))?.[1] ??
+    DEFAULT_COLOR
+  );
+}
@@ -0,0 +1,133 @@
+import {
+  BuildStepOutput,
+  EntrypointGroup,
+  InternalConfig,
+  WxtDevServer,
+} from './types';
+import * as vite from 'vite';
+import { Scripting } from 'webextension-polyfill';
+import { getEntrypointBundlePath } from './utils/entrypoints';
+import { getContentScriptCssFiles } from './utils/manifest';
+import { createWebExtRunner } from './runners/createWebExtRunner';
+import { buildInternal } from './build';
+
+export async function getServerInfo(): Promise<ServerInfo> {
+  const { default: getPort, portNumbers } = await import('get-port');
+  const port = await getPort({ port: portNumbers(3000, 3010) });
+  const hostname = 'localhost';
+  const origin = `http://${hostname}:${port}`;
+  const serverConfig: vite.InlineConfig = {
+    server: {
+      origin,
+    },
+  };
+
+  return {
+    port,
+    hostname,
+    origin,
+    viteServerConfig: serverConfig,
+  };
+}
+
+export async function setupServer(
+  serverInfo: ServerInfo,
+  config: InternalConfig,
+): Promise<WxtDevServer> {
+  const runner = createWebExtRunner();
+
+  const viteServer = await vite.createServer(
+    vite.mergeConfig(serverInfo, config.vite),
+  );
+
+  const start = async () => {
+    await viteServer.listen(server.port);
+    config.logger.success(`Started dev server @ ${serverInfo.origin}`);
+
+    server.currentOutput = await buildInternal(config);
+    config.logger.info('Opening browser...');
+    await runner.openBrowser(config);
+    config.logger.success('Opened!');
+  };
+
+  const reloadExtension = () => {
+    viteServer.ws.send('wxt:reload-extension');
+  };
+  const reloadPage = (path: string) => {
+    // Can't use Vite's built-in "full-reload" event because it doesn't like our paths, it expects
+    // paths ending in "/index.html"
+    viteServer.ws.send('wxt:reload-page', path);
+  };
+  const reloadContentScript = (
+    contentScript: Omit<Scripting.RegisteredContentScript, 'id'>,
+  ) => {
+    viteServer.ws.send('wxt:reload-content-script', contentScript);
+  };
+
+  const server: WxtDevServer = {
+    ...viteServer,
+    start,
+    currentOutput: {
+      manifest: {
+        manifest_version: 3,
+        name: '',
+        version: '',
+      },
+      publicAssets: [],
+      steps: [],
+    },
+    port: serverInfo.port,
+    hostname: serverInfo.hostname,
+    origin: serverInfo.origin,
+    reloadExtension,
+    reloadPage,
+    reloadContentScript,
+  };
+
+  return server;
+}
+
+/**
+ * From the server, tell the client to reload content scripts from the provided build step outputs.
+ */
+export function reloadContentScripts(
+  steps: BuildStepOutput[],
+  config: InternalConfig,
+  server: WxtDevServer,
+) {
+  if (config.manifestVersion === 3) {
+    steps.forEach((step) => {
+      const entry = step.entrypoints;
+      if (Array.isArray(entry) || entry.type !== 'content-script') return;
+
+      const js = [getEntrypointBundlePath(entry, config.outDir, '.js')];
+      const css = getContentScriptCssFiles([entry], server.currentOutput);
+
+      server.reloadContentScript({
+        ...entry.options,
+        js,
+        css,
+      });
+    });
+  } else {
+    server.reloadExtension();
+  }
+}
+
+export function reloadHtmlPages(
+  groups: EntrypointGroup[],
+  server: WxtDevServer,
+  config: InternalConfig,
+) {
+  groups.flat().forEach((entry) => {
+    const path = getEntrypointBundlePath(entry, config.outDir, '.html');
+    server.reloadPage(path);
+  });
+}
+
+interface ServerInfo {
+  port: number;
+  hostname: string;
+  origin: string;
+  viteServerConfig: vite.InlineConfig;
+}
@@ -1,27 +1,96 @@
 import * as vite from 'vite';
-import { Manifest } from 'webextension-polyfill';
+import { Manifest, Scripting } from 'webextension-polyfill';
 import { UnimportOptions } from 'unimport';
 import { EntrypointGroup } from '.';

 export interface InlineConfig {
+  /**
+   * Project root directory.
+   *
+   * @default
+   * process.cwd()
+   */
  root?: string;
+  /**
+   * Directory containing all source code. Set to `"src"` to move all source code to a `src/`
+   * directory.
+   *
+   * @default
+   * "<root>"
+   */
  srcDir?: string;
+  /**
+   * Directory containing files that will be copied to the output directory as-is.
+   *
+   * @default
+   * "<srcDir>/publicDir"
+   */
  publicDir?: string;
+  /**
+   * @default
+   * "<srcDir>/entrypoints"
+   */
  entrypointsDir?: string;
+  /**
+   * Path to `"wxt.config.ts"` file or false to disable config file discovery.
+   *
+   * @default
+   * "wxt.config.ts"
+   */
  configFile?: string | false;
+  /**
+   * ID of the extension for each store. Used for publishing.
+   */
  storeIds?: {
    chrome?: string;
    firefox?: string;
    edge?: string;
  };
+  /**
+   * Explicitly set a mode to run in. This will override the default mode for each command, and can
+   * be overridden by the command line `--mode` option.
+   */
  mode?: string;
+  /**
+   * Customize auto-import options.
+   */
  imports?: Partial<UnimportOptions>;
+  /**
+   * Explicitly set a browser to target. This will override the default browser for each command,
+   * and can be overridden by the command line `--browser` option.
+   *
+   * @default
+   * "chrome"
+   */
  browser?: TargetBrowser;
+  /**
+   * Explicitly set a manifest version to target. This will override the default manifest version
+   * for each command, and can be overridden by the command line `--mv2` or `--mv3` option.
+   */
  manifestVersion?: TargetManifestVersion;
+  /**
+   * Override the logger used.
+   *
+   * @default
+   * consola
+   */
  logger?: Logger;
-  vite?: Omit<vite.InlineConfig, 'root' | 'configFile' | 'mode'>;
-  manifest?: UserManifest;
+  /**
+   * Custom Vite options.
+   */
+  vite?: Omit<vite.UserConfig, 'root' | 'configFile' | 'mode'>;
+  /**
+   * Customize the `manifest.json` output. Can be an object, promise, or function that returns an
+   * object or promise.
+   */
+  manifest?: UserManifest | Promise<UserManifest> | UserManifestFn;
+  /**
+   * Custom server options.
+   */
  server?: WxtDevServer;
+  /**
+   * Custom runner options. Options set here can be overridden in a `web-ext.config.ts` file.
+   */
  runner?: ExtensionRunnerConfig;
 }

@@ -54,6 +123,14 @@ export interface WxtDevServer extends vite.ViteDevServer {
   * Ex: `"http://localhost:3000"`
   */
  origin: string;
+  /**
+   * Stores the current build output of the server.
+   */
+  currentOutput: BuildOutput;
+  /**
+   * Start the server on the first open port.
+   */
+  start(): Promise<void>;
  /**
   * Tell the extension to reload by running `browser.runtime.reload`.
   */
@@ -70,6 +147,14 @@ export interface WxtDevServer extends vite.ViteDevServer {
   * server.reloadPage("sandbox.html")
   */
  reloadPage: (path: string) => void;
+  /**
+   * Tell the extension to restart a content script.
+   *
+   * @param contentScript The manifest definition for a content script
+   */
+  reloadContentScript: (
+    contentScript: Omit<Scripting.RegisteredContentScript, 'id'>,
+  ) => void;
 }

 export type TargetBrowser = 'chrome' | 'firefox' | 'safari' | 'edge' | 'opera';
@@ -125,7 +210,6 @@ export interface GenericEntrypoint extends BaseEntrypoint {
    | 'sidepanel'
    | 'devtools'
    | 'unlisted-page'
-    | 'unlisted-page'
    | 'unlisted-script';
 }

@@ -173,11 +257,50 @@ export type Entrypoint =
 export type OnContentScriptStopped = (cb: () => void) => void;

 export interface ContentScriptDefinition {
-  matches: string[];
-  runAt?: 'document_start' | 'document_end' | 'document_idle';
-  matchAboutBlank?: boolean;
+  matches: Manifest.ContentScript['matches'];
+  /**
+   * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+   * @default "documentIdle"
+   */
+  runAt?: Manifest.ContentScript['run_at'];
+  /**
+   * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+   * @default false
+   */
+  matchAboutBlank?: Manifest.ContentScript['match_about_blank'];
+  /**
+   * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+   * @default []
+   */
+  excludeMatches?: Manifest.ContentScript['exclude_matches'];
+  /**
+   * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+   * @default []
+   */
+  includeGlobs?: Manifest.ContentScript['include_globs'];
+  /**
+   * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+   * @default []
+   */
+  excludeGlobs?: Manifest.ContentScript['exclude_globs'];
+  /**
+   * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+   * @default false
+   */
+  allFrames?: Manifest.ContentScript['all_frames'];
+  /**
+   * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+   * @default false
+   */
  matchOriginAsFallback?: boolean;
+  /**
+   * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+   * @default "ISOLATED"
+   */
  world?: 'ISOLATED' | 'MAIN';
+  /**
+   * Main function executed when the content script is loaded.
+   */
  main(): void | Promise<void>;
 }

@@ -187,32 +310,46 @@ export interface BackgroundScriptDefintition {
 }

 /**
- * Manifest customization available in the `wxt.config.ts` file. Any missing fields like "name"
- * and "version" are managed automatically, and don't need to be listed here.
+ * Manifest customization available in the `wxt.config.ts` file. You cannot configure entrypoints
+ * here, they are configured inline.
 */
-export type UserManifest = Omit<
-  Manifest.WebExtensionManifest,
-  | 'action'
-  | 'background'
-  | 'browser_action'
-  | 'chrome_url_overrides'
-  | 'content_scripts'
-  | 'description'
-  | 'devtools_page'
-  | 'manifest_version'
-  | 'name'
-  | 'options_page'
-  | 'options_ui'
-  | 'sandbox'
-  | 'page_action'
-  | 'popup'
-  | 'short_name'
-  | 'sidepanel'
-  | 'sidebar_action'
-  | 'version'
-  | 'version_name'
+export type UserManifest = Partial<
+  Omit<
+    Manifest.WebExtensionManifest,
+    | 'action'
+    | 'background'
+    | 'browser_action'
+    | 'chrome_url_overrides'
+    | 'content_scripts'
+    | 'devtools_page'
+    | 'manifest_version'
+    | 'options_page'
+    | 'options_ui'
+    | 'sandbox'
+    | 'page_action'
+    | 'popup'
+    | 'sidepanel'
+    | 'sidebar_action'
+  >
 >;

+export type UserManifestFn = (
+  env: ConfigEnv,
+) => UserManifest | Promise<UserManifest>;
+
+export interface ConfigEnv {
+  mode: string;
+  command: 'build' | 'serve';
+  /**
+   * Browser passed in from the CLI
+   */
+  browser: TargetBrowser;
+  /**
+   * Manifest version passed in from the CLI
+   */
+  manifestVersion: 2 | 3;
+}
+
 /**
 * Configure how the browser starts up.
 */
@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { every } from '../arrays';
+
+describe('Array Utils', () => {
+  describe('every', () => {
+    it('should return true when the array is empty', () => {
+      expect(every([], () => false)).toBe(true);
+    });
+
+    it("should return true when all item predicate's return true", () => {
+      expect(every([1, 1, 1], (item) => item === 1)).toBe(true);
+    });
+
+    it("should return false when a single item predicate's return false", () => {
+      expect(every([1, 2, 1], (item) => item === 1)).toBe(false);
+    });
+  });
+});
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { hashContentScriptOptions } from '../content-scripts';
+
+describe('Content Script Utils', () => {
+  describe('hashContentScriptOptions', () => {
+    it('should return a string containing all the options with defaults applied', () => {
+      const hash = hashContentScriptOptions({ matches: [] });
+
+      expect(hash).toMatchInlineSnapshot(
+        '"[[\\"allFrames\\",false],[\\"excludeGlobs\\",[]],[\\"excludeMatches\\",[]],[\\"includeGlobs\\",[]],[\\"matchAboutBlank\\",false],[\\"matches\\",[]],[\\"matchOriginAsFallback\\",false],[\\"runAt\\",\\"document_idle\\"],[\\"world\\",\\"ISOLATED\\"]]"',
+      );
+    });
+
+    it('should be consistent regardless of the object ordering and default values', () => {
+      const hash1 = hashContentScriptOptions({
+        allFrames: true,
+        matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+        matchAboutBlank: false,
+      });
+      const hash2 = hashContentScriptOptions({
+        matches: ['*://duckduckgo.com/*', '*://google.com/*'],
+        allFrames: true,
+      });
+
+      expect(hash1).toBe(hash2);
+    });
+  });
+});
@@ -4,7 +4,10 @@ import {
  fakeBackgroundEntrypoint,
  fakeContentScriptEntrypoint,
  fakeFile,
+  fakeGenericEntrypoint,
  fakeManifest,
+  fakeOptionsEntrypoint,
+  fakePopupEntrypoint,
  fakeRollupOutputAsset,
  fakeRollupOutputChunk,
 } from '../../../testing/fake-objects';
@@ -129,4 +132,120 @@ describe('Detect Dev Changes', () => {
      expect(actual).toEqual(expected);
    });
  });
+
+  describe('HTML Pages', () => {
+    it('should rebuild then reload only the effected pages', async () => {
+      const changedPath = '/root/page1/index.html';
+      const htmlPage1 = fakePopupEntrypoint({
+        inputPath: changedPath,
+      });
+      const htmlPage2 = fakeOptionsEntrypoint({
+        inputPath: '/root/page2.html',
+      });
+      const htmlPage3 = fakeGenericEntrypoint({
+        type: 'sandbox',
+        inputPath: '/root/page3.html',
+      });
+
+      const step1: BuildStepOutput = {
+        entrypoints: [htmlPage1, htmlPage2],
+        chunks: [
+          fakeRollupOutputChunk({
+            moduleIds: [fakeFile(), changedPath],
+          }),
+        ],
+      };
+      const step2: BuildStepOutput = {
+        entrypoints: [htmlPage3],
+        chunks: [
+          fakeRollupOutputChunk({
+            moduleIds: [fakeFile(), fakeFile(), fakeFile()],
+          }),
+        ],
+      };
+
+      const currentOutput: BuildOutput = {
+        manifest: fakeManifest(),
+        publicAssets: [],
+        steps: [step1, step2],
+      };
+      const expected: DevModeChange = {
+        type: 'html-reload',
+        cachedOutput: {
+          ...currentOutput,
+          steps: [step2],
+        },
+        rebuildGroups: [[htmlPage1, htmlPage2]],
+      };
+
+      const actual = detectDevChanges(
+        [['unknown', changedPath]],
+        currentOutput,
+      );
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('Content Scripts', () => {
+    it('should rebuild then reload only the effected content scripts', async () => {
+      const changedPath = '/root/utils/shared.ts';
+      const script1 = fakeContentScriptEntrypoint({
+        inputPath: '/root/overlay1.content/index.ts',
+      });
+      const script2 = fakeContentScriptEntrypoint({
+        inputPath: '/root/overlay2.ts',
+      });
+      const script3 = fakeContentScriptEntrypoint({
+        inputPath: '/root/overlay3.content/index.ts',
+      });
+
+      const step1: BuildStepOutput = {
+        entrypoints: script1,
+        chunks: [
+          fakeRollupOutputChunk({
+            moduleIds: [fakeFile(), changedPath],
+          }),
+        ],
+      };
+      const step2: BuildStepOutput = {
+        entrypoints: script2,
+        chunks: [
+          fakeRollupOutputChunk({
+            moduleIds: [fakeFile(), fakeFile(), fakeFile()],
+          }),
+        ],
+      };
+      const step3: BuildStepOutput = {
+        entrypoints: script3,
+        chunks: [
+          fakeRollupOutputChunk({
+            moduleIds: [changedPath, fakeFile(), fakeFile()],
+          }),
+        ],
+      };
+
+      const currentOutput: BuildOutput = {
+        manifest: fakeManifest(),
+        publicAssets: [],
+        steps: [step1, step2, step3],
+      };
+      const expected: DevModeChange = {
+        type: 'content-script-reload',
+        cachedOutput: {
+          ...currentOutput,
+          steps: [step2],
+        },
+        changedSteps: [step1, step3],
+        rebuildGroups: [script1, script3],
+      };
+
+      const actual = detectDevChanges(
+        [['unknown', changedPath]],
+        currentOutput,
+      );
+
+      expect(actual).toEqual(expected);
+    });
+  });
 });
@@ -0,0 +1,11 @@
+/**
+ * Checks if `predicate` returns truthy for all elements of the array.
+ */
+export function every<T>(
+  array: T[],
+  predicate: (item: T, index: number) => boolean,
+): boolean {
+  for (let i = 0; i < array.length; i++)
+    if (!predicate(array[i], i)) return false;
+  return true;
+}
@@ -0,0 +1,52 @@
+import { Manifest } from 'webextension-polyfill';
+import { ContentScriptEntrypoint } from '../types';
+
+/**
+ * Returns a unique and consistent string hash based on a content scripts options.
+ *
+ * It is able to recognize default values,
+ */
+export function hashContentScriptOptions(
+  options: ContentScriptEntrypoint['options'],
+): string {
+  const withDefaults: ContentScriptEntrypoint['options'] = {
+    excludeGlobs: [],
+    excludeMatches: [],
+    includeGlobs: [],
+    matchAboutBlank: false,
+    matchOriginAsFallback: false,
+    runAt: 'document_idle',
+    allFrames: false,
+    world: 'ISOLATED',
+    // TODO: strip undefined fields from options object to improve content script grouping.
+    ...options,
+  };
+  return JSON.stringify(
+    Object.entries(withDefaults)
+      // Sort any arrays so their values are consistent
+      .map<[string, unknown]>(([key, value]) => {
+        if (Array.isArray(value)) return [key, value.sort()];
+        else return [key, value];
+      })
+      // Sort all the fields alphabetically
+      .sort((l, r) => l[0].localeCompare(r[0])),
+  );
+}
+
+export function mapWxtOptionsToContentScript(
+  options: ContentScriptEntrypoint['options'],
+): Omit<Manifest.ContentScript, 'js' | 'css'> {
+  return {
+    matches: options.matches,
+    all_frames: options.allFrames,
+    match_about_blank: options.matchAboutBlank,
+    exclude_globs: options.excludeGlobs,
+    exclude_matches: options.excludeMatches,
+    include_globs: options.includeGlobs,
+    run_at: options.runAt,
+
+    // @ts-expect-error: untyped chrome options
+    match_origin_as_fallback: options.matchOriginAsFallback,
+    world: options.world,
+  };
+}
@@ -1,5 +1,6 @@
 import { BuildOutput, BuildStepOutput, EntrypointGroup } from '../types';
 import * as vite from 'vite';
+import { every } from './arrays';

 /**
 * Compare the changed files vs the build output and determine what kind of reload needs to happen:
@@ -60,9 +61,9 @@ export function detectDevChanges(
    }
  }

-  const isOnlyHtmlChanges = !changedFiles.find(
-    ([_, file]) => !file.endsWith('.html'),
-  );
+  const isOnlyHtmlChanges =
+    changedFiles.length > 0 &&
+    every(changedFiles, ([_, file]) => file.endsWith('.html'));
  if (isOnlyHtmlChanges) {
    return {
      type: 'html-reload',
@@ -71,6 +72,21 @@ export function detectDevChanges(
    };
  }

+  const isOnlyContentScripts =
+    changedOutput.steps.length > 0 &&
+    every(
+      changedOutput.steps.flatMap((step) => step.entrypoints),
+      (entry) => entry.type === 'content-script',
+    );
+  if (isOnlyContentScripts) {
+    return {
+      type: 'content-script-reload',
+      cachedOutput: unchangedOutput,
+      changedSteps: changedOutput.steps,
+      rebuildGroups: changedOutput.steps.map((step) => step.entrypoints),
+    };
+  }
+
  return {
    type: 'extension-reload',
    cachedOutput: unchangedOutput,
@@ -114,9 +130,12 @@ function findEffectedSteps(
 * Contains information about what files changed, what needs rebuilt, and the type of reload that is
 * required.
 */
-export type DevModeChange = NoChange | HtmlReload | ExtensionReload;
+export type DevModeChange =
+  | NoChange
+  | HtmlReload
+  | ExtensionReload
+  | ContentScriptReload;
 // | BrowserRestart
-// | ContentScriptReload

 interface NoChange {
  type: 'no-change';
@@ -145,9 +164,10 @@ interface ExtensionReload extends RebuildChange {
 //   type: 'browser-restart';
 // }

-// interface ContentScriptReload extends RebuildChange {
-//   type: 'content-script-reload';
-// }
+interface ContentScriptReload extends RebuildChange {
+  type: 'content-script-reload';
+  changedSteps: BuildStepOutput[];
+}

 /**
 * When figuring out what needs reloaded, this stores the step that was changed, or the public
@@ -1,33 +0,0 @@
-import net from 'node:net';
-
-/**
- * Finds the first open port in a range of ports.
- */
-export function findOpenPort(
-  startPort: number,
-  endPort: number,
-): Promise<number> {
-  return findOpenPortRecursive(startPort, startPort, endPort);
-}
-
-function findOpenPortRecursive(
-  port: number,
-  startPort: number,
-  endPort: number,
-): Promise<number> {
-  return new Promise((resolve, reject) => {
-    if (port > endPort)
-      return reject(
-        Error(`Could not find open port between ${startPort}-${endPort}`),
-      );
-    const server = net.createServer();
-
-    server.listen(port, () => {
-      server.once('close', () => resolve(port));
-      server.close();
-    });
-    server.on('error', () =>
-      resolve(findOpenPortRecursive(port + 1, startPort, endPort)),
-    );
-  });
-}
@@ -1,13 +1,15 @@
 import {
+  ConfigEnv,
  ExtensionRunnerConfig,
  InlineConfig,
  InternalConfig,
  UserConfig,
+  UserManifest,
+  UserManifestFn,
 } from '../types';
 import path, { resolve } from 'node:path';
 import * as vite from 'vite';
 import { consola } from 'consola';
-import { importTsFile } from './importTsFile';
 import * as plugins from '../vite-plugins';
 import { createFsCache } from './createFsCache';
 import { getGlobals } from './globals';
@@ -43,7 +45,6 @@ export async function getInternalConfig(
    command,
    logger,
    vite: config.vite ?? {},
-    manifest: config.manifest ?? {},
    imports: config.imports ?? {},
    runnerConfig: await loadConfig<ExtensionRunnerConfig>({
      name: 'web-ext',
@@ -59,10 +60,12 @@ export async function getInternalConfig(
    mode,
  };
  if (config.configFile !== false) {
-    userConfig = await importTsFile<UserConfig>(
-      root,
-      path.resolve(root, config.configFile ?? 'wxt.config.ts'),
-    );
+    const loaded = await loadConfig<UserConfig>({
+      name: 'wxt',
+      cwd: root,
+      rcFile: false,
+    });
+    userConfig = loaded.config ?? {};
  }

  // Merge inline and user configs
@@ -81,6 +84,12 @@ export async function getInternalConfig(
  const wxtDir = resolve(srcDir, '.wxt');
  const typesDir = resolve(wxtDir, 'types');

+  // Merge manifest sources
+  const env: ConfigEnv = { mode, browser, manifestVersion, command };
+  const userManifest = await resolveManifestConfig(env, userConfig.manifest);
+  const inlineManifest = await resolveManifestConfig(env, config.manifest);
+  const manifest = vite.mergeConfig(userManifest, inlineManifest);
+
  const finalConfig: InternalConfig = {
    ...merged,
    srcDir,
@@ -89,6 +98,7 @@ export async function getInternalConfig(
    wxtDir: wxtDir,
    typesDir,
    fsCache: createFsCache(wxtDir),
+    manifest,
  };

  // Customize the default vite config
@@ -111,6 +121,7 @@ export async function getInternalConfig(
    plugins.virtualEntrypoin('content-script', finalConfig),
  );
  finalConfig.vite.plugins.push(plugins.devServerGlobals(finalConfig));
+  finalConfig.vite.plugins.push(plugins.tsconfigPaths(finalConfig));

  finalConfig.vite.define ??= {};
  getGlobals(finalConfig).forEach((global) => {
@@ -126,5 +137,20 @@ export async function getInternalConfig(
 */
 type InternalConfigNoUserDirs = Omit<
  InternalConfig,
-  'srcDir' | 'publicDir' | 'entrypointsDir' | 'wxtDir' | 'typesDir' | 'fsCache'
+  | 'srcDir'
+  | 'publicDir'
+  | 'entrypointsDir'
+  | 'wxtDir'
+  | 'typesDir'
+  | 'fsCache'
+  | 'manifest'
 >;
+
+async function resolveManifestConfig(
+  env: ConfigEnv,
+  manifest: UserManifest | Promise<UserManifest> | UserManifestFn | undefined,
+): Promise<UserManifest> {
+  return await (typeof manifest === 'function'
+    ? manifest(env)
+    : manifest ?? {});
+}
@@ -1,44 +1,67 @@
-import { consola } from 'consola';
 import createJITI from 'jiti';
-import transform from 'jiti/dist/babel';
+import { InternalConfig } from '../types';
+import { createUnimport } from 'unimport';
+import fs from 'fs-extra';
 import { resolve } from 'path';
-import { scanExports } from 'unimport';
+import transform from 'jiti/dist/babel';
+import { getUnimportOptions } from './auto-imports';

-export async function importTsFile<T>(root: string, path: string): Promise<T> {
-  const clientImports = await scanExports(
-    resolve(root, 'node_modules/wxt/dist/client.js'),
+/**
+ * Get the value from the default export of a `path`.
+ *
+ * It works by:
+ *
+ * 1. Reading the file text
+ * 2. Stripping all imports from it via regex
+ * 3. Auto-import only the client helper functions
+ *
+ * This prevents resolving imports of imports, speeding things up and preventing "xxx is not
+ * defined" errors.
+ *
+ * Downside is that code cannot be executed outside of the main fucntion for the entrypoint,
+ * otherwise you will see "xxx is not defined" errors for any imports used outside of main function.
+ */
+export async function importTsFile<T>(
+  path: string,
+  config: InternalConfig,
+): Promise<T> {
+  config.logger.debug('Loading file metadata:', path);
+
+  const unimport = createUnimport({
+    ...getUnimportOptions(config),
+    // Only allow specific imports, not all from the project
+    imports: [{ name: '*', as: 'browser', from: 'webextension-polyfill' }],
+    dirs: [],
+  });
+  await unimport.init();
+
+  const text = await fs.readFile(path, 'utf-8');
+  const textNoImports = text.replace(/import.*[\n;]/gm, '');
+  const { code } = await unimport.injectImports(textNoImports);
+  config.logger.debug(
+    ['Text:', text, 'No imports:', textNoImports, 'Code:', code].join('\n'),
  );
+
  const jiti = createJITI(__filename, {
    cache: false,
    esmResolve: true,
    interopDefault: true,
-
+    alias: {
+      'webextension-polyfill': resolve(
+        config.root,
+        'node_modules/wxt/dist/virtual-modules/fake-browser.js',
+      ),
+    },
    transform(opts) {
-      // Remove CSS imports from the source code - Jiti can't handle them.
-      opts.source = opts.source.replace(/^import ['"].*\.css['"];?$/gm, '');
-      opts.source = opts.source.replace(
-        /^import\s+.*\s+from ['"]webextension-polyfill['"];?$/gm,
-        '',
-      );
-
-      // Append any wxt/client functions so babel doesn't complain about undefined variables
-      if (opts.filename === path) {
-        // TODO: Only append import if it isn't already imported
-        const imports =
-          clientImports
-            .map((i) => `import { ${i.name} } from "${i.from}";`)
-            .join('\n') + '\n';
-        opts.source = imports + opts.source;
-      }
-
-      // Call the default babel transformer with our modified source code
-      return transform(opts);
+      if (opts.filename === path) return transform({ ...opts, source: code });
+      else return transform(opts);
    },
  });
+
  try {
    return await jiti(path);
  } catch (err) {
-    consola.error(`Failed to import file: ${path}`);
+    config.logger.error(err);
    throw err;
  }
 }
@@ -12,6 +12,10 @@ import fs from 'fs-extra';
 import { resolve } from 'path';
 import { getEntrypointBundlePath } from './entrypoints';
 import { ContentSecurityPolicy } from './ContentSecurityPolicy';
+import {
+  hashContentScriptOptions,
+  mapWxtOptionsToContentScript,
+} from './content-scripts';

 /**
 * Writes the manifest to the output directory and the build output.
@@ -47,24 +51,39 @@ export async function generateMainfest(
  config: InternalConfig,
 ): Promise<Manifest.WebExtensionManifest> {
  const pkg = await getPackageJson(config);
-  if (pkg.version == null)
-    throw Error('package.json does not include a version');
-  if (pkg.name == null) throw Error('package.json does not include a name');
-  if (pkg.description == null)
-    throw Error('package.json does not include a description');

-  const manifest: Manifest.WebExtensionManifest = {
-    manifest_version: config.manifestVersion,
-    name: pkg.name,
-    short_name: pkg.shortName,
-    version: simplifyVersion(pkg.version),
-    version_name: config.browser === 'firefox' ? undefined : pkg.version,
-    ...config.manifest,
-  };
+  const manifest: Manifest.WebExtensionManifest = Object.assign(
+    {
+      manifest_version: config.manifestVersion,
+      name: pkg?.name,
+      description: pkg?.description,
+      version: pkg?.version && simplifyVersion(pkg.version),
+      // Only add the version name to chromium and if the user hasn't specified a custom version.
+      version_name:
+        config.browser !== 'firefox' && !config.manifest.version
+          ? pkg?.version
+          : undefined,
+      short_name: pkg?.shortName,
+    },
+    config.manifest,
+  );

  addEntrypoints(manifest, entrypoints, buildOutput, config);

  if (config.command === 'serve') addDevModeCsp(manifest, config);
+  if (config.command === 'serve') addDevModePermissions(manifest, config);
+
+  // TODO: transform manifest here.
+
+  if (manifest.name == null)
+    throw Error(
+      "Manifest 'name' is missing. Either:\n1. Set the name in your <root>/package.json\n2. Set a name via the manifest option in your wxt.config.ts",
+    );
+  if (manifest.version == null) {
+    throw Error(
+      "Manifest 'version' is missing. Either:\n1. Add a version in your <root>/package.json\n2. Pass the version via the manifest option in your wxt.config.ts",
+    );
+  }

  return manifest;
 }
@@ -74,8 +93,18 @@ export async function generateMainfest(
 *
 * TODO: look in root and up directories until it's found
 */
-async function getPackageJson(config: InternalConfig): Promise<any> {
-  return await fs.readJson(resolve(config.root, 'package.json'));
+async function getPackageJson(
+  config: InternalConfig,
+): Promise<Partial<Record<string, any>> | undefined> {
+  const file = resolve(config.root, 'package.json');
+  try {
+    return await fs.readJson(file);
+  } catch (err) {
+    config.logger.debug(
+      `Failed to read package.json at: ${file}. Returning undefined.`,
+    );
+    return {};
+  }
 }

 /**
@@ -84,7 +113,6 @@ async function getPackageJson(config: InternalConfig): Promise<any> {
 */
 function simplifyVersion(versionName: string): string {
  // Regex adapted from here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version#version_format
-
  const version = /^((0|[1-9][0-9]{0,8})([.](0|[1-9][0-9]{0,8})){0,3}).*$/.exec(
    versionName,
  )?.[1];
@@ -270,30 +298,29 @@ function addEntrypoints(
  }

  if (contentScripts?.length) {
-    if (config.command === 'serve') {
-      const permissionsKey =
-        config.manifestVersion === 2 ? 'permissions' : 'host_permissions';
-      const hostPermissions = new Set<string>(manifest[permissionsKey] ?? []);
+    // Don't add content scripts to the manifest in dev mode for MV3 - they're managed and reloaded
+    // at runtime
+    if (config.command === 'serve' && config.manifestVersion === 3) {
+      const hostPermissions = new Set<string>(manifest.host_permissions ?? []);
      contentScripts.forEach((script) => {
        script.options.matches.forEach((matchPattern) => {
          hostPermissions.add(matchPattern);
        });
      });
-      manifest[permissionsKey] = Array.from(hostPermissions).sort();
+      hostPermissions.forEach((permission) =>
+        addHostPermission(manifest, permission),
+      );
    } else {
      const hashToEntrypointsMap = contentScripts.reduce((map, script) => {
-        const hash = JSON.stringify(script.options);
-        if (!map.has(hash)) {
-          map.set(hash, [script]);
-        } else {
-          map.get(hash)?.push(script);
-        }
+        const hash = hashContentScriptOptions(script.options);
+        if (map.has(hash)) map.get(hash)?.push(script);
+        else map.set(hash, [script]);
        return map;
      }, new Map<string, ContentScriptEntrypoint[]>());

      manifest.content_scripts = Array.from(hashToEntrypointsMap.entries()).map(
        ([, scripts]) => ({
-          ...scripts[0].options,
+          ...mapWxtOptionsToContentScript(scripts[0].options),
          // TOOD: Sorting css and js arrays here so we get consistent test results... but we
          // shouldn't have to. Where is the inconsistency coming from?
          css: getContentScriptCssFiles(scripts, buildOutput)?.sort(),
@@ -316,13 +343,9 @@ function addDevModeCsp(
  const allowedCsp = config.server?.origin ?? 'http://localhost:*';

  if (manifest.manifest_version === 3) {
-    manifest.host_permissions ??= [];
-    if (!manifest.host_permissions.includes(permission))
-      manifest.host_permissions.push(permission);
+    addHostPermission(manifest, permission);
  } else {
-    manifest.permissions ??= [];
-    if (!manifest.permissions.includes(permission))
-      manifest.permissions.push(permission);
+    addPermission(manifest, permission);
  }

  const csp = new ContentSecurityPolicy(
@@ -345,11 +368,22 @@ function addDevModeCsp(
  }
 }

+function addDevModePermissions(
+  manifest: Manifest.WebExtensionManifest,
+  config: InternalConfig,
+) {
+  // For reloading the page
+  addPermission(manifest, 'tabs');
+
+  // For registering content scripts
+  if (config.manifestVersion === 3) addPermission(manifest, 'scripting');
+}
+
 /**
 * Returns the bundle paths to CSS files associated with a list of content scripts, or undefined if
 * there is no associated CSS.
 */
-function getContentScriptCssFiles(
+export function getContentScriptCssFiles(
  contentScripts: ContentScriptEntrypoint[],
  buildOutput: Omit<BuildOutput, 'manifest'>,
 ): string[] | undefined {
@@ -368,3 +402,21 @@ function getContentScriptCssFiles(
  if (css.length > 0) return css;
  return undefined;
 }
+
+function addPermission(
+  manifest: Manifest.WebExtensionManifest,
+  permission: string,
+): void {
+  manifest.permissions ??= [];
+  if (manifest.permissions.includes(permission)) return;
+  manifest.permissions.push(permission);
+}
+
+function addHostPermission(
+  manifest: Manifest.WebExtensionManifest,
+  hostPermission: string,
+): void {
+  manifest.host_permissions ??= [];
+  if (manifest.host_permissions.includes(hostPermission)) return;
+  manifest.host_permissions.push(hostPermission);
+}
@@ -11,20 +11,17 @@ export function devHtmlPrerender(config: InternalConfig): vite.Plugin {
  return {
    apply: 'build',
    name: 'wxt:dev-html-prerender',
-    config(userConfig) {
-      return vite.mergeConfig(
-        {
-          resolve: {
-            alias: {
-              '@wxt/reload-html': resolve(
-                config.root,
-                'node_modules/wxt/dist/virtual-modules/reload-html.js',
-              ),
-            },
+    config() {
+      return {
+        resolve: {
+          alias: {
+            '@wxt/reload-html': resolve(
+              config.root,
+              'node_modules/wxt/dist/virtual-modules/reload-html.js',
+            ),
          },
        },
-        userConfig,
-      );
+      };
    },
    async transform(html, id) {
      const server = config.server;
@@ -7,18 +7,19 @@ import { InternalConfig } from '../types';
 export function devServerGlobals(internalConfig: InternalConfig): Plugin {
  return {
    name: 'wxt:dev-server-globals',
-    config(config) {
+    config() {
      if (internalConfig.server == null || internalConfig.command == 'build')
        return;

-      config.define ??= {};
-      config.define.__DEV_SERVER_PROTOCOL__ = JSON.stringify('ws:');
-      config.define.__DEV_SERVER_HOSTNAME__ = JSON.stringify(
-        internalConfig.server.hostname,
-      );
-      config.define.__DEV_SERVER_PORT__ = JSON.stringify(
-        internalConfig.server.port,
-      );
+      return {
+        define: {
+          __DEV_SERVER_PROTOCOL__: JSON.stringify('ws:'),
+          __DEV_SERVER_HOSTNAME__: JSON.stringify(
+            internalConfig.server.hostname,
+          ),
+          __DEV_SERVER_PORT__: JSON.stringify(internalConfig.server.port),
+        },
+      };
    },
  };
 }
@@ -4,3 +4,4 @@ export * from './download';
 export * from './multipageMove';
 export * from './unimport';
 export * from './virtualEntrypoint';
+export * from './tsconfigPaths';
@@ -0,0 +1,10 @@
+import { InternalConfig } from '../types';
+import paths from 'vite-tsconfig-paths';
+
+export function tsconfigPaths(config: InternalConfig) {
+  const fn: typeof paths =
+    typeof paths === 'function' ? paths : (paths as any).default;
+  return fn({
+    root: config.root,
+  });
+}
@@ -2,6 +2,16 @@ import { createUnimport } from 'unimport';
 import { InternalConfig } from '../types';
 import { getUnimportOptions } from '../utils/auto-imports';
 import { Plugin } from 'vite';
+import { extname } from 'path';
+
+const ENABLED_EXTENSIONS: Record<string, boolean | undefined> = {
+  '.js': true,
+  '.jsx': true,
+  '.ts': true,
+  '.tsx': true,
+  '.vue': true,
+  '.svelte': true,
+};

 /**
 * Inject any global imports defined by unimport
@@ -16,7 +26,8 @@ export function unimport(config: InternalConfig): Plugin {
      await unimport.scanImportsFromDir(undefined, { cwd: config.srcDir });
    },
    async transform(code, id) {
-      return unimport.injectImports(code, id);
+      const ext = extname(id);
+      if (ENABLED_EXTENSIONS[ext]) return unimport.injectImports(code, id);
    },
  };
 }
@@ -1,32 +1,19 @@
-import {
-  BuildOutput,
-  WxtDevServer,
-  InlineConfig,
-  InternalConfig,
-  EntrypointGroup,
-} from './core/types';
+import { BuildOutput, WxtDevServer, InlineConfig } from './core/types';
 import { getInternalConfig } from './core/utils/getInternalConfig';
-import { findEntrypoints } from './core/build/findEntrypoints';
-import { buildEntrypoints } from './core/build/buildEntrypoints';
-import { generateMainfest, writeManifest } from './core/utils/manifest';
-import { printBuildSummary } from './core/log/printBuildSummary';
-import fs from 'fs-extra';
-import { generateTypesDir } from './core/build/generateTypesDir';
 import pc from 'picocolors';
 import * as vite from 'vite';
-import { findOpenPort } from './core/utils/findOpenPort';
-import { formatDuration } from './core/utils/formatDuration';
-import { createWebExtRunner } from './core/runners/createWebExtRunner';
-import { groupEntrypoints } from './core/utils/groupEntrypoints';
-import { Manifest } from 'webextension-polyfill';
 import { detectDevChanges } from './core/utils/detectDevChanges';
 import { Mutex } from 'async-mutex';
 import { consola } from 'consola';
 import { relative } from 'node:path';
+import { getEntrypointOutputFile } from './core/utils/entrypoints';
+import { buildInternal, rebuild } from './core/build';
 import {
-  getEntrypointBundlePath,
-  getEntrypointOutputFile,
-} from './core/utils/entrypoints';
+  getServerInfo,
+  reloadContentScripts,
+  reloadHtmlPages,
+  setupServer,
+} from './core/server';

 export { version } from '../package.json';
 export * from './core/types/external';
@@ -44,38 +31,40 @@ export async function build(config: InlineConfig): Promise<BuildOutput> {
 export async function createServer(
  config?: InlineConfig,
 ): Promise<WxtDevServer> {
-  const port = await findOpenPort(3000, 3010);
-  const hostname = 'localhost';
-  const origin = `http://${hostname}:${port}`;
-  const serverConfig: vite.InlineConfig = {
-    server: {
-      origin,
-    },
+  const serverInfo = await getServerInfo();
+
+  const getLatestInternalConfig = () => {
+    const viteConfig: vite.InlineConfig = vite.mergeConfig(
+      serverInfo.viteServerConfig,
+      config?.vite ?? {},
+    );
+    return getInternalConfig({ ...config, vite: viteConfig }, 'serve');
  };
-  let internalConfig = await getInternalConfig(
-    vite.mergeConfig(serverConfig, config ?? {}),
-    'serve',
-  );
-  const runner = createWebExtRunner();
+
+  let internalConfig = await getLatestInternalConfig();
+  const server = await setupServer(serverInfo, internalConfig);
+  internalConfig.server = server;

-  let hasBuiltOnce = false;
-  let currentOutput: BuildOutput | undefined;
  const fileChangedMutex = new Mutex();
  const changeQueue: Array<[string, string]> = [];

-  const viteServer = await vite.createServer(internalConfig.vite);
-  viteServer.watcher.on('all', async (event, path, stats) => {
-    if (!hasBuiltOnce || path.startsWith(internalConfig.outBaseDir)) return;
+  server.ws.on('wxt:background-initialized', () => {
+    // Register content scripts for the first time since they're not listed in the manifest
+    reloadContentScripts(server.currentOutput.steps, internalConfig, server);
+  });
+
+  server.watcher.on('all', async (event, path, _stats) => {
+    if (path.startsWith(internalConfig.outBaseDir)) return;
    changeQueue.push([event, path]);

    await fileChangedMutex.runExclusive(async () => {
      const fileChanges = changeQueue.splice(0, changeQueue.length);
-      const changes = detectDevChanges(fileChanges, currentOutput);
+      const changes = detectDevChanges(fileChanges, server.currentOutput);

      if (changes.type === 'no-change') return;

      // Log the entrypoints that were effected
-      consola.info(
+      internalConfig.logger.info(
        `Changed: ${Array.from(new Set(fileChanges.map((change) => change[1])))
          .map((file) => pc.dim(relative(internalConfig.root, file)))
          .join(', ')}`,
@@ -90,10 +79,7 @@ export async function createServer(
        .join(pc.dim(', '));

      // Get latest config and Rebuild groups with changes
-      internalConfig = await getInternalConfig(
-        vite.mergeConfig(serverConfig, config ?? {}),
-        'serve',
-      );
+      internalConfig = await getLatestInternalConfig();
      internalConfig.server = server;
      const { output: newOutput } = await rebuild(
        internalConfig,
@@ -101,119 +87,23 @@ export async function createServer(
        changes.rebuildGroups,
        changes.cachedOutput,
      );
-      currentOutput = newOutput;
+      server.currentOutput = newOutput;

      // Perform reloads
      switch (changes.type) {
        case 'extension-reload':
          server.reloadExtension();
-          consola.success(`Reloaded extension: ${rebuiltNames}`);
          break;
        case 'html-reload':
-          changes.rebuildGroups.flat().forEach((entry) => {
-            const path = getEntrypointBundlePath(
-              entry,
-              internalConfig.outDir,
-              '.html',
-            );
-            server.reloadPage(path);
-          });
-          consola.success(`Reloaded pages: ${rebuiltNames}`);
+          reloadHtmlPages(changes.rebuildGroups, server, internalConfig);
+          break;
+        case 'content-script-reload':
+          reloadContentScripts(changes.changedSteps, internalConfig, server);
          break;
      }
+      consola.success(`Reloaded: ${rebuiltNames}`);
    });
  });
-  const server: WxtDevServer = {
-    ...viteServer,
-    async listen(port, isRestart) {
-      const res = await viteServer.listen(port, isRestart);
-
-      if (!isRestart) {
-        internalConfig.logger.success(`Started dev server @ ${origin}`);
-
-        internalConfig.logger.info('Opening browser...');
-        await runner.openBrowser(internalConfig);
-        internalConfig.logger.success('Opened!');
-      }
-
-      return res;
-    },
-    port,
-    hostname,
-    origin,
-    reloadExtension: () => {
-      server.ws.send('wxt:reload-extension');
-    },
-    reloadPage: (path) => {
-      // Can't use Vite's built-in "full-reload" event because it doesn't like our paths, it expects
-      // paths ending in "/index.html"
-      server.ws.send('wxt:reload-page', path);
-    },
-  };
-  internalConfig.logger.info('Created dev server');
-
-  internalConfig.server = server;
-  currentOutput = await buildInternal(internalConfig);
-  hasBuiltOnce = true;

  return server;
 }
-
-async function buildInternal(config: InternalConfig): Promise<BuildOutput> {
-  const verb = config.command === 'serve' ? 'Pre-rendering' : 'Building';
-  const target = `${config.browser}-mv${config.manifestVersion}`;
-  config.logger.info(
-    `${verb} ${pc.cyan(target)} for ${pc.cyan(config.mode)} with ${pc.green(
-      `Vite ${vite.version}`,
-    )}`,
-  );
-  const startTime = Date.now();
-
-  // Cleanup
-  await fs.rm(config.outDir, { recursive: true, force: true });
-  await fs.ensureDir(config.outDir);
-
-  const entrypoints = await findEntrypoints(config);
-  const groups = groupEntrypoints(entrypoints);
-  const { output } = await rebuild(config, groups);
-
-  // Post-build
-  config.logger.success(
-    `Built extension in ${formatDuration(Date.now() - startTime)}`,
-  );
-  await printBuildSummary(output, config);
-
-  return output;
-}
-
-export async function rebuild(
-  config: InternalConfig,
-  entrypointGroups: EntrypointGroup[],
-  existingOutput: Omit<BuildOutput, 'manifest'> = {
-    steps: [],
-    publicAssets: [],
-  },
-): Promise<{ output: BuildOutput; manifest: Manifest.WebExtensionManifest }> {
-  // Build
-  const allEntrypoints = await findEntrypoints(config);
-  await generateTypesDir(allEntrypoints, config);
-  const buildOutput = await buildEntrypoints(entrypointGroups, config);
-
-  const manifest = await generateMainfest(allEntrypoints, buildOutput, config);
-  const output: BuildOutput = {
-    manifest,
-    ...buildOutput,
-  };
-
-  // Write manifest
-  await writeManifest(manifest, output, config);
-
-  return {
-    output: {
-      manifest,
-      steps: [...existingOutput.steps, ...output.steps],
-      publicAssets: [...existingOutput.publicAssets, ...output.publicAssets],
-    },
-    manifest,
-  };
-}
@@ -6,11 +6,15 @@ import {
  BackgroundEntrypoint,
  ContentScriptEntrypoint,
  GenericEntrypoint,
+  OptionsEntrypoint,
+  PopupEntrypoint,
 } from '..';
 import { faker } from '@faker-js/faker';
 import merge from 'lodash.merge';
 import { Rollup } from 'vite';
 import { Manifest } from 'webextension-polyfill';
+import { FsCache, InternalConfig, WxtDevServer } from '../core/types';
+import { mock } from 'vitest-mock-extended';

 faker.seed(__TEST_SEED__);

@@ -75,6 +79,63 @@ export const fakeUnlistedScriptEntrypoint =
    outputDir: fakeDir('.output'),
  }));

+export const fakeOptionsEntrypoint = fakeObjectCreator<OptionsEntrypoint>(
+  () => ({
+    type: 'options',
+    inputPath: fakeFile('src'),
+    name: faker.string.alpha(),
+    outputDir: fakeDir('.output'),
+    options: {
+      browserStyle: faker.helpers.arrayElement([true, false, undefined]),
+      chromeStyle: faker.helpers.arrayElement([true, false, undefined]),
+      openInTab: faker.helpers.arrayElement([true, false, undefined]),
+    },
+  }),
+);
+
+export const fakePopupEntrypoint = fakeObjectCreator<PopupEntrypoint>(() => ({
+  type: 'popup',
+  inputPath: fakeFile('src'),
+  name: faker.string.alpha(),
+  outputDir: fakeDir('.output'),
+  options: {
+    defaultTitle: faker.helpers.arrayElement([
+      faker.person.fullName(),
+      undefined,
+    ]),
+    defaultIcon: faker.helpers.arrayElement([
+      {
+        '16': 'icon/16.png',
+        '24': 'icon/24.png',
+        '64': 'icon/64.png',
+      },
+    ]),
+    mv2Key: faker.helpers.arrayElement([
+      'browser_action',
+      'page_action',
+      undefined,
+    ]),
+  },
+}));
+
+export const fakeGenericEntrypoint = fakeObjectCreator<GenericEntrypoint>(
+  () => ({
+    type: faker.helpers.arrayElement([
+      'sandbox',
+      'bookmarks',
+      'history',
+      'newtab',
+      'sidepanel',
+      'devtools',
+      'unlisted-page',
+      'unlisted-script',
+    ]),
+    inputPath: fakeFile('src'),
+    name: faker.string.alpha(),
+    outputDir: fakeDir('.output'),
+  }),
+);
+
 export const fakeRollupOutputChunk = fakeObjectCreator<Rollup.OutputChunk>(
  () => ({
    type: 'chunk',
@@ -133,3 +194,28 @@ export function fakeArray<T>(createItem: () => T, count = 3): T[] {
  }
  return array;
 }
+
+export const fakeInternalConfig = fakeObjectCreator<InternalConfig>(() => ({
+  browser: faker.helpers.arrayElement(['chrome', 'firefox']),
+  command: faker.helpers.arrayElement(['build', 'serve']),
+  entrypointsDir: fakeDir(),
+  fsCache: mock<FsCache>(),
+  imports: {},
+  logger: mock(),
+  manifest: fakeManifest(),
+  manifestVersion: faker.helpers.arrayElement([2, 3]),
+  mode: faker.helpers.arrayElement(['development', 'production']),
+  outBaseDir: fakeDir(),
+  outDir: fakeDir(),
+  publicDir: fakeDir(),
+  root: fakeDir(),
+  runnerConfig: {
+    config: {},
+  },
+  srcDir: fakeDir(),
+  storeIds: {},
+  typesDir: fakeDir(),
+  vite: {},
+  wxtDir: fakeDir(),
+  server: mock<WxtDevServer>(),
+}));
@@ -0,0 +1,5 @@
+# WXT Templates
+
+To add or change a template, open the template's folder (`template/<name>`) in your editor directly. Then, it's a normal NPM project.
+
+Note that you should use `npm` instead of `pnpm` in the template directories so that it doesn't complict with the repo's PNPM workspace. Templates are standalone and should not depend on the local state of `wxt`.
@@ -0,0 +1,7 @@
+# WXT + Vue 3
+
+This template should help get you started developing with Vue 3 in WXT.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+artifacts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -0,0 +1,3 @@
+export default defineBackground(() => {
+  console.log('Hello background!', { id: browser.runtime.id });
+});
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import reactLogo from '../../assets/react.svg';
+import wxtLogo from '/wxt.svg';
+import './App.css';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://wxt.dev" target="_blank">
+          <img src={wxtLogo} className="logo" alt="WXT logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>WXT + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the WXT and React logos to learn more
+      </p>
+    </>
+  );
+}
+
+export default App;
@@ -0,0 +1,69 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Popup Title</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
@@ -0,0 +1,26 @@
+{
+  "name": "wxt-starter",
+  "description": "manifest.json description",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "wxt",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build -b firefox",
+    "compile": "tsc --noEmit",
+    "postinstall": "wxt prepare"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@vitejs/plugin-react": "^4.0.3",
+    "typescript": "^5.1.6",
+    "wxt": "^0.1.3"
+  }
+}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -0,0 +1,7 @@
+{
+  "extends": "./.wxt/tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx"
+  }
+}
@@ -0,0 +1,9 @@
+import { defineConfig } from 'wxt';
+import react from '@vitejs/plugin-react';
+
+// See https://wxt.dev/config.html
+export default defineConfig({
+  vite: {
+    plugins: [react()],
+  },
+});
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
@@ -0,0 +1,7 @@
+# Svelte + Vite
+
+This template should help get you started developing with Svelte in WXT.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+artifacts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,23 @@
+{
+  "name": "wxt-starter",
+  "description": "manifest.json description",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "wxt",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build -b firefox",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "postinstall": "wxt prepare"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@tsconfig/svelte": "^5.0.0",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.6",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6",
+    "wxt": "^0.1.5"
+  }
+}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
@@ -0,0 +1,3 @@
+export default defineBackground(() => {
+  console.log('Hello background!', { id: browser.runtime.id });
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
GitHub Actions	eedb136e13	chore(release): v0.2.3	2023-07-16 17:05:39 +00:00
Aaron	c71b5e12f2	fix: Some fields cannot be overridden from `config.manifest` (#46 )	2023-07-16 12:03:14 -05:00
Aaron Klinker	495c5c8e4c	fix: Read boolean maniest options from meta tags correctly	2023-07-16 11:29:34 -05:00
Aaron Klinker	63c4359d83	Fix changelog	2023-07-16 11:17:33 -05:00
Aaron	efc3230674	fix: Correctly lookup open port (#45 )	2023-07-16 11:14:50 -05:00
GitHub Actions	69e840b984	chore(release): v0.2.2	2023-07-16 15:47:47 +00:00
Aaron Klinker	2fb5a542d3	fix: Register content scripts correctly	2023-07-16 10:37:42 -05:00
GitHub Actions	84657e035a	chore(release): v0.2.1	2023-07-16 15:14:44 +00:00
Aaron Klinker	6f5bf89645	feat: Support all content script options	2023-07-16 10:10:25 -05:00
Aaron Klinker	90fa6bfc40	fix: Remove HMR log It was causing too many logs during development.	2023-07-15 14:11:22 -05:00
GitHub Actions	992452cdae	chore(release): v0.2.0	2023-07-15 18:52:37 +00:00
Aaron Klinker	5c7e041f7f	chore: Don't format lockfile	2023-07-15 13:50:05 -05:00
Aaron Klinker	3db5cec2ca	feat: Recongize unnamed content scripts (`content.ts` and `content/index.ts`)	2023-07-15 13:48:56 -05:00
Aaron Klinker	375a2a6640	docs: Add inline JSDoc for public types	2023-07-14 22:41:46 -05:00
Aaron Klinker	77cbfc1985	docs: Add docs for each type of entrypoint	2023-07-14 22:28:08 -05:00
Aaron Klinker	5b48ae99f4	feat!: Rename `defineBackgroundScript` to `defineBackground` BREAKING CHANGE: Rename `defineBackgroundScript` to `defineBackground`. Update your background entrypoints	2023-07-14 20:03:12 -05:00
Aaron Klinker	c1ea9ba4a3	chore: Run `wxt prepare` on `postinstall`	2023-07-14 15:50:50 -05:00
Aaron Klinker	f28a29e118	docs: Update templates	2023-07-14 15:46:11 -05:00
GitHub Actions	6f5fa9f51c	chore(release): v0.1.6	2023-07-14 14:42:45 +00:00
Aaron Klinker	977246f9ed	fix: Add logs when a hot reload happens	2023-07-14 09:39:40 -05:00
Aaron	602dd42e5c	chore: Svelte template (#34 )	2023-07-14 09:20:49 -05:00
Aaron Klinker	ea92a2743b	fix: Resolve tsconfig paths in vite	2023-07-14 08:35:48 -05:00
Aaron	2daa4d6900	chore: React and Vue starter templates (#33 )	2023-07-13 18:50:07 -05:00
GitHub Actions	b5a9d8082d	chore(release): v0.1.5	2023-07-13 22:53:25 +00:00
Aaron Klinker	371be99770	fix: Include `vite/client` types	2023-07-13 17:36:52 -05:00
GitHub Actions	09928e8a15	chore(release): v0.1.4	2023-07-13 21:46:50 +00:00
Aaron Klinker	0a26673172	docs: Update CLI screenshot	2023-07-13 16:40:06 -05:00
Aaron Klinker	68611ae944	chore: Update prettier ignore	2023-07-13 16:37:15 -05:00
Aaron Klinker	49965e7786	fix: Fix config hook implementations for vite plugins Turns out the returned config is merged with the user config, so we don't have to do that ourselves.	2023-07-13 16:36:39 -05:00
Aaron Klinker	fa2b6566d8	fix: Fix regression where manifest was not listed first in build summary	2023-07-13 16:09:23 -05:00
Aaron	2d1c41eff1	Fix broken link in README.md	2023-07-11 17:59:01 -05:00
GitHub Actions	10fba3de49	chore(release): v0.1.3	2023-07-11 22:54:00 +00:00
Aaron	aa16014650	feat: Add tsconfig path aliases (#32 )	2023-07-11 17:39:13 -05:00
Aaron Klinker	0ce7c9d183	chore: Upgrade to pnpm 8	2023-07-11 17:35:45 -05:00
Aaron Klinker	ac0b28e608	fix: Cleanup build summary with sourcemaps	2023-07-11 17:18:22 -05:00
Aaron	80fed4a451	docs: Create documentation site (#31 )	2023-07-11 14:22:47 -05:00
Aaron Klinker	05ca9985d5	fix: Merge `manifest` option from both inline and user config	2023-07-11 10:24:55 -05:00
GitHub Actions	145038c6a2	chore(release): v0.1.2	2023-07-11 14:45:39 +00:00
Aaron Klinker	6e7184d98d	fix: Generate valid type for `EntrypointPath` when there are no entrypoints	2023-07-11 09:42:08 -05:00
Aaron Klinker	ee49837804	feat: Accept a function for `config.manifest`	2023-07-11 09:41:43 -05:00
Aaron Klinker	67f972eab8	Remove milestone warning from README	2023-07-10 23:19:27 -05:00
Aaron Klinker	b29c3c6fdd	fix: Only add imports to JS files	2023-07-10 23:19:13 -05:00
Aaron Klinker	ef6001e0c0	types: Change `config.vite` to `UserConfig`	2023-07-10 23:00:30 -05:00
Aaron Klinker	636aa48e95	fix: Add missing types for `webextension-polyfill` and the `manifest` option	2023-07-10 22:55:40 -05:00
Aaron Klinker	ec66b6172c	Update changelog after release	2023-07-10 22:22:31 -05:00
GitHub Actions	1edd94e8f4	chore(release): v0.1.1	2023-07-11 03:21:27 +00:00
Aaron	2efc193b45	fix: Unable to read entrypoint options (#28 )	2023-07-10 22:18:20 -05:00
Aaron Klinker	2e51e7349d	fix: Allow dashes in entrypoint names	2023-07-10 22:16:08 -05:00
Aaron Klinker	28733df5f9	chore: Update changelog after release	2023-07-10 18:34:55 -05:00
GitHub Actions	0110a2bd4e	chore(release): v0.1.0	2023-07-10 23:24:09 +00:00
Aaron Klinker	afe838a348	feat!: Initial release	2023-07-10 18:21:01 -05:00
Aaron Klinker	0255028ce2	docs: Update feature list	2023-07-10 18:03:27 -05:00
Aaron	249aa5eccc	feat: Content scripts reloading (#25 )	2023-07-10 17:47:52 -05:00
Aaron Klinker	b7c078f4e4	ci: Create github release	2023-07-03 17:43:10 -05:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>