chore(release): v0.3.0

feat: Windows support (#50 )
fix: Add WebWorker lib to generated tsconfig
2023-07-21 03:59:08 +00:00 · 2023-07-20 22:54:30 -05:00 · 2023-07-20 22:34:16 -05:00 · 2023-07-20 22:31:39 -05:00 · 2023-07-20 15:47:38 -05:00 · 2023-07-20 14:13:52 -05:00
139 changed files with 4290 additions and 4113 deletions
@@ -7,7 +7,7 @@ jobs:
    uses: './.github/workflows/validate.yml'

  publish:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
    needs:
      - validate
    steps:
@@ -31,7 +31,7 @@ jobs:
        run: |
          pnpm install --ignore-scripts
          pnpm build
-          pnpm install
+          pnpm install --ignore-scripts

      - name: Bump and Tag
        run: |
@@ -7,8 +7,13 @@ on:
      - main

 jobs:
-  validate:
-    runs-on: ubuntu-20.04
+  wxt:
+    name: WXT
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
    steps:
      - name: Checkout
        uses: actions/checkout@v3
@@ -28,7 +33,8 @@ jobs:
        run: |
          pnpm install --ignore-scripts
          pnpm build
-          pnpm install
+          pnpm install --ignore-scripts
+          cd demo && pnpm wxt prepare

      - name: Formatting
        run: pnpm format:check
@@ -42,7 +48,55 @@ jobs:
          pnpm build:all:chrome-mv3
          pnpm build:all:firefox-mv2
          pnpm build:all:firefox-mv3
+          pnpm compile
+          pnpm zip
        working-directory: demo

      - name: Tests
-        run: pnpm test:coverage
+        run: pnpm test:coverage --reporter=default --reporter=hanging-process
+
+  project-templates:
+    name: Project Templates
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Validate Vanilla
+        working-directory: templates/vanilla
+        run: |
+          npm i
+          npm run build
+          npm run compile
+
+      - name: Validate Vue
+        working-directory: templates/vue
+        run: |
+          npm i
+          npm run build
+          npm run compile
+
+      - name: Validate React
+        working-directory: templates/react
+        run: |
+          npm i
+          npm run build
+          npm run compile
+
+      - name: Validate Svelte
+        working-directory: templates/svelte
+        run: |
+          npm i
+          npm run build
+          npm run check
@@ -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
@@ -4,3 +4,4 @@ dist
 e2e/project
 .wxt
 docs/.vitepress/cache
+pnpm-lock.yaml
@@ -1,5 +1,180 @@
 # Changelog

+## v0.3.0
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.2.5...v0.3.0)
+
+### 🚀 Enhancements
+
+- ⚠️  Add type safety to `browser.runtime.getURL` ([58a84ec](https://github.com/aklinker1/wxt/commit/58a84ec))
+- ⚠️  Change default `publicDir` to `<rootDir>/public` ([19c0948](https://github.com/aklinker1/wxt/commit/19c0948))
+- Windows support ([#50](https://github.com/aklinker1/wxt/pull/50))
+
+### 🩹 Fixes
+
+- Add `WebWorker` lib to generated tsconfig ([2c70246](https://github.com/aklinker1/wxt/commit/2c70246))
+
+### 📖 Documentation
+
+- Update entrypoint directory links ([0aebb67](https://github.com/aklinker1/wxt/commit/0aebb67))
+
+### 🌊 Types
+
+- Allow any string for the __BROWSER__ global ([6092235](https://github.com/aklinker1/wxt/commit/6092235))
+
+### 🤖 CI
+
+- Improve checks against `demo/` extension ([9cc464f](https://github.com/aklinker1/wxt/commit/9cc464f))
+
+#### ⚠️  Breaking Changes
+
+- ⚠️  Add type safety to `browser.runtime.getURL` ([58a84ec](https://github.com/aklinker1/wxt/commit/58a84ec))
+- ⚠️  Change default `publicDir` to `<rootDir>/public` ([19c0948](https://github.com/aklinker1/wxt/commit/19c0948))
+
+### ❤️  Contributors
+
+- Aaron 
+- Aaron Klinker
+
+## v0.2.5
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.2.4...v0.2.5)
+
+### 🚀 Enhancements
+
+- Auto-import from subdirectories ([547fee0](https://github.com/aklinker1/wxt/commit/547fee0))
+- Include background script in dev mode if user doesn't define one ([ca20a21](https://github.com/aklinker1/wxt/commit/ca20a21))
+
+### 🩹 Fixes
+
+- Don't crash when generating types in dev mode ([d8c1903](https://github.com/aklinker1/wxt/commit/d8c1903))
+- Properly load entrypoints that reference `import.meta` ([54b18cc](https://github.com/aklinker1/wxt/commit/54b18cc))
+
+### 🏡 Chore
+
+- Update templates to wxt@0.2 ([9d00eb2](https://github.com/aklinker1/wxt/commit/9d00eb2))
+
+### 🤖 CI
+
+- Validate project templates ([9ac756f](https://github.com/aklinker1/wxt/commit/9ac756f))
+
+### ❤️ Contributors
+
+- Aaron Klinker
+
+## v0.2.4
+
+[compare changes](https://github.com/aklinker1/wxt/compare/v0.2.3...v0.2.4)
+
+### 🚀 Enhancements
+
+- Add `wxt zip` command ([#47](https://github.com/aklinker1/wxt/pull/47))
+
+### ❤️ Contributors
+
+- Aaron
+
+## 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 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)
@@ -44,7 +219,6 @@

 ### ❤️ Contributors

- Aaron
 - Aaron Klinker

 ## v0.1.2
@@ -1,5 +1,5 @@
 {
-  "name": "Demo",
+  "name": "WXT Demo",
  "version": "1.0.0",
  "description": "Demo extension for WXT",
  "type": "module",
@@ -11,7 +11,9 @@
    "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"
+    "zip": "pnpm -w build && wxt zip",
+    "compile": "pnpm -w build && tsc --noEmit",
+    "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({
@@ -7,4 +7,9 @@ export default defineBackgroundScript(() => {
    firefox: __IS_FIREFOX__,
    manifestVersion: __MANIFEST_VERSION__,
  });
+
+  // @ts-expect-error: should only accept entrypoints or public assets
+  browser.runtime.getURL('/');
+  browser.runtime.getURL('/background.js');
+  browser.runtime.getURL('/icon/128.png');
 });
@@ -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>
@@ -4,18 +4,29 @@ import { defineConfig } from 'vitepress';
 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.md' },
+      { text: 'Guide', link: '/guide/auto-imports.md' },
+      { text: 'Config', link: '/config.md' },
      { text: 'API', link: '/api.md' },
    ],

    sidebar: {
      '/get-started/': [
        {
-          text: 'Guide',
+          text: 'Get Started',
          items: [
            { text: 'Introduction', link: '/get-started/introduction.md' },
            { text: 'Installation', link: '/get-started/installation.md' },
@@ -28,6 +39,32 @@ export default defineConfig({
          ],
        },
      ],
+      '/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);
+  },
+};
@@ -1,4 +1,4 @@
-# Guide
+# Config

 :::warning 🚧&ensp;Under construction
 This documentation does not exist yet.
@@ -2,7 +2,7 @@

 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 to separate output directories:
+Separate build targets are written to their own output directories:

 ```
 <root>
@@ -24,7 +24,7 @@ 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 version used with that browser.
+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 |
 | ---------------- | :----------------------: |
@@ -44,13 +44,19 @@ export default defineConfig({

 ## Vite Config

-Vite is the bundler used to build each part of an extension. Vite can be configured via the `vite` option.
+[Vite](https://vitejs.dev/) is the bundler used to build each entrypoint of your extension. Vite can be configured via the `vite` option.

-### Example
+See [Vite's documentation](https://vitejs.dev/config/) for configuring the bundler.

-A common reason to configure Vite is to add plugins:
+## Frontend Frameworks

-```ts
+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';

@@ -60,3 +66,27 @@ export default defineConfig({
  },
 });
 ```
+
+```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()],
+  },
+});
+```
+
+:::
@@ -1,6 +1,6 @@
 # Defining Entrypoints

-Entrypoints are any HTML, JS, or CSS file that needs to be bundled and included with the extension.
+An entrypoints is 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`.

@@ -46,15 +46,15 @@ would result in the following `manifest.json`:
 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`
+- `content.ts` &rarr; `content_scripts.0.js.0`
 - `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.
+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 considered "unlisted" and are not apart of 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.
+See [`/entrypoints` folder](/guide/background.md) documentation for a full list of recognized entrypoint filenames.
 :::

 ## Entrypoint Options
@@ -85,5 +85,5 @@ export default defineContentScript({
 ```

 :::info
-For a full list of entrypoints and each of their options, see the [`/entrypoints` folder](/get-started/entrypoints.md) documentation.
+For a full list of entrypoints and each of their options, see the [`/entrypoints` folder](/guide/background.md) documentation.
 :::
@@ -4,24 +4,35 @@ Bootstrap a new project or start from scratch.

 ## Bootstrap Project

-:::warning 🚧&ensp;This feature is not implemented yet!
+:::warning 🚧&ensp;The `wxt init` command is not implemented yet.

-See [From Scratch](#from-scratch) instead.
+See [From Scratch](#from-scratch) or reference one of the templates below.

 :::

 :::code-group

 ```sh [pnpm]
-pnpx wxt@latest init <project-name>
+pnpx wxt@latest init
 ```

 ```sh [npm]
-npx wxt@latest init <project-name>
+npx wxt@latest init
 ```

 :::

+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:
@@ -29,19 +40,22 @@ Create a new NPM project:
 :::code-group

 ```sh [pnpm]
-pnpm init <project-name>
-cd <project-name>
+mkdir project-name
+cd project-name
+pnpm init
 echo 'shamefully-hoist=true' >> .npmrc
 ```

 ```sh [npm]
-npm init <project-name>
-cd <project-name>
+mkdir project-name
+cd project-name
+npm init
 ```

 ```sh [yarn]
-yarn init <project-name>
-cd <project-name>
+mkdir project-name
+cd project-name
+yarn init
 ```

 :::
@@ -64,22 +78,40 @@ yarn add wxt

 :::

-Finally, add `package.json` scripts:
+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",
-    "dev:firefox": "wxt --browser firefox",
-    "build": "wxt build",
-    "build:firefox": "wxt build --browser firefox"
+    "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
+
+## 🚧 WSL Support
+
+**_WXT does not support [Windows Subsystem for Linux](https://learn.microsoft.com/en-us/windows/wsl/) yet_**. See [Issue #55](https://github.com/aklinker1/wxt/issues/55) to track progress.
+
+In the meantime, you can use `cmd` instead.
+
 ## Development

-Once you've installed WXT, you can start the development server using the `dev` command:
+Once you've installed WXT, you can start the development server using the `dev` script.

 ```sh
 pnpm dev
@@ -92,7 +124,7 @@ The dev command will build the extension for development, open the browser, and

 ## Next Steps

-Now that your WXT project is setup, you're ready to build a out your web extension!
+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,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 `wxt/browser`, a small wrapper around `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,62 @@
+# 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`.
+
+When defining multiple content scripts, content script entrypoints that have the same set of options will be merged into a single `content_script` item in the manifest.
+
+## 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
+```
@@ -38,12 +38,12 @@ features:
    title: Bundle Remote Code
    details: Downloads and bundles remote code imported from URLs.
  - icon: 🎨
-    title: Frontend framework agnostic
+    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
+    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',
@@ -21,10 +21,17 @@ describe('Auto Imports', () => {
        ".wxt/types/paths.d.ts
        ----------------------------------------
        // Generated by wxt
-        type EntrypointPath =
-          | \\"/background.js\\"
-          | \\"/content-scripts/overlay.js\\"
-          | \\"/popup.html\\"
+        import \\"wxt/browser\\";
+
+        declare module \\"wxt/browser\\" {
+          type PublicPath =
+            | \\"/background.js\\"
+            | \\"/content-scripts/overlay.js\\"
+            | \\"/popup.html\\"
+          export interface ProjectRuntime extends Runtime.Static {
+            getURL(path: PublicPath): string;
+          }
+        }
        "
      `);
  });
@@ -37,18 +44,18 @@ describe('Auto Imports', () => {

    expect(await project.serializeFile('.wxt/types/imports.d.ts'))
      .toMatchInlineSnapshot(`
-      ".wxt/types/imports.d.ts
-      ----------------------------------------
-      // Generated by wxt
-      export {}
-      declare global {
-        const browser: typeof import('webextension-polyfill')
-        const defineBackgroundScript: typeof import('wxt/client')['defineBackgroundScript']
-        const defineConfig: typeof import('wxt')['defineConfig']
-        const defineContentScript: typeof import('wxt/client')['defineContentScript']
-        const mountContentScriptUi: typeof import('wxt/client')['mountContentScriptUi']
-      }
-      "
-    `);
+        ".wxt/types/imports.d.ts
+        ----------------------------------------
+        // Generated by wxt
+        export {}
+        declare global {
+          const browser: typeof import('wxt/browser')['browser']
+          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,7 @@ 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\\"]}]}"
    `);
  });

@@ -90,7 +90,7 @@ 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\\":[\\"*://*/*\\"],\\"js\\":[\\"content-scripts/overlay-one.js\\"]}]}"
+      {\\"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,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\\"}}"
    `);
  });

@@ -80,7 +80,7 @@ describe('User Config', () => {
    expect(output).toMatchInlineSnapshot(`
      ".output/chrome-mv3/manifest.json
      ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"example_customization\\":[\\"production\\",\\"chrome\\",\\"3\\",\\"build\\"]}"
+      {\\"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\\"]}"
    `);
  });
 });
@@ -3,6 +3,7 @@ import fs from 'fs-extra';
 import glob from 'fast-glob';
 import { execSync } from 'child_process';
 import { InlineConfig, UserConfig, build } from '../src';
+import { normalizePath } from '../src/core/utils/paths';

 export class TestProject {
  files: Array<[string, string]> = [];
@@ -113,7 +114,7 @@ export class TestProject {
  async serializeFile(path: string): Promise<string> {
    const absolutePath = resolve(this.root, path);
    return [
-      relative(this.root, absolutePath),
+      normalizePath(relative(this.root, absolutePath)),
      await fs.readFile(absolutePath),
    ].join(`\n${''.padEnd(40, '-')}\n`);
  }
@@ -1,7 +1,7 @@
 {
  "name": "wxt",
  "type": "module",
-  "version": "0.1.4",
+  "version": "0.3.0",
  "description": "Next gen framework for developing web extensions",
  "engines": {
    "node": ">=18.16.0",
@@ -39,9 +39,12 @@
      "types": "./dist/index.d.ts"
    },
    "./client": {
-      "require": "./dist/client.cjs",
      "import": "./dist/client.js",
      "types": "./dist/client.d.ts"
+    },
+    "./browser": {
+      "import": "./dist/browser.js",
+      "types": "./dist/browser.d.ts"
    }
  },
  "scripts": {
@@ -69,15 +72,19 @@
    "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",
+    "minimatch": "^9.0.3",
    "picocolors": "^1.0.0",
    "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"
+    "webextension-polyfill": "^0.10.0",
+    "zip-dir": "^2.0.0"
  },
  "devDependencies": {
    "@faker-js/faker": "^8.0.2",
@@ -118,4 +125,4 @@
      ]
    }
  }
-}
+}
@@ -1,7 +1,6 @@
 import tsup from 'tsup';
 import glob from 'fast-glob';
-import pc from 'picocolors';
-import path from 'path';
+import { printFileList } from '../src/core/log/printFileList';
 import { formatDuration } from '../src/core/utils/formatDuration';
 import ora from 'ora';
 import fs from 'fs-extra';
@@ -38,6 +37,13 @@ await Promise.all([
    dts: true,
    silent: true,
  }),
+  tsup.build({
+    entry: { browser: 'src/client/browser.ts' },
+    format: ['esm'],
+    sourcemap: 'inline',
+    dts: true,
+    silent: true,
+  }),
  ...virtualEntrypoints.map((entryName) =>
    tsup.build({
      entry: {
@@ -73,18 +79,6 @@ await Promise.all([
 spinner.succeed();

 const duration = Date.now() - startTime;
-const outFiles = await glob(`${outDir}/**`);
-outFiles.forEach((file, i) => {
-  const color = file.endsWith('.map')
-    ? pc.dim
-    : file.endsWith('.d.ts')
-    ? pc.blue
-    : pc.cyan;
-  const prefix = i === outFiles.length - 1 ? '  └─' : '  ├─';
-  console.log(
-    `${pc.gray(prefix)} ${pc.dim(outDir + path.sep)}${color(
-      path.relative(outDir, file),
-    )}`,
-  );
-});
+const outFiles = await glob(`${outDir}/**`, { absolute: true });
+await printFileList(consola.log, outDir, outFiles);
 consola.success(`Finished in ${formatDuration(duration)}`);
@@ -0,0 +1,16 @@
+declare module 'zip-dir' {
+  // Represents the options object for zipdir function
+  interface ZipDirOptions {
+    saveTo?: string;
+    filter?: (path: string, stat: import('fs').Stats) => boolean;
+    each?: (path: string) => void;
+  }
+
+  function zipdir(
+    dirPath: string,
+    options?: ZipDirOptions,
+    callback?: (error: Error | null, buffer: Buffer) => void,
+  ): Promise<Buffer>;
+
+  export = zipdir;
+}
@@ -3,3 +3,4 @@ export * from './dev';
 export * from './init';
 export * from './prepare';
 export * from './publish';
+export * from './zip';
@@ -0,0 +1,31 @@
+import * as wxt from '../..';
+import { buildInternal } from '../../core/build';
+import { getInternalConfig } from '../../core/utils/getInternalConfig';
+import { zipExtension } from '../../core/zip';
+import { defineCommand } from '../utils/defineCommand';
+
+export const zip = defineCommand<
+  [
+    root: string | undefined,
+    flags: {
+      mode?: string;
+      config?: string;
+      browser?: wxt.TargetBrowser;
+      mv3?: boolean;
+      mv2?: boolean;
+    },
+  ]
+>(async (root, flags) => {
+  const mode = flags.mode ?? 'production';
+  const cliConfig: wxt.InlineConfig = {
+    root,
+    mode,
+    browser: flags.browser,
+    manifestVersion: flags.mv3 ? 3 : flags.mv2 ? 2 : undefined,
+    configFile: flags.config,
+  };
+
+  const config = await getInternalConfig(cliConfig, 'build');
+  const output = await buildInternal(config);
+  await zipExtension(config, output);
+});
@@ -28,6 +28,16 @@ cli
  .option('--mv2', 'target manifest v2')
  .action(commands.build);

+// ZIP
+cli
+  .command('zip [root]', 'build for production and zip output')
+  .option('-c, --config <file>', 'use specified config file')
+  .option('-m, --mode <mode>', 'set env mode')
+  .option('-b, --browser <browser>', 'specify a browser')
+  .option('--mv3', 'target manifest v3')
+  .option('--mv2', 'target manifest v2')
+  .action(commands.zip);
+
 // PREPARE
 cli
  .command('prepare [root]', 'prepare')
@@ -0,0 +1,11 @@
+import originalBrowser, { Browser, Runtime } from 'webextension-polyfill';
+
+export interface AugmentedBrowser extends Browser {
+  runtime: ProjectRuntime;
+}
+
+export interface ProjectRuntime extends Runtime.Static {
+  // Overriden per-project
+}
+
+export const browser: AugmentedBrowser = originalBrowser;
@@ -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';
@@ -39,7 +39,7 @@ export async function buildInternal(

  const entrypoints = await findEntrypoints(config);
  const groups = groupEntrypoints(entrypoints);
-  const { output } = await rebuild(config, groups);
+  const { output } = await rebuild(config, groups, undefined);

  // Post-build
  config.logger.success(
@@ -70,7 +70,11 @@ export async function rebuild(
 ): Promise<{ output: BuildOutput; manifest: Manifest.WebExtensionManifest }> {
  // Update types directory with new files and types
  const allEntrypoints = await findEntrypoints(config);
-  await generateTypesDir(allEntrypoints, config);
+  await generateTypesDir(allEntrypoints, config).catch((err) => {
+    config.logger.warn('Failed to update .wxt directory:', err);
+    // Throw the error if doing a regular build, don't for dev mode.
+    if (config.command === 'build') throw err;
+  });

  // Build and merge the outputs
  const newOutput = await buildEntrypoints(entrypointGroups, config);
@@ -12,6 +12,7 @@ import fs from 'fs-extra';
 import { importTsFile } from '../../utils/importTsFile';
 import glob from 'fast-glob';
 import { fakeInternalConfig } from '../../../testing/fake-objects';
+import { unnormalizePath } from '../../utils/paths';

 vi.mock('../../utils/importTsFile');
 const importTsFileMock = vi.mocked(importTsFile);
@@ -29,6 +30,7 @@ describe('findEntrypoints', () => {
    root: '/',
    entrypointsDir: resolve('/src/entrypoints'),
    outDir: resolve('.output'),
+    command: 'build',
  });

  it.each<[string, string, PopupEntrypoint]>([
@@ -137,6 +139,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',
      {
@@ -146,6 +157,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',
      {
@@ -192,10 +212,10 @@ describe('findEntrypoints', () => {
      },
    ],
  ])(
-    'should find and load content script entrypoint config from %s',
+    'should find and load background entrypoint config from %s',
    async (path, expected) => {
-      const options: ContentScriptEntrypoint['options'] = {
-        matches: ['<all_urls>'],
+      const options: BackgroundEntrypoint['options'] = {
+        type: 'module',
      };
      globMock.mockResolvedValueOnce([path]);
      importTsFileMock.mockResolvedValue(options);
@@ -208,6 +228,24 @@ describe('findEntrypoints', () => {
    },
  );

+  it("should include a virtual background script so dev reloading works when there isn't a background entrypoint defined by the user", async () => {
+    globMock.mockResolvedValueOnce([]);
+
+    const entrypoints = await findEntrypoints({
+      ...config,
+      command: 'serve',
+    });
+
+    expect(entrypoints).toHaveLength(1);
+    expect(entrypoints[0]).toEqual({
+      type: 'background',
+      inputPath: 'virtual:user-background',
+      name: 'background',
+      options: {},
+      outputDir: config.outDir,
+    });
+  });
+
  it.each<[string, GenericEntrypoint]>([
    // Sandbox
    [
@@ -406,9 +444,14 @@ describe('findEntrypoints', () => {

  it('should not allow multiple entrypoints with the same name', async () => {
    globMock.mockResolvedValueOnce(['popup.html', 'popup/index.html']);
+    const expectedPaths = [
+      'src/entrypoints/popup.html',
+      'src/entrypoints/popup/index.html',
+    ].map(unnormalizePath);

    await expect(() => findEntrypoints(config)).rejects.toThrowError(
-      'Multiple entrypoints with the name "popup" detected, but only one is allowed: src/entrypoints/popup.html, src/entrypoints/popup/index.html',
+      'Multiple entrypoints with the name "popup" detected, but only one is allowed: ' +
+        expectedPaths.join(', '),
    );
  });
 });
@@ -9,9 +9,9 @@ import {
 import * as plugins from '../vite-plugins';
 import { removeEmptyDirs } from '../utils/removeEmptyDirs';
 import { getEntrypointBundlePath } from '../utils/entrypoints';
-import glob from 'fast-glob';
 import fs from 'fs-extra';
 import { dirname, resolve } from 'path';
+import { getPublicFiles } from '../utils/public';

 export async function buildEntrypoints(
  groups: EntrypointGroup[],
@@ -132,11 +132,10 @@ function getBuildOutputChunks(
 async function copyPublicDirectory(
  config: InternalConfig,
 ): Promise<BuildOutput['publicAssets']> {
+  const files = await getPublicFiles(config);
+  if (files.length === 0) return [];
+
  const publicAssets: BuildOutput['publicAssets'] = [];
-  if (!(await fs.exists(config.publicDir))) return publicAssets;
-
-  const files = await glob('**/*', { cwd: config.publicDir });
-
  for (const file of files) {
    const srcPath = resolve(config.publicDir, file);
    const outPath = resolve(config.outDir, file);
@@ -16,9 +16,10 @@ import JSON5 from 'json5';
 import { importTsFile } from '../utils/importTsFile';
 import glob from 'fast-glob';
 import { getEntrypointName } from '../utils/entrypoints';
+import { VIRTUAL_NOOP_BACKGROUND_MODULE_ID } from '../vite-plugins/noopBackground';

 /**
- * Return entrypoints and their configuration by looking through the
+ * Return entrypoints and their configuration by looking through the project's files.
 */
 export async function findEntrypoints(
  config: InternalConfig,
@@ -33,6 +34,7 @@ export async function findEntrypoints(
  const existingNames: Record<string, Entrypoint | undefined> = {};

  const entrypoints: Entrypoint[] = [];
+  let hasBackground = false;
  await Promise.all(
    relativePaths.map(async (relativePath) => {
      const path = resolve(config.entrypointsDir, relativePath);
@@ -63,11 +65,12 @@ export async function findEntrypoints(
          break;
        case 'background':
          entrypoint = await getBackgroundEntrypoint(config, path);
+          hasBackground = true;
          break;
        case 'content-script':
          entrypoint = await getContentScriptEntrypoint(
            config,
-            relativePath.split('.', 2)[0],
+            getEntrypointName(config.entrypointsDir, path),
            path,
          );
          break;
@@ -95,6 +98,11 @@ export async function findEntrypoints(
      existingNames[entrypoint.name] = entrypoint;
    }),
  );
+  if (config.command === 'serve' && !hasBackground) {
+    entrypoints.push(
+      await getBackgroundEntrypoint(config, VIRTUAL_NOOP_BACKGROUND_MODULE_ID),
+    );
+  }
  return entrypoints;
 }

@@ -162,21 +170,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 {
@@ -195,10 +203,17 @@ async function getBackgroundEntrypoint(
  config: InternalConfig,
  path: string,
 ): Promise<BackgroundEntrypoint> {
-  const { main: _, ...options } =
-    await importTsFile<BackgroundScriptDefintition>(path, config);
-  if (options == null) {
-    throw Error('Background script does not have a default export');
+  let options: Omit<BackgroundScriptDefintition, 'main'> = {};
+  if (path !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
+    const defaultExport = await importTsFile<BackgroundScriptDefintition>(
+      path,
+      config,
+    );
+    if (defaultExport == null) {
+      throw Error('Background script does not have a default export');
+    }
+    const { main: _, ...moduleOptions } = defaultExport;
+    options = moduleOptions;
  }
  return {
    type: 'background',
@@ -257,7 +272,10 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
  'devtools/index.html': 'devtools',

  'background.ts': 'background',
+  [VIRTUAL_NOOP_BACKGROUND_MODULE_ID]: 'background',

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

@@ -5,6 +5,8 @@ import { relative, resolve } from 'path';
 import { getEntrypointBundlePath } from '../utils/entrypoints';
 import { getUnimportOptions } from '../utils/auto-imports';
 import { getGlobals } from '../utils/globals';
+import { getPublicFiles } from '../utils/public';
+import { normalizePath } from '../utils/paths';

 /**
 * Generate and write all the files inside the `InternalConfig.typesDir` directory.
@@ -49,23 +51,34 @@ async function writePathsDeclarationFile(
 ): Promise<string> {
  const filePath = resolve(config.typesDir, 'paths.d.ts');
  const unions = entrypoints
-    .map((entry) => {
-      const path = getEntrypointBundlePath(
+    .map((entry) =>
+      getEntrypointBundlePath(
        entry,
        config.outDir,
        entry.inputPath.endsWith('.html') ? '.html' : '.js',
-      );
-      return `  | "/${path}"`;
-    })
-    .sort();
+      ),
+    )
+    .concat(await getPublicFiles(config))
+    .map(normalizePath)
+    .map((path) => `    | "/${path}"`)
+    .sort()
+    .join('\n');
+
+  const template = `// Generated by wxt
+import "wxt/browser";
+
+declare module "wxt/browser" {
+  type PublicPath =
+{{ union }}
+  export interface ProjectRuntime extends Runtime.Static {
+    getURL(path: PublicPath): string;
+  }
+}
+`;

  await fs.writeFile(
    filePath,
-    [
-      '// Generated by wxt',
-      'type EntrypointPath =',
-      ...(unions.length === 0 ? ['  never'] : unions),
-    ].join('\n') + '\n',
+    template.replace('{{ union }}', unions || '    | never'),
  );

  return filePath;
@@ -100,8 +113,10 @@ async function writeMainDeclarationFile(
    filePath,
    [
      '// Generated by wxt',
+      `/// <reference types="vite/client" />`,
      ...references.map(
-        (ref) => `/// <reference types="./${relative(dir, ref)}" />`,
+        (ref) =>
+          `/// <reference types="./${normalizePath(relative(dir, ref))}" />`,
      ),
    ].join('\n') + '\n',
  );
@@ -124,31 +139,26 @@ async function writeTsConfigFile(
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
-
-    /* Type Checking */
    "strict": true,
-
-    /* Completeness */
+    "lib": ["DOM", "WebWorker"],
    "skipLibCheck": true,
-
-    /* Aliases */
-    "baseUrl": "${relative(dir, config.root)}",
+    "baseUrl": "${normalizePath(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)}/*"]
+      "@": ["${normalizePath(relative(config.root, config.srcDir))}"],
+      "@/*": ["${normalizePath(relative(config.root, config.srcDir))}/*"],
+      "~": ["${normalizePath(relative(config.root, config.srcDir))}"],
+      "~/*": ["${normalizePath(relative(config.root, config.srcDir))}/*"]
    }
  },
  "include": [
-    "${relative(dir, config.root)}/**/*",
-    "./${relative(dir, mainReference)}"
+    "${normalizePath(relative(dir, config.root))}/**/*",
+    "./${normalizePath(relative(dir, mainReference))}"
  ],
-  "exclude": ["${relative(dir, config.outBaseDir)}"]
+  "exclude": ["${normalizePath(relative(dir, config.outBaseDir))}"]
 }`,
  );
 }
@@ -1,9 +1,6 @@
-import path, { relative, resolve } from 'path';
+import { resolve } from 'path';
 import { BuildOutput, InternalConfig } from '../types';
-import { printTable } from './printTable';
-import pc from 'picocolors';
-import fs from 'fs-extra';
-import { filesize } from 'filesize';
+import { printFileList } from './printFileList';

 export async function printBuildSummary(
  output: BuildOutput,
@@ -20,31 +17,8 @@ export async function printBuildSummary(
    return l.fileName.localeCompare(r.fileName);
  });

-  let totalSize = 0;
-
-  const chunkRows: string[][] = await Promise.all(
-    chunks.map(async (chunk, i) => {
-      const file = [
-        relative(process.cwd(), config.outDir) + path.sep,
-        chunk.fileName,
-      ];
-      const prefix = i === chunks.length - 1 ? '  └─' : '  ├─';
-      const color = getChunkColor(chunk.fileName);
-      const stats = await fs.lstat(resolve(config.outDir, chunk.fileName));
-      totalSize += stats.size;
-      const size = String(filesize(stats.size));
-      return [
-        `${pc.gray(prefix)} ${pc.dim(file[0])}${color(file[1])}`,
-        pc.dim(size),
-      ];
-    }),
-  );
-
-  printTable(config.logger.log, chunkRows);
-
-  config.logger.log(
-    `${pc.cyan('Σ Total size:')} ${String(filesize(totalSize))}`,
-  );
+  const files = chunks.map((chunk) => resolve(config.outDir, chunk.fileName));
+  await printFileList(config.logger.log, config.outDir, files);
 }

 const DEFAULT_SORT_WEIGHT = 100;
@@ -62,17 +36,3 @@ function getChunkSortWeight(filename: string) {
    )?.[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,50 @@
+import path from 'node:path';
+import pc from 'picocolors';
+import fs from 'fs-extra';
+import { filesize } from 'filesize';
+import { printTable } from './printTable';
+
+export async function printFileList(
+  log: (message: string) => void,
+  baseDir: string,
+  files: string[],
+): Promise<void> {
+  let totalSize = 0;
+
+  const fileRows: string[][] = await Promise.all(
+    files.map(async (file, i) => {
+      const parts = [
+        path.relative(process.cwd(), baseDir) + path.sep,
+        path.relative(baseDir, file),
+      ];
+      const prefix = i === files.length - 1 ? '  └─' : '  ├─';
+      const color = getChunkColor(file);
+      const stats = await fs.lstat(file);
+      totalSize += stats.size;
+      const size = String(filesize(stats.size));
+      return [
+        `${pc.gray(prefix)} ${pc.dim(parts[0])}${color(parts[1])}`,
+        pc.dim(size),
+      ];
+    }),
+  );
+
+  printTable(log, fileRows);
+
+  log(`${pc.cyan('Σ Total size:')} ${String(filesize(totalSize))}`);
+}
+
+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,
+  '.zip': pc.yellow,
+};
+function getChunkColor(filename: string) {
+  return (
+    Object.entries(CHUNK_COLORS).find(([key]) => filename.endsWith(key))?.[1] ??
+    DEFAULT_COLOR
+  );
+}
@@ -5,15 +5,15 @@ import {
  WxtDevServer,
 } from './types';
 import * as vite from 'vite';
-import { findOpenPort } from './utils/findOpenPort';
-import { Manifest } from 'webextension-polyfill';
+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 port = await findOpenPort(3000, 3010);
+  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 = {
@@ -58,7 +58,9 @@ export async function setupServer(
    // paths ending in "/index.html"
    viteServer.ws.send('wxt:reload-page', path);
  };
-  const reloadContentScript = (contentScript: Manifest.ContentScript) => {
+  const reloadContentScript = (
+    contentScript: Omit<Scripting.RegisteredContentScript, 'id'>,
+  ) => {
    viteServer.ws.send('wxt:reload-content-script', contentScript);
  };

@@ -102,9 +104,9 @@ export function reloadContentScripts(
      const css = getContentScriptCssFiles([entry], server.currentOutput);

      server.reloadContentScript({
+        ...entry.options,
        js,
        css,
-        ...entry.options,
      });
    });
  } else {
@@ -1,28 +1,148 @@
 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
+   * "<rootDir>"
+   */
  srcDir?: string;
+  /**
+   * Directory containing files that will be copied to the output directory as-is.
+   *
+   * @default
+   * "<rootDir>/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;
+  /**
+   * 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;
+  zip?: {
+    /**
+     * Configure the filename output when zipping files.
+     *
+     * Available template variables:
+     *
+     * - `{{name}}` - The project's name converted to kebab-case
+     * - `{{version}} - The version_name or version from the manifest
+     * - `{{browser}} - The target browser from the `--browser` CLI flag
+     * - `{{manifestVersion}}` - Either "2" or "3"
+     *
+     * @default "{{name}}-{{version}}-{{browser}}.zip"
+     */
+    artifactTemplate?: string;
+    /**
+     * Configure the filename output when zipping files.
+     *
+     * Available template variables:
+     *
+     * - `{{name}}` - The project's name converted to kebab-case
+     * - `{{version}} - The version_name or version from the manifest
+     * - `{{browser}} - The target browser from the `--browser` CLI flag
+     * - `{{manifestVersion}}` - Either "2" or "3"
+     *
+     * @default "{{name}}-{{version}}-sources.zip"
+     */
+    sourcesTemplate?: string;
+    /**
+     * Override the artifactTemplate's `{{name}}` template variable. Defaults to the package.json's
+     * name, or if that doesn't exist, the current working directories name.
+     */
+    name?: string;
+    /**
+     * Root directory to ZIP. The ZIP can be uploaded to the Firefox Addon Store as your source
+     * code. Defaults to the `config.root` directory.
+     */
+    sourcesRoot?: string;
+    /**
+     * [Minimatch](https://www.npmjs.com/package/minimatch) patterns of files to exclude when
+     * creating a ZIP of all your source code for Firfox. Patterns are relative to your
+     * `config.zip.sourcesRoot`.
+     *
+     * Hidden files, node_modules, and tests are ignored by default.
+     *
+     * @example
+     * [
+     *   "coverage", // Ignore the coverage directory in the `sourcesRoot`
+     * ]
+     */
+    ignoredSources?: string[];
+  };
 }

 export interface WxtInlineViteConfig
@@ -83,7 +203,9 @@ export interface WxtDevServer extends vite.ViteDevServer {
   *
   * @param contentScript The manifest definition for a content script
   */
-  reloadContentScript: (contentScript: Manifest.ContentScript) => void;
+  reloadContentScript: (
+    contentScript: Omit<Scripting.RegisteredContentScript, 'id'>,
+  ) => void;
 }

 export type TargetBrowser = 'chrome' | 'firefox' | 'safari' | 'edge' | 'opera';
@@ -186,11 +308,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>;
 }

@@ -200,30 +361,27 @@ 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 = (
@@ -36,6 +36,13 @@ export interface InternalConfig {
  fsCache: FsCache;
  server?: WxtDevServer;
  runnerConfig: ResolvedConfig<ExtensionRunnerConfig>;
+  zip: {
+    name?: string;
+    artifactTemplate: string;
+    sourcesTemplate: string;
+    ignoredSources: string[];
+    sourcesRoot: string;
+  };
 }

 export type EntrypointGroup = Entrypoint | Entrypoint[];
@@ -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);
+    });
+  });
+});
@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import { kebabCaseAlphanumeric, removeImportStatements } from '../strings';
+
+describe('String utils', () => {
+  describe('kebabCaseAlphanumeric', () => {
+    it.each([
+      ['HELLO', 'hello'],
+      ['Hello, World!', 'hello-world'],
+      ['hello123', 'hello123'],
+      ['Hello World This Is A Test', 'hello-world-this-is-a-test'],
+      ['Hello     World', 'hello-world'],
+      ['hello-world', 'hello-world'], // Ensure hyphens are preserved
+    ])('should convert "%s" to "%s"', (input, expected) => {
+      expect(kebabCaseAlphanumeric(input)).toBe(expected);
+    });
+  });
+
+  describe('removeImportStatements', () => {
+    it('should remove all import formats', () => {
+      const imports = `
+import { registerGithubService, createGithubApi } from "@/utils/github";
+import {
+  registerGithubService,
+  createGithubApi
+} from "@/utils/github";
+import{ registerGithubService, createGithubApi }from "@/utils/github";
+import GitHub from "@/utils/github";
+import "@/utils/github";
+import '@/utils/github';
+import"@/utils/github" 
+ import'@/utils/github';
+    `;
+      expect(removeImportStatements(imports).trim()).toEqual('');
+    });
+
+    it('should not remove import.meta or inline import statements', () => {
+      const imports = `
+import.meta.env.DEV
+const a = await import("example");
+import("example");
+    `;
+      expect(removeImportStatements(imports)).toEqual(imports);
+    });
+  });
+});
@@ -7,13 +7,10 @@ export function getUnimportOptions(
 ): Partial<UnimportOptions> {
  const defaultOptions: Partial<UnimportOptions> = {
    debugLog: config.logger.debug,
-    imports: [
-      { name: '*', as: 'browser', from: 'webextension-polyfill' },
-      { name: 'defineConfig', from: 'wxt' },
-    ],
-    presets: [{ package: 'wxt/client' }],
+    imports: [{ name: 'defineConfig', from: 'wxt' }],
+    presets: [{ package: 'wxt/client' }, { package: 'wxt/browser' }],
    warn: config.logger.warn,
-    dirs: ['components', 'composables', 'hooks', 'utils'],
+    dirs: ['./components/*', './composables/*', './hooks/*', './utils/*'],
  };

  return mergeConfig(
@@ -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,6 +1,7 @@
 import { BuildOutput, BuildStepOutput, EntrypointGroup } from '../types';
 import * as vite from 'vite';
 import { every } from './arrays';
+import { normalizePath } from './paths';

 /**
 * Compare the changed files vs the build output and determine what kind of reload needs to happen:
@@ -102,15 +103,16 @@ function findEffectedSteps(
  currentOutput: BuildOutput,
 ): DetectedChange[] {
  const changes: DetectedChange[] = [];
-  const changedPath = changedFile[1];
+  const changedPath = normalizePath(changedFile[1]);

  const isChunkEffected = (
    chunk: vite.Rollup.OutputChunk | vite.Rollup.OutputAsset,
  ): boolean =>
    // If it's an HTML file with the same path, is is effected because HTML files need to be pre-rendered
-    // TODO: use bundle path to support `<name>/index.html`?
+    // fileName is normalized, relative bundle path
    (chunk.type === 'asset' && changedPath.endsWith(chunk.fileName)) ||
    // If it's a chunk that depends on the changed file, it is effected
+    // moduleIds are absolute, normalized paths
    (chunk.type === 'chunk' && chunk.moduleIds.includes(changedPath));

  for (const step of currentOutput.steps) {
@@ -1,5 +1,6 @@
 import { Entrypoint } from '../types';
 import path, { relative, resolve } from 'node:path';
+import { normalizePath } from './paths';

 export function getEntrypointName(
  entrypointsDir: string,
@@ -7,8 +8,8 @@ export function getEntrypointName(
  // type: Entrypoint['type'],
 ): string {
  const relativePath = path.relative(entrypointsDir, inputPath);
-  // Grab the string up to the first . or /
-  const name = relativePath.split(/[\.\/]/, 2)[0];
+  // Grab the string up to the first . or / or \\
+  const name = relativePath.split(/[\.\/\\]/, 2)[0];

  return name;
 }
@@ -29,5 +30,7 @@ export function getEntrypointBundlePath(
  outDir: string,
  ext: string,
 ): string {
-  return relative(outDir, getEntrypointOutputFile(entrypoint, ext));
+  return normalizePath(
+    relative(outDir, getEntrypointOutputFile(entrypoint, ext)),
+  );
 }
@@ -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)),
-    );
-  });
-}
@@ -80,7 +80,7 @@ export async function getInternalConfig(
    srcDir,
    userConfig.entrypointsDir ?? 'entrypoints',
  );
-  const publicDir = resolve(srcDir, userConfig.publicDir ?? 'public');
+  const publicDir = resolve(root, userConfig.publicDir ?? 'public');
  const wxtDir = resolve(srcDir, '.wxt');
  const typesDir = resolve(wxtDir, 'types');

@@ -99,6 +99,26 @@ export async function getInternalConfig(
    typesDir,
    fsCache: createFsCache(wxtDir),
    manifest,
+    zip: {
+      sourcesTemplate: '{{name}}-{{version}}-sources.zip',
+      artifactTemplate: '{{name}}-{{version}}-{{browser}}.zip',
+      sourcesRoot: root,
+      ...userConfig.zip,
+      ...config.zip,
+      ignoredSources: [
+        '**/node_modules',
+        // WXT files
+        '**/web-ext.config.ts',
+        // Hidden files
+        '**/.*',
+        // Tests
+        '**/__tests__/**',
+        '**/*.+(test|spec).?(c|m)+(j|t)s?(x)',
+        // User config
+        ...(userConfig.zip?.ignoredSources ?? []),
+        ...(config.zip?.ignoredSources ?? []),
+      ],
+    },
  };

  // Customize the default vite config
@@ -121,6 +141,8 @@ 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.plugins.push(plugins.noopBackground());

  finalConfig.vite.define ??= {};
  getGlobals(finalConfig).forEach((global) => {
@@ -143,6 +165,7 @@ type InternalConfigNoUserDirs = Omit<
  | 'typesDir'
  | 'fsCache'
  | 'manifest'
+  | 'zip'
 >;

 async function resolveManifestConfig(
@@ -12,7 +12,7 @@ export function getGlobals(
    {
      name: '__BROWSER__',
      value: config.browser,
-      type: `"chromium" | "firefox"`,
+      type: `string`,
    },
    {
      name: '__IS_CHROME__',
@@ -5,6 +5,8 @@ import fs from 'fs-extra';
 import { resolve } from 'path';
 import transform from 'jiti/dist/babel';
 import { getUnimportOptions } from './auto-imports';
+import { removeImportStatements } from './strings';
+import { normalizePath } from './paths';

 /**
 * Get the value from the default export of a `path`.
@@ -26,17 +28,18 @@ export async function importTsFile<T>(
  config: InternalConfig,
 ): Promise<T> {
  config.logger.debug('Loading file metadata:', path);
+  // JITI & Babel uses normalized paths.
+  const normalPath = normalizePath(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 textNoImports = removeImportStatements(text);
  const { code } = await unimport.injectImports(textNoImports);
  config.logger.debug(
    ['Text:', text, 'No imports:', textNoImports, 'Code:', code].join('\n'),
@@ -53,7 +56,8 @@ export async function importTsFile<T>(
      ),
    },
    transform(opts) {
-      if (opts.filename === path) return transform({ ...opts, source: code });
+      if (opts.filename === normalPath)
+        return transform({ ...opts, source: code });
      else return transform(opts);
    },
  });
@@ -12,6 +12,11 @@ import fs from 'fs-extra';
 import { resolve } from 'path';
 import { getEntrypointBundlePath } from './entrypoints';
 import { ContentSecurityPolicy } from './ContentSecurityPolicy';
+import {
+  hashContentScriptOptions,
+  mapWxtOptionsToContentScript,
+} from './content-scripts';
+import { getPackageJson } from './package';

 /**
 * Writes the manifest to the output directory and the build output.
@@ -47,36 +52,41 @@ 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);

-  return manifest;
-}
+  // TODO: transform manifest here.

-/**
- * Read the package.json from the current directory.
- *
- * 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'));
+  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;
 }

 /**
@@ -85,7 +95,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];
@@ -285,7 +294,7 @@ function addEntrypoints(
      );
    } else {
      const hashToEntrypointsMap = contentScripts.reduce((map, script) => {
-        const hash = JSON.stringify(script.options);
+        const hash = hashContentScriptOptions(script.options);
        if (map.has(hash)) map.get(hash)?.push(script);
        else map.set(hash, [script]);
        return map;
@@ -293,7 +302,7 @@ function addEntrypoints(

      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(),
@@ -0,0 +1,22 @@
+import { resolve } from 'node:path';
+import { InternalConfig } from '../types';
+import fs from 'fs-extra';
+
+/**
+ * Read the project's package.json.
+ *
+ * TODO: look in root and up directories until it's found
+ */
+export 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 {};
+  }
+}
@@ -0,0 +1,17 @@
+import nodePath from 'node:path';
+import * as vite from 'vite';
+
+/**
+ * Converts system paths to normalized bundler path. On windows and unix, this returns paths with /
+ * instead of \.
+ */
+export function normalizePath(path: string): string {
+  return vite.normalizePath(path);
+}
+
+/**
+ * Given a normalized path, convert it to the system path style. On Windows, switch to \, otherwise use /.
+ */
+export function unnormalizePath(path: string): string {
+  return nodePath.normalize(path);
+}
@@ -0,0 +1,17 @@
+import { InternalConfig } from '../types';
+import fs from 'fs-extra';
+import glob from 'fast-glob';
+import { unnormalizePath } from './paths';
+
+/**
+ * Get all the files in the project's public directory. Returned paths are relative to the
+ * `config.publicDir`.
+ */
+export async function getPublicFiles(
+  config: InternalConfig,
+): Promise<string[]> {
+  if (!(await fs.exists(config.publicDir))) return [];
+
+  const files = await glob('**/*', { cwd: config.publicDir });
+  return files.map(unnormalizePath);
+}
@@ -0,0 +1,17 @@
+export function kebabCaseAlphanumeric(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/[^a-z0-9-\s]/g, '') // Remove all non-alphanumeric, non-hyphen characters
+    .replace(/\s+/g, '-'); // Replace spaces with hyphens
+}
+
+/**
+ * Removes import statements from the top of a file. Keeps import.meta and inline, async `import()`
+ * calls.
+ */
+export function removeImportStatements(text: string): string {
+  return text.replace(
+    /(import\s?[{\w][\s\S]*?from\s?["'][\s\S]*?["'];?|import\s?["'][\s\S]*?["'];?)/gm,
+    '',
+  );
+}
@@ -4,3 +4,5 @@ export * from './download';
 export * from './multipageMove';
 export * from './unimport';
 export * from './virtualEntrypoint';
+export * from './tsconfigPaths';
+export * from './noopBackground';
@@ -3,6 +3,7 @@ import { Entrypoint, InternalConfig } from '../types';
 import { dirname, extname, resolve } from 'node:path';
 import { getEntrypointBundlePath } from '../utils/entrypoints';
 import fs, { ensureDir } from 'fs-extra';
+import { normalizePath } from '../utils/paths';

 /**
 * Ensures the HTML files output by a multipage build are in the correct location. This does two
@@ -23,11 +24,11 @@ export function multipageMove(
    name: 'wxt:multipage-move',
    async writeBundle(_, bundle) {
      for (const oldBundlePath in bundle) {
-        // oldBundlePath = 'entrypoints/popup.html' or 'entrypoints/o ptions/index.html'
+        // oldBundlePath = 'entrypoints/popup.html' or 'entrypoints/options/index.html'

        // Find a matching entrypoint - oldBundlePath is the same as end end of the input path.
        const entrypoint = entrypoints.find(
-          (entry) => !!entry.inputPath.endsWith(oldBundlePath),
+          (entry) => !!normalizePath(entry.inputPath).endsWith(oldBundlePath),
        );
        if (entrypoint == null) {
          config.logger.debug('No entrypoint found for', oldBundlePath);
@@ -0,0 +1,24 @@
+import { Plugin } from 'vite';
+
+/**
+ * In dev mode, if there's not a background script listed, we need to add one.
+ *
+ * This define's a virtual module that is basically just a noop.
+ */
+export function noopBackground(): Plugin {
+  const virtualModuleId = VIRTUAL_NOOP_BACKGROUND_MODULE_ID;
+  const resolvedVirtualModuleId = '\0' + virtualModuleId;
+  return {
+    name: 'wxt:noop-background',
+    resolveId(id) {
+      if (id === virtualModuleId) return resolvedVirtualModuleId;
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `import { defineBackground } from 'wxt/client';\nexport default defineBackground(() => void 0)`;
+      }
+    },
+  };
+}
+
+export const VIRTUAL_NOOP_BACKGROUND_MODULE_ID = 'virtual:user-background';
@@ -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,7 @@ import { Plugin } from 'vite';
 import { Entrypoint, InternalConfig } from '../types';
 import fs from 'fs-extra';
 import { resolve } from 'path';
+import { normalizePath } from '../utils/paths';

 /**
 * Wraps a user's entrypoint with a vitual version with additional logic.
@@ -21,7 +22,7 @@ export function virtualEntrypoin(
      const index = id.indexOf(virtualId);
      if (index === -1) return;

-      const inputPath = id.substring(index + virtualId.length);
+      const inputPath = normalizePath(id.substring(index + virtualId.length));
      return resolvedVirtualId + inputPath;
    },
    async load(id) {
@@ -0,0 +1,75 @@
+import { BuildOutput, InternalConfig } from './types';
+import zipdir from 'zip-dir';
+import { dirname, relative, resolve } from 'node:path';
+import fs from 'fs-extra';
+import { kebabCaseAlphanumeric } from './utils/strings';
+import { getPackageJson } from './utils/package';
+import { minimatch } from 'minimatch';
+import { formatDuration } from './utils/formatDuration';
+import { printFileList } from './log/printFileList';
+
+/**
+ * Zip the extension for distribution. Does not build, just zips the output that should exist for
+ * the given config.
+ *
+ * Returns a list of ZIP files that were created.
+ */
+export async function zipExtension(
+  config: InternalConfig,
+  buildOutput: BuildOutput,
+): Promise<string[]> {
+  const start = Date.now();
+  config.logger.info('Zipping extension...');
+  const zipFiles: string[] = [];
+
+  const projectName =
+    config.zip.name ??
+    kebabCaseAlphanumeric(
+      (await getPackageJson(config))?.name || dirname(process.cwd()),
+    );
+  const applyTemplate = (template: string): string =>
+    template
+      .replaceAll('{{name}}', projectName)
+      .replaceAll('{{browser}}', config.browser)
+      .replaceAll(
+        '{{version}}',
+        buildOutput.manifest.version_name ?? buildOutput.manifest.version,
+      )
+      .replaceAll('{{manifestVersion}}', `mv${config.manifestVersion}`);
+
+  await fs.ensureDir(config.outBaseDir);
+
+  // ZIP output directory
+
+  const outZipFilename = applyTemplate(config.zip.artifactTemplate);
+  const outZipPath = resolve(config.outBaseDir, outZipFilename);
+  await zipdir(config.outDir, {
+    saveTo: outZipPath,
+  });
+  zipFiles.push(outZipPath);
+
+  // ZIP sources for Firefox
+
+  if (config.browser === 'firefox') {
+    const sourcesZipFilename = applyTemplate(config.zip.sourcesTemplate);
+    const sourcesZipPath = resolve(config.outBaseDir, sourcesZipFilename);
+    await zipdir(config.zip.sourcesRoot, {
+      saveTo: sourcesZipPath,
+      filter(path) {
+        const relativePath = relative(config.zip.sourcesRoot, path);
+        const matchedPattern = config.zip.ignoredSources.find((pattern) =>
+          minimatch(relativePath, pattern),
+        );
+        return matchedPattern == null;
+      },
+    });
+    zipFiles.push(sourcesZipPath);
+  }
+
+  config.logger.success(
+    `Zipped extension in ${formatDuration(Date.now() - start)}`,
+  );
+  await printFileList(config.logger.log, config.outBaseDir, zipFiles);
+
+  return zipFiles;
+}
@@ -28,6 +28,10 @@ export async function build(config: InlineConfig): Promise<BuildOutput> {
  return await buildInternal(internalConfig);
 }

+/**
+ * Creates a dev server, pre-builds all the files that need to exist to load the extension, and open
+ * the browser with the extension installed.
+ */
 export async function createServer(
  config?: InlineConfig,
 ): Promise<WxtDevServer> {
@@ -54,17 +58,19 @@ export async function createServer(
  });

  server.watcher.on('all', async (event, path, _stats) => {
+    // Here, "path" is a non-normalized path (ie: C:\\users\\... instead of C:/users/...)
    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, server.currentOutput);
+      if (fileChanges.length === 0) return;

+      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(', ')}`,
@@ -218,4 +218,11 @@ export const fakeInternalConfig = fakeObjectCreator<InternalConfig>(() => ({
  vite: {},
  wxtDir: fakeDir(),
  server: mock<WxtDevServer>(),
+  zip: {
+    artifactTemplate: '{{name}}-{{version}}.zip',
+    ignoredSources: [],
+    sourcesRoot: fakeDir(),
+    sourcesTemplate: '{{name}}-sources.zip',
+    name: faker.person.firstName().toLowerCase(),
+  },
 }));
@@ -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.2.0"
+  }
+}
@@ -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).
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
GitHub Actions	e621aa8f8c	chore(release): v0.3.0	2023-07-21 03:59:08 +00:00
Aaron	488d7885ca	feat: Windows support (#50 )	2023-07-20 22:54:30 -05:00
Aaron Klinker	2c70246af5	fix: Add `WebWorker` lib to generated tsconfig	2023-07-20 22:34:16 -05:00
Aaron Klinker	a82a66ec37	Fix installation docs syntax colors	2023-07-20 22:31:39 -05:00
Aaron Klinker	19c0948d95	feat!: Change default `publicDir` to `<rootDir>/public` BREAKING CHANGE: `config.publicDir`'s default changed from `<srcDir>/public` to `rootDir/<public>` to align with other frameworks and standards	2023-07-20 15:47:38 -05:00
Aaron Klinker	04e5400a46	Fix awkward sentences in the docs	2023-07-20 14:13:52 -05:00
Aaron Klinker	33c1c171db	Consistent capitalization on docs homepage	2023-07-20 14:02:35 -05:00
Aaron Klinker	9cc464f48b	ci: Improve checks against `demo/` extension	2023-07-20 13:56:22 -05:00
Aaron Klinker	58a84ec253	feat!: Add type safety to `browser.runtime.getURL` Entrypoint outputs and files in the public directory are typed properly. Chunks and other generated files are not typed since they aren't often accessed at runtime. BREAKING CHANGE: `browser` is now imported from `wxt/browser` instead of `webextension-polyfill`	2023-07-20 13:55:35 -05:00
Aaron Klinker	609223566c	types: Allow any string for the __BROWSER__ global	2023-07-20 13:14:16 -05:00
Aaron Klinker	0aebb67b73	docs: Update entrypoint directory links	2023-07-20 12:14:45 -05:00
GitHub Actions	5fa5fd01cb	chore(release): v0.2.5	2023-07-20 16:19:32 +00:00
Aaron Klinker	de16423e02	Add hanging-process reporter to CI to diagnose hung processes	2023-07-20 11:13:55 -05:00
Aaron Klinker	aa4c0449e9	Fix failing tests	2023-07-20 11:13:55 -05:00
Aaron Klinker	9d00eb2466	chore: Update templates to wxt@0.2	2023-07-20 11:13:55 -05:00
Aaron Klinker	9ac756fb43	ci: Validate project templates	2023-07-20 11:13:55 -05:00
Aaron Klinker	f195aa429c	Fix type error	2023-07-20 10:40:03 -05:00
Aaron Klinker	ca20a210ea	feat: Include background script in dev mode if user doesn't define one	2023-07-20 10:38:53 -05:00
Aaron Klinker	547fee0e0e	feat: Auto-import from subdirectories	2023-07-20 09:54:44 -05:00
Aaron Klinker	54b18cc66e	fix: Properly load entrypoints that reference `import.meta`	2023-07-20 09:43:16 -05:00
Aaron Klinker	d8c190365a	fix: Don't crash when generating types in dev mode	2023-07-20 09:06:32 -05:00
Aaron Klinker	b625f41919	Update changelog	2023-07-20 09:06:32 -05:00
GitHub Actions	236a135ac2	chore(release): v0.2.4	2023-07-16 19:41:24 +00:00
Aaron	dca43efe0d	feat: Add `wxt zip` command (#47 )	2023-07-16 14:38:56 -05:00
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
				`@@ -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>