chore(release): v0.8.1

BREAKING CHANGE: Unlisted scripts must now `export default defineUnlistedScript(...)`

.codecov.yml

@@ -2,5 +2,7 @@ coverage:
   status:
     project:
       default:
-        target: 80%
-        threshold: 1%
+        informational: true
+    patch:
+      default:
+        informational: true

.github/workflows/validate.yml

@@ -7,13 +7,9 @@ on:
       - main
 
 jobs:
-  wxt:
-    name: WXT
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-latest, windows-latest]
-    runs-on: ${{ matrix.os }}
+  checks:
+    name: Checks
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -56,6 +52,30 @@ jobs:
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
+  windows-tests:
+    name: Windows Tests
+    runs-on: windows-latest
+    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: Install dependencies
+        run: pnpm install
+
+      - name: Tests
+        run: pnpm test:coverage --reporter=default --reporter=hanging-process
+
   project-templates:
     name: Project Templates
     runs-on: ubuntu-22.04

.gitignore

@@ -17,6 +17,6 @@ web-ext.config.ts
 templates/*/pnpm-lock.yaml
 templates/*/yarn.lock
 templates/*/package-lock.json
-docs/api/config.md
-docs/api/cli.md
+docs/api
 stats.html
+.tool-versions

.prettierignore

@@ -13,3 +13,4 @@ CHANGELOG.md
 *.txt
 _gitignore
 _redirects
+*.svelte

CHANGELOG.md

@@ -1,5 +1,76 @@
 # Changelog
 
+## v0.8.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.8.0...v0.8.1)
+
+### 🩹 Fixes
+
+- Output `action.browser_style` correctly ([6a93f20](https://github.com/wxt-dev/wxt/commit/6a93f20))
+
+### 📖 Documentation
+
+- Generate full API docs with typedoc ([#174](https://github.com/wxt-dev/wxt/pull/174))
+
+## v0.8.0
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.5...v0.8.0)
+
+### 🚀 Enhancements
+
+- ⚠️  Use `defineUnlistedScript` to define unlisted scripts ([#167](https://github.com/wxt-dev/wxt/pull/167))
+
+### 📖 Documentation
+
+- Fix wrong links ([#166](https://github.com/wxt-dev/wxt/pull/166))
+
+### 🌊 Types
+
+- ⚠️  Rename `BackgroundScriptDefintition` to `BackgroundDefinition` ([446f265](https://github.com/wxt-dev/wxt/commit/446f265))
+
+#### ⚠️ Breaking Changes
+
+- ⚠️  Unlisted scripts must now `export default defineUnlistedScript(...)` ([#167](https://github.com/wxt-dev/wxt/pull/167))
+- ⚠️  Rename `BackgroundScriptDefintition` to `BackgroundDefinition` ([446f265](https://github.com/wxt-dev/wxt/commit/446f265))
+
+### ❤️ Contributors
+
+- 渣渣120 <WOSHIZHAZHA120@qq.com>
+
+## v0.7.5
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.4...v0.7.5)
+
+### 🩹 Fixes
+
+- More consistent `version_name` generation between browsers ([#163](https://github.com/wxt-dev/wxt/pull/163))
+- Ignore non-manifest fields when merging content script entries ([#164](https://github.com/wxt-dev/wxt/pull/164))
+- Add `browser_style` to popup options ([#165](https://github.com/wxt-dev/wxt/pull/165))
+
+## v0.7.4
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.3...v0.7.4)
+
+### 🩹 Fixes
+
+- Support `react-refresh` when pre-rendering HTML pages in dev mode ([#158](https://github.com/wxt-dev/wxt/pull/158))
+
+### 📖 Documentation
+
+- Add migration guides ([b58fb02](https://github.com/wxt-dev/wxt/commit/b58fb02))
+
+### 🏡 Chore
+
+- Upgrade templates to v0.7 ([#156](https://github.com/wxt-dev/wxt/pull/156))
+
+## v0.7.3
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.2...v0.7.3)
+
+### 🚀 Enhancements
+
+- Support JS entrypoints ([#155](https://github.com/wxt-dev/wxt/pull/155))
+
 ## v0.7.2
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.7.1...v0.7.2)

demo/src/entrypoints/unlisted.ts

@@ -0,0 +1,3 @@
+export default defineUnlistedScript(() => {
+  console.log('injected');
+});

docs/.vitepress/config.ts

@@ -1,6 +1,19 @@
-import { defineConfig } from 'vitepress';
-import { generateConfigDocs } from './plugins/generate-config-docs';
+import { DefaultTheme, defineConfig } from 'vitepress';
 import { generateCliDocs } from './plugins/generate-cli-docs';
+import typedocSidebar from '../api/typedoc-sidebar.json';
+
+const filteredTypedocSidebar = typedocSidebar.filter(
+  (item) => item.text !== 'API',
+);
+// Typedoc's markdown theme adds collapse: true to all our items, event ones without any children,
+// so they need to be removed.
+function removeCollapsedWithNoItems(items: DefaultTheme.SidebarItem[]) {
+  for (const item of items) {
+    if (item.items) removeCollapsedWithNoItems(item.items);
+    else delete item.collapsed;
+  }
+}
+removeCollapsedWithNoItems(filteredTypedocSidebar);
 
 const title = 'Next-gen Web Extension Framework';
 const titleSuffix = ' – WXT';
@@ -18,7 +31,7 @@ export default defineConfig({
   description,
   vite: {
     clearScreen: false,
-    plugins: [generateConfigDocs(), generateCliDocs()],
+    plugins: [generateCliDocs()],
   },
   lastUpdated: true,
   sitemap: {
@@ -71,7 +84,7 @@ export default defineConfig({
             { text: 'Configuration', link: '/guide/configuration.md' },
             { text: 'Entrypoints', link: '/guide/entrypoints.md' },
             { text: 'Assets', link: '/guide/assets.md' },
-            { text: 'Build Targets', link: '/guide/build-targets.md' },
+            { text: 'Multiple Browsers', link: '/guide/multiple-browsers.md' },
             { text: 'Publishing', link: '/guide/publishing.md' },
             { text: 'Auto-imports', link: '/guide/auto-imports.md' },
             { text: 'Manifest.json', link: '/guide/manifest.md' },
@@ -80,6 +93,12 @@ export default defineConfig({
             { text: 'Development', link: '/guide/development.md' },
             { text: 'Testing', link: '/guide/testing.md' },
             { text: 'Vite', link: '/guide/vite.md' },
+          ],
+        },
+        {
+          text: 'Other',
+          items: [
+            { text: 'Migrate to WXT', link: '/guide/migrate-to-wxt.md' },
             { text: 'Compare', link: '/guide/compare.md' },
           ],
         },
@@ -114,10 +133,10 @@ export default defineConfig({
         {
           items: [
             { text: 'CLI', link: '/api/cli.md' },
-            { text: 'Config', link: '/api/config.md' },
-            { text: 'wxt', link: '/api/wxt.md' },
-            { text: 'wxt/browser', link: '/api/wxt-browser.md' },
-            { text: 'wxt/client', link: '/api/wxt-client.md' },
+            {
+              text: 'Modules',
+              items: filteredTypedocSidebar,
+            },
           ],
         },
       ],

docs/.vitepress/plugins/generate-cli-docs.ts

@@ -8,7 +8,7 @@ let hasGenerated = false;
 
 const cliDir = resolve('src/cli/commands');
 const cliDirGlob = resolve(cliDir, '**');
-const cliTemplatePath = resolve('docs/api/cli.tpl.md');
+const cliTemplatePath = resolve('docs/.vitepress/plugins/cli.tpl.md');
 const cliPath = resolve('docs/api/cli.md');
 
 const PREFACE = `<!--

docs/.vitepress/plugins/generate-config-docs.ts

@@ -1,145 +0,0 @@
-import { relative, resolve } from 'node:path';
-import { Project, ts, Type, Node, JSDocableNode } from 'ts-morph';
-import { readFileSync, writeFileSync } from 'node:fs';
-import { format } from 'prettier';
-import consola from 'consola';
-
-let hasGenerated = false;
-
-const externalTypesPath = resolve('src/core/types/external.ts');
-const configTemplatePath = resolve('docs/api/config.tpl.md');
-const configPath = resolve('docs/api/config.md');
-
-const PREFACE = `<!--
-DO NOT EDIT
-Generated by \`wxt/docs/.vitepress/plugins/generate-config-docs.ts\`
-To make changes to the config reference, update the JSDoc in \`src/core/types/external.ts\`.
--->`;
-
-/**
- * Custom property paths that should not be recursively inspected. Usually 3rd party types.
- */
-const LEAF_PATHS = ['imports', 'vite', 'server'];
-
-/**
- * Override any types that resolve to `import(...)` instead of their type names when calling
- * `type.getText()`.
- *
- * This also stops any further type inspection for objects, meaning the object will be documented,
- * not it's properties.
- */
-const CUSTOM_TYPES = {
-  manifest:
-    'Manifest | Promise<Manifest> | () => Manifest | () => Promise<Manifest>',
-  imports: "false | Partial<import('unimport').UnimportOptions>",
-  vite: "Omit<import('vite').UserConfig, 'root' | 'configFile' | 'mode'>",
-};
-
-export function generateConfigDocs() {
-  writeFileSync(configPath, '');
-
-  const generateDocs = async () => {
-    consola.info(`Generating ${relative(process.cwd(), configPath)}`);
-    try {
-      const project = new Project({
-        tsConfigFilePath: resolve('tsconfig.json'),
-      });
-
-      // Load file containing "UserConfig"
-      const externalTypesFile = project.addSourceFileAtPath(externalTypesPath);
-      project.resolveSourceFileDependencies();
-
-      const inlineConfigInterface =
-        externalTypesFile.getInterfaceOrThrow('InlineConfig');
-
-      const getDocsFor = (path: string[], node: Node<ts.Node>): string[] => {
-        const pathStr = path.join('.');
-
-        let type: Type<ts.Type>;
-        if (node.isKind(ts.SyntaxKind.InterfaceDeclaration)) {
-          type = node.getType();
-        } else if (node.isKind(ts.SyntaxKind.PropertySignature)) {
-          type = node.getTypeNodeOrThrow()?.getType();
-        } else if (node.isKind(ts.SyntaxKind.MethodSignature)) {
-          type = node.getType();
-        } else {
-          throw Error('Unsupported type node: ' + node.getKindName());
-        }
-
-        if (type.isObject() && !type.isArray() && !CUSTOM_TYPES[pathStr]) {
-          return type.getProperties().flatMap((property) => {
-            const childPath = [...path, property.getName()];
-
-            return getDocsFor(childPath, property.getDeclarations()[0]);
-          });
-        }
-
-        if ('getJsDocs' in node) {
-          const lines: string[] = [];
-          const docs = (node as unknown as JSDocableNode).getJsDocs();
-          let typeText: string;
-          if (CUSTOM_TYPES[pathStr]) {
-            typeText = CUSTOM_TYPES[pathStr];
-          } else if (type.isUnion() && !type.isBoolean()) {
-            typeText = type
-              .getUnionTypes()
-              .map((type) => type.getText())
-              .join(' | ');
-          } else {
-            typeText = type.getText();
-          }
-          const defaultValue = docs
-            .flatMap((doc) => doc.getTags())
-            .find((tag) => tag.getTagName() === 'default')
-            ?.getCommentText();
-          lines.push(
-            '',
-            `## ${pathStr}`,
-            '',
-            `- **Type**: \`${typeText}\``,
-            `- **Default**: \`${defaultValue}\``,
-            ...docs.flatMap((doc) => doc.getDescription()),
-          );
-          return lines;
-        }
-
-        return [];
-      };
-
-      const lines = getDocsFor([], inlineConfigInterface);
-      const text = await format(
-        PREFACE +
-          '\n\n' +
-          readFileSync(configTemplatePath, 'utf-8').replace(
-            '{{ DOCS }}',
-            lines.join('\n'),
-          ),
-        { parser: 'markdown' },
-      );
-
-      writeFileSync(configPath, text);
-      consola.success(`Generated ${relative(process.cwd(), configPath)}`);
-    } catch (err) {
-      consola.fail(`Failed to generate ${relative(process.cwd(), configPath)}`);
-      consola.error(err.message);
-    }
-  };
-
-  return {
-    name: 'docs:generate-config-docs',
-    async config() {
-      if (!hasGenerated) {
-        hasGenerated = true;
-        await generateDocs();
-      }
-    },
-    configureServer(server: any) {
-      server.watcher.add(externalTypesPath);
-    },
-    async handleHotUpdate(ctx: { file: string }) {
-      if ([externalTypesPath, configTemplatePath].includes(ctx.file)) {
-        await generateDocs();
-      }
-    },
-  };
-}

docs/api/config.tpl.md

@@ -1,5 +0,0 @@
-# Config Reference
-
-All the options you can use in your `wxt.config.ts` file.
-
-{{ DOCS }}

docs/api/wxt-browser.md

@@ -1,10 +0,0 @@
-# `wxt/browser` Reference
-
-:::warning 🚧 Under construction
-This documentation does not exist yet. All APIs are documented with JSDoc, so for now, you can view the documentation in your editor.
-
-```ts
-import { browser } from 'wxt/browser';
-```
-
-:::

docs/api/wxt-client.md

@@ -1,14 +0,0 @@
-# `wxt/client` Reference
-
-:::warning 🚧 Under construction
-This documentation does not exist yet. All APIs are documented with JSDoc, so for now, you can view the documentation in your editor.
-
-```ts
-import {
-  createContentScriptUi,
-  defineBackground,
-  defineContentScript,
-} from 'wxt/client';
-```
-
-:::

docs/api/wxt.md

@@ -1,17 +0,0 @@
-# `wxt` Reference
-
-:::warning 🚧 Under construction
-This documentation does not exist yet. All APIs are documented with JSDoc, so for now, you can view the documentation in your editor.
-
-```ts
-import {
-  build,
-  clean,
-  createServer,
-  defineConfig,
-  defineRunnerConfig,
-  version,
-} from 'wxt';
-```
-
-:::

docs/entrypoints/background.md

@@ -8,8 +8,8 @@ For MV2, the background is added as a script to the background page. For MV3, th
 
 <EntrypointPatterns
   :patterns="[
-    ['background.ts', 'background.js'],
-    ['background/index.ts', 'background.js'],
+    ['background.[jt]s', 'background.js'],
+    ['background/index.[jt]s', 'background.js'],
   ]"
 />
 

docs/entrypoints/content-scripts.md

@@ -8,10 +8,10 @@ When creating content script entrypoints, they are automatically included in the
 
 <EntrypointPatterns
   :patterns="[
-    ['content.(ts|tsx)', 'content-scripts/content.js'],
-    ['content/index.(ts|tsx)', 'content-scripts/content.js'],
-    ['<name>.content.(ts|tsx)', 'content-scripts/<name>.js'],
-    ['<name>.content/index.(ts|tsx)', 'content-scripts/<name>.js'],
+    ['content.[jt]sx?', 'content-scripts/content.js'],
+    ['content/index.[jt]sx?', 'content-scripts/content.js'],
+    ['<name>.content.[jt]sx?', 'content-scripts/<name>.js'],
+    ['<name>.content/index.[jt]sx?', 'content-scripts/<name>.js'],
   ]"
 />
 

docs/entrypoints/css.md

@@ -5,7 +5,7 @@ WXT can build CSS entrypoints individually. CSS entrypoints are always unlisted.
 See [Content Script CSS](/entrypoints/content-scripts#css) documentation for the recomended approach to include CSS with a content script.
 
 :::info
-If the recommended approach doesn't work for your use case, you can use any of the filename patterns below to build the styles separate from the JS and use the [`transformManifest` hook](/api/config#transformmanifest) to manually add your CSS file to the manifest.
+If the recommended approach doesn't work for your use case, you can use any of the filename patterns below to build the styles separate from the JS and use the [`transformManifest` hook](/api/wxt/interfaces/InlineConfig#transformmanifest) to manually add your CSS file to the manifest.
 :::
 
 ## Filenames

docs/entrypoints/popup.md

@@ -29,6 +29,7 @@
       }"
     />
     <meta name="manifest.type" content="page_action|browser_action" />
+    <meta name="manifest.browser_style" content="true|false" />
     <!-- Set include/exclude if the page should be removed from some builds -->
     <meta name="manifest.include" content="['chrome', ...]" />
     <meta name="manifest.exclude" content="['chrome', ...]" />

docs/entrypoints/unlisted-scripts.md

@@ -2,19 +2,36 @@
 
 TypeScript files that are built, but are not included in the manifest.
 
+You are responsible for loading/running these scripts where needed.
+
 ## Filenames
 
 <EntrypointPatterns
   :patterns="[
-    ['<name>.(ts|tsx)', '<name>.js'],
-    ['<name>/index.(ts|tsx)', '<name>.js'],
+    ['<name>.[jt]sx?', '<name>.js'],
+    ['<name>/index.[jt]sx?', '<name>.js'],
   ]"
 />
 
 ## Definition
 
-Unlike the background or content scripts, you can define this script's logic in the top level scope.
+```ts
+export default defineUnlistedScript(() => {
+  // Executed when script is loaded
+});
+```
+
+or
 
 ```ts
-// Code goes here
+export default defineUnlistedScript({
+  // Set include/exclude if the script should be removed from some builds
+  include: undefined | string[],
+  exclude: undefined | string[],
+
+  // Executed when script is loaded
+  main() {
+    // ...
+  },
+});
 ```

docs/guide/auto-imports.md

@@ -10,12 +10,13 @@ To setup your test environment for auto-imports, see [Testing](/guide/testing).
 
 Some WXT APIs can be used without importing them:
 
-- [`browser`](/api/wxt-browser#browser) from `wxt/browser`, a small wrapper around `webextension-polyfill`
-- [`defineContentScript`](/api/wxt-client#defiencontentscript) from `wxt/client`
-- [`defineBackground`](/api/wxt-client#definebackgroundscript) from `wxt/client`
-- [`createContentScriptUi`](/api/wxt-client#createcontentscriptui) from `wxt/client`
+- [`browser`](/api/wxt/browser/variables/browser) from `wxt/browser`, a small wrapper around `webextension-polyfill`
+- [`defineContentScript`](/api/wxt/client/functions/defineContentScript) from `wxt/client`
+- [`defineBackground`](/api/wxt/client/functions/defineBackground) from `wxt/client`
+- [`createContentScriptUi`](/api/wxt/client/functions/createContentScriptUi) from `wxt/client`
+- [`defineUnlistedScript`](/api/wxt/sandbox/functions/defineUnlistedScript) from `wxt/sandbox`
 
-And more. All [`wxt/client`](/api/wxt-client) APIs can be used without imports.
+And more. All `wxt/*` APIs can be used without imports.
 
 ## Project Auto-imports
 

docs/guide/configuration.md

@@ -15,7 +15,7 @@ export default defineConfig({
 ```
 
 :::info
-See the [Config reference](/api/config) for a full list of options.
+See the [Config reference](/api/wxt/interfaces/InlineConfig) for a full list of options.
 :::
 
 ## Directory Config

docs/guide/development.md

@@ -15,7 +15,7 @@ WXT's main goal is providing the best DX it possibly can. When running your exte
 
 ## Configure Browser Startup
 
-WXT uses [`web-ext` by Mozilla](https://github.com/mozilla/web-ext) to automatically open a browser with the extension installed. You can configure the runner's behavior via the [`runner`](/api/config#runner.disabled) option, or in a separate gitignored file, `web-ext.config.ts`.
+WXT uses [`web-ext` by Mozilla](https://github.com/mozilla/web-ext) to automatically open a browser with the extension installed. You can configure the runner's behavior via the [`runner`](/api/wxt/interfaces/InlineConfig#runner) option, or in a separate gitignored file, `web-ext.config.ts`.
 
 :::code-group
 

docs/guide/extension-apis.md

@@ -79,8 +79,8 @@ There are a number of message passing libraries you can use to improve the messa
 
 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-core/messaging`](https://webext-core.aklinker1.io/guide/messaging/) - "A light-weight, type-safe wrapper around the `browser.runtime` messaging APIs"
+- [`@webext-core/proxy-service`](https://webext-core.aklinker1.io/guide/proxy-service/) - "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

docs/guide/installation.md

@@ -1,6 +1,6 @@
 # Installation
 
-Bootstrap a new project, start from scratch, or migrate an existing project.
+Bootstrap a new project, start from scratch, or [migrate an existing project](/guide/migrate-to-wxt).
 
 ## Bootstrap Project
 
@@ -26,7 +26,9 @@ There are several starting templates available.
 | <Icon name="Svelte" /> [`svelte`](https://github.com/wxt-dev/wxt/tree/main/templates/svelte)                                                            |
 | <Icon name="Solid" icon="https://www.solidjs.com/img/favicons/favicon-32x32.png" /> [`solid`](https://github.com/wxt-dev/wxt/tree/main/templates/solid) |
 
-> All templates are in TypeScript. WXT does not support JS at this time.
+:::info
+All templates default to TypeScript. Rename the file extensions to `.js` to use JavaScript instead.
+:::
 
 ## From Scratch
 

docs/guide/migrate-to-wxt.md

@@ -0,0 +1,57 @@
+---
+outline: deep
+---
+
+# Migrate to WXT
+
+> If you have problems migrating to WXT, feel free to ask for help in GitHub by [starting a discussion](https://github.com/wxt-dev/wxt/discussions/new?category=q-a)!
+
+## Overview
+
+Always start by generating a new vanilla project and merging it into your project one file at a time.
+
+```sh
+cd path/to/your/project
+pnpx wxt@latest init example-wxt --template vanilla
+```
+
+In general, you'll need to:
+
+<input type="checkbox" /> Install `wxt`<br />
+<input type="checkbox" /> Update/create `package.json` scripts to use `wxt` (don't forget about `postinstall`)<br />
+<input type="checkbox" /> Move entrypoints into `entrypoints/` directory<br />
+<input type="checkbox" /> Move assets into either the `assets/` or `public/` directories<br />
+<input type="checkbox" /> Move manifest.json content into `wxt.config.ts`<br />
+<input type="checkbox" /> Convert custom import syntax to be compatible with Vite<br />
+<input type="checkbox" /> Add a default export to JS entrypoints<br />
+<input type="checkbox" /> Use the `browser` global instead of `chrome`<br />
+<input type="checkbox" /> Compare final `manifest.json` files, making sure permissions and host permissions are unchanged<br />
+<input type="checkbox" /> Extension output by `wxt build` works the same way as before the migration<br />
+
+Every project is different, so there's no one-solution-fits-all to migrating your project. Just make sure `wxt dev` runs, `wxt build` results in a working extension, and the list of permissions in the `manifest.json` hasn't changed. If all that looks good, you've finished migrating your extension!
+
+## Popular Tools/Frameworks
+
+Here's specific steps for other popuplar frameworks/build tools.
+
+### `vite-plugin-web-extension`
+
+Since you're already using Vite, it's a simple refactor.
+
+1. Install `wxt`
+2. Move and refactor your entrypoints to WXT's style (with a default export)
+3. Update package.json scripts to use `wxt`
+4. Add `"postinstall": "wxt prepare"` script
+5. Move the `manifest.json` into `wxt.config.ts`
+6. Move any custom settings from `vite.config.ts` into `wxt.config.ts`'s
+7. Compare `dist/manifest.json` to `.output/*/manifest.json`, they should have the same content as before. If not, tweak your entrypoints and config to get as close as possible.
+
+### `plasmo`
+
+1. Install `wxt`
+2. Move entrypoints into `entrypoints/` directory, merging the named exports used to configure your JS entrypoints into WXT's default export
+3. Move public `assets/*` into the `public/` directory
+4. If you use CSUI, migrate to WXT's `createContentScriptUi`
+5. Convert Plasmo's custom import resolutions to Vite's
+6. If importing remote code via a URL, add a `url:` prefix so it works with WXT
+7. Compare your output `manifest.json` files from before the migration to after the migration. They should have the same content. If not, tweak your entrypoints and config to get as close as possible.

docs/guide/multiple-browsers.md

@@ -1,4 +1,4 @@
-# Build Targets
+# Multiple Browsers
 
 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.
 

docs/guide/testing.md

@@ -60,7 +60,7 @@ Eventually, WXT will provide utilities for setting up these auto-imports. For no
 
 Not all testing frameworks can handle auto-imports. If your framework or setup is not listed below, it may be easiest to disable auto-imports.
 
-To setup auto-imports manually, use [`unplugin-auto-import`](https://www.npmjs.com/package/unplugin-auto-import). It uses the same tool, `unimport`, as WXT and will result in compatiple auto-imports. `unplugin-auto-import` supports lots of different tools (vite, webpage, esbuild, rollup, etc). You can try and integrate it into your build process.
+To setup auto-imports manually, use [`unplugin-auto-import`](https://www.npmjs.com/package/unplugin-auto-import). It uses the same tool, `unimport`, as WXT and will result in compatiple auto-imports. `unplugin-auto-import` supports lots of different tools (vite, webpack, esbuild, rollup, etc). You can try and integrate it into your build process.
 
 ### Vitest (Recommended)
 

docs/index.md

@@ -22,12 +22,12 @@ features:
   - icon: 🌐
     title: Supported Browsers
     details: WXT will build extensions for Chrome, Firefox, Edge, Safari, and any Chromium based browser.
-    link: /guide/build-targets
+    link: /guide/multiple-browsers
     linkText: Read docs
   - icon: ✅
     title: MV2 and MV3
     details: Build Manifest V2 or V3 extensions for any browser using the same codebase.
-    link: /guide/build-targets#target-manifest-version
+    link: /guide/multiple-browsers#target-manifest-version
     linkText: Read docs
   - icon: ⚡
     title: Fast Dev Mode

docs/public/_redirects

@@ -2,10 +2,11 @@
 # https://docs.netlify.com/routing/redirects/
 
 # Old URLs -> New URLs
-/config.html                    /api/config.html
+/config.html                    /api/wxt/interfaces/InlineConfig.html
+/api/config.html                /api/wxt/interfaces/InlineConfig.html
 /entrypoints                    /entrypoints/background.html
 /get-started/assets.html        /guide/assets.html
-/get-started/build-targets.html /guide/build-targets.html
+/get-started/build-targets.html /guide/multiple-browsers.html
 /get-started/compare.html       /guide/compare.html
 /get-started/configuration.html /guide/configuration.html
 /get-started/entrypoints.html   /guide/entrypoints.html
@@ -27,3 +28,4 @@
 /guide/sidepanel.html           /entrypoints/sidepanel.html
 /guide/unlisted-pages.html      /entrypoints/unlisted-pages.html
 /guide/unlisted-scripts.html    /entrypoints/unlisted-scripts.html
+/guide/build-targets.html       /guide/multiple-browsers.html

docs/typedoc.json

@@ -0,0 +1,15 @@
+{
+  "entryPoints": [
+    "../src",
+    "../src/client",
+    "../src/client/browser.ts",
+    "../src/client/sandbox"
+  ],
+  "plugin": ["typedoc-plugin-markdown", "typedoc-vitepress-theme"],
+  "out": "./api",
+  "githubPages": false,
+  "excludePrivate": true,
+  "excludeProtected": true,
+  "excludeInternal": true,
+  "readme": "none"
+}

e2e/tests/auto-imports.test.ts

@@ -22,6 +22,7 @@ describe('Auto Imports', () => {
             const defineBackground: typeof import('wxt/client')['defineBackground']
             const defineConfig: typeof import('wxt')['defineConfig']
             const defineContentScript: typeof import('wxt/client')['defineContentScript']
+            const defineUnlistedScript: typeof import('wxt/sandbox')['defineUnlistedScript']
           }
           "
         `);

e2e/tests/manifest-content.test.ts

@@ -194,15 +194,15 @@ describe('Manifest Content', () => {
   });
 
   describe('content_scripts', () => {
-    it('should group content scripts and styles together based on their matches and run_at', async () => {
+    it('should group content scripts and styles together based on their manifest properties', async () => {
       const project = new TestProject();
       project.addFile(
         'entrypoints/one.content/index.ts',
         `import "./style.css";
-      export default defineContentScript({
-        matches: ["*://google.com/*"],
-        main: () => {},
-      })`,
+        export default defineContentScript({
+          matches: ["*://google.com/*"],
+          main: () => {},
+        })`,
       );
       project.addFile(
         'entrypoints/one.content/style.css',
@@ -211,11 +211,11 @@ describe('Manifest Content', () => {
       project.addFile(
         'entrypoints/two.content/index.ts',
         `import "./style.css";
-      export default defineContentScript({
-        matches: ["*://google.com/*"],
-        runAt: "document_end",
-        main: () => {},
-      })`,
+        export default defineContentScript({
+          matches: ["*://google.com/*"],
+          runAt: "document_end",
+          main: () => {},
+        })`,
       );
       project.addFile(
         'entrypoints/two.content/style.css',
@@ -224,11 +224,11 @@ describe('Manifest Content', () => {
       project.addFile(
         'entrypoints/three.content/index.ts',
         `import "./style.css";
-      export default defineContentScript({
-        matches: ["*://google.com/*"],
-        runAt: "document_end",
-        main: () => {},
-      })`,
+        export default defineContentScript({
+          matches: ["*://google.com/*"],
+          runAt: "document_end",
+          main: () => {},
+        })`,
       );
       project.addFile(
         'entrypoints/three.content/style.css',
@@ -237,11 +237,11 @@ describe('Manifest Content', () => {
       project.addFile(
         'entrypoints/four.content/index.ts',
         `import "./style.css";
-      export default defineContentScript({
-        matches: ["*://duckduckgo.com/*"],
-        runAt: "document_end",
-        main: () => {},
-      })`,
+        export default defineContentScript({
+          matches: ["*://duckduckgo.com/*"],
+          runAt: "document_end",
+          main: () => {},
+        })`,
       );
       project.addFile(
         'entrypoints/four.content/style.css',
@@ -276,15 +276,15 @@ describe('Manifest Content', () => {
       project.addFile(
         'entrypoints/one.content/index.ts',
         `export default defineContentScript({
-        matches: ["*://google.com/*"],
-        main: () => {},
-      })`,
+          matches: ["*://google.com/*"],
+          main: () => {},
+        })`,
       );
       project.addFile(
         'entrypoints/two.content/style.css',
         `body {
-        background-color: red;
-      }`,
+          background-color: red;
+        }`,
       );
       project.setConfigFileConfig({
         manifest: {
@@ -333,7 +333,7 @@ describe('Manifest Content', () => {
         .toMatchInlineSnapshot(`
           ".output/chrome-mv3/manifest.json
           ----------------------------------------
-          {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"css\\":[\\"content-scripts/content.css\\"],\\"js\\":[\\"content-scripts/content.js\\"]}]}"
+          {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"css\\":[\\"content-scripts/content.css\\"],\\"js\\":[\\"content-scripts/content.js\\"]}]}"
         `);
     });
 
@@ -360,7 +360,7 @@ describe('Manifest Content', () => {
         .toMatchInlineSnapshot(`
           ".output/chrome-mv3/manifest.json
           ----------------------------------------
-          {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"css\\":[\\"content-scripts/content.css\\"],\\"js\\":[\\"content-scripts/content.js\\"]}]}"
+          {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"css\\":[\\"content-scripts/content.css\\"],\\"js\\":[\\"content-scripts/content.js\\"]}]}"
         `);
     });
 
@@ -385,10 +385,10 @@ describe('Manifest Content', () => {
 
       expect(await project.serializeFile('.output/chrome-mv3/manifest.json'))
         .toMatchInlineSnapshot(`
-        ".output/chrome-mv3/manifest.json
-        ----------------------------------------
-        {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"js\\":[\\"content-scripts/content.js\\"]}]}"
-      `);
+          ".output/chrome-mv3/manifest.json
+          ----------------------------------------
+          {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"js\\":[\\"content-scripts/content.js\\"]}]}"
+        `);
     });
 
     it('should not add a content script entry for CSS when cssInjectionMode is "ui", but add a web_accessible_resources entry for MV2', async () => {
@@ -416,7 +416,7 @@ describe('Manifest Content', () => {
         .toMatchInlineSnapshot(`
           ".output/chrome-mv2/manifest.json
           ----------------------------------------
-          {\\"manifest_version\\":2,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"js\\":[\\"content-scripts/content.js\\"]}],\\"web_accessible_resources\\":[\\"content-scripts/content.css\\"]}"
+          {\\"manifest_version\\":2,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"js\\":[\\"content-scripts/content.js\\"]}],\\"web_accessible_resources\\":[\\"content-scripts/content.css\\"]}"
         `);
     });
 
@@ -445,7 +445,7 @@ describe('Manifest Content', () => {
         .toMatchInlineSnapshot(`
           ".output/chrome-mv3/manifest.json
           ----------------------------------------
-          {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"js\\":[\\"content-scripts/content.js\\"]}],\\"web_accessible_resources\\":[{\\"resources\\":[\\"content-scripts/content.css\\"],\\"matches\\":[\\"https://*.google.com/*\\"]}]}"
+          {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"js\\":[\\"content-scripts/content.js\\"]}],\\"web_accessible_resources\\":[{\\"resources\\":[\\"content-scripts/content.css\\"],\\"matches\\":[\\"https://*.google.com/*\\"]}]}"
         `);
     });
   });
@@ -480,7 +480,7 @@ describe('Manifest Content', () => {
       .toMatchInlineSnapshot(`
         ".output/chrome-mv3/manifest.json
         ----------------------------------------
-        {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"web_accessible_resources\\":[{\\"resources\\":[\\"one.png\\"],\\"matches\\":[\\"https://one.com/*\\"]},{\\"resources\\":[\\"content-scripts/content.css\\"],\\"matches\\":[\\"https://*.google.com/*\\"]}],\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"js\\":[\\"content-scripts/content.js\\"]}]}"
+        {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"web_accessible_resources\\":[{\\"resources\\":[\\"one.png\\"],\\"matches\\":[\\"https://one.com/*\\"]},{\\"resources\\":[\\"content-scripts/content.css\\"],\\"matches\\":[\\"https://*.google.com/*\\"]}],\\"content_scripts\\":[{\\"matches\\":[\\"https://*.google.com/*\\"],\\"js\\":[\\"content-scripts/content.js\\"]}]}"
       `);
   });
 
@@ -505,7 +505,7 @@ describe('Manifest Content', () => {
     expect(output).toMatchInlineSnapshot(`
       ".output/chrome-mv3/manifest.json
       ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"author\\":\\"Custom Author\\"}"
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"author\\":\\"Custom Author\\"}"
     `);
   });
 
@@ -537,4 +537,66 @@ describe('Manifest Content', () => {
       expect(safariManifest.background.persistent).toBe(expected);
     },
   );
+
+  describe('versions', () => {
+    it.each([
+      ['chrome', 3] as const,
+      ['safari', 2] as const,
+      ['edge', 3] as const,
+    ])(
+      'should include version_name on %s when it needs simplified',
+      async (browser, manifestVersion) => {
+        const project = new TestProject({
+          version: '1.0.0-alpha1',
+        });
+
+        await project.build({ browser, manifestVersion });
+        const manifest = await project.getOutputManifest(
+          `.output/${browser}-mv${manifestVersion}/manifest.json`,
+        );
+
+        expect(manifest.version).toBe('1.0.0');
+        expect(manifest.version_name).toBe('1.0.0-alpha1');
+      },
+    );
+
+    it.each([['firefox', 2] as const])(
+      "should not include a version_name on %s because the browser doesn't support it",
+      async (browser, manifestVersion) => {
+        const project = new TestProject({
+          version: '1.0.0-alpha1',
+        });
+
+        await project.build({ browser, manifestVersion });
+        const manifest = await project.getOutputManifest(
+          `.output/${browser}-mv${manifestVersion}/manifest.json`,
+        );
+
+        expect(manifest.version).toBe('1.0.0');
+        expect(manifest.version_name).toBeUndefined();
+      },
+    );
+
+    it.each([
+      ['chrome', 3] as const,
+      ['firefox', 2] as const,
+      ['safari', 3] as const,
+      ['edge', 3] as const,
+    ])(
+      'should not include the version_name if it is equal to version',
+      async (browser, manifestVersion) => {
+        const project = new TestProject({
+          version: '1.0.0.1',
+        });
+
+        await project.build({ browser, manifestVersion });
+        const manifest = await project.getOutputManifest(
+          `.output/${browser}-mv${manifestVersion}/manifest.json`,
+        );
+
+        expect(manifest.version).toBe('1.0.0.1');
+        expect(manifest.version_name).toBeUndefined();
+      },
+    );
+  });
 });

e2e/tests/output-structure.test.ts

@@ -13,7 +13,7 @@ describe('Output Directory Structure', () => {
     expect(await project.serializeOutput()).toMatchInlineSnapshot(`
       ".output/chrome-mv3/manifest.json
       ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\"}"
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\"}"
     `);
   });
 
@@ -69,7 +69,7 @@ describe('Output Directory Structure', () => {
       ================================================================================
       .output/chrome-mv3/manifest.json
       ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"*://*/*\\"],\\"css\\":[\\"content-scripts/one.css\\",\\"content-scripts/two.css\\"],\\"js\\":[\\"content-scripts/one.js\\",\\"content-scripts/two.js\\"]}]}"
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"content_scripts\\":[{\\"matches\\":[\\"*://*/*\\"],\\"css\\":[\\"content-scripts/one.css\\",\\"content-scripts/two.css\\"],\\"js\\":[\\"content-scripts/one.js\\",\\"content-scripts/two.js\\"]}]}"
     `);
   });
 
@@ -96,7 +96,7 @@ describe('Output Directory Structure', () => {
       ================================================================================
       .output/chrome-mv3/manifest.json
       ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":[\\"*://*/*\\"],\\"js\\":[\\"content-scripts/overlay-one.js\\"]}]}"
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"content_scripts\\":[{\\"matches\\":[\\"*://*/*\\"],\\"js\\":[\\"content-scripts/overlay-one.js\\"]}]}"
     `);
   });
 
@@ -165,4 +165,47 @@ describe('Output Directory Structure', () => {
 
     expect(await project.fileExists('stats.html')).toBe(true);
   });
+
+  it('should support JavaScript entrypoints', async () => {
+    const project = new TestProject();
+    project.addFile(
+      'entrypoints/background.js',
+      `export default defineBackground(() => {});`,
+    );
+    project.addFile(
+      'entrypoints/unlisted.js',
+      `export default defineUnlistedScript(() => {})`,
+    );
+    project.addFile(
+      'entrypoints/content.js',
+      `export default defineContentScript({
+        matches: ["*://*.google.com/*"],
+        main() {},
+      })`,
+    );
+    project.addFile(
+      'entrypoints/named.content.jsx',
+      `export default defineContentScript({
+        matches: ["*://*.duckduckgo.com/*"],
+        main() {},
+      })`,
+    );
+
+    await project.build();
+
+    expect(await project.serializeFile('.output/chrome-mv3/manifest.json'))
+      .toMatchInlineSnapshot(`
+        ".output/chrome-mv3/manifest.json
+        ----------------------------------------
+        {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"background\\":{\\"service_worker\\":\\"background.js\\"},\\"content_scripts\\":[{\\"matches\\":[\\"*://*.google.com/*\\"],\\"js\\":[\\"content-scripts/content.js\\"]},{\\"matches\\":[\\"*://*.duckduckgo.com/*\\"],\\"js\\":[\\"content-scripts/named.js\\"]}]}"
+      `);
+    expect(await project.fileExists('.output/chrome-mv3/background.js'));
+    expect(
+      await project.fileExists('.output/chrome-mv3/content-scripts/content.js'),
+    );
+    expect(
+      await project.fileExists('.output/chrome-mv3/content-scripts/named.js'),
+    );
+    expect(await project.fileExists('.output/chrome-mv3/unlisted.js'));
+  });
 });

e2e/tests/react.test.ts

@@ -35,9 +35,9 @@ describe('React', () => {
     ).toBe(true);
     expect(await project.serializeFile('.output/chrome-mv3/manifest.json'))
       .toMatchInlineSnapshot(`
-      ".output/chrome-mv3/manifest.json
-      ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"content_scripts\\":[{\\"matches\\":\\"<all_urls>\\",\\"js\\":[\\"content-scripts/demo.js\\"]}]}"
-    `);
+        ".output/chrome-mv3/manifest.json
+        ----------------------------------------
+        {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"content_scripts\\":[{\\"matches\\":\\"<all_urls>\\",\\"js\\":[\\"content-scripts/demo.js\\"]}]}"
+      `);
   });
 });

e2e/tests/remote-code.test.ts

@@ -5,7 +5,11 @@ describe('Remote Code', () => {
   it('should download "url:*" modules and include them in the final bundle', async () => {
     const url = 'https://code.jquery.com/jquery-3.7.1.slim.min.js';
     const project = new TestProject();
-    project.addFile('entrypoints/popup.ts', `import "url:${url}"`);
+    project.addFile(
+      'entrypoints/popup.ts',
+      `import "url:${url}"
+      export default defineUnlistedScript(() => {})`,
+    );
 
     await project.build();
 

e2e/tests/user-config.test.ts

@@ -28,7 +28,7 @@ describe('User Config', () => {
       ================================================================================
       .output/chrome-mv3/manifest.json
       ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"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\\",\\"background\\":{\\"service_worker\\":\\"background.js\\"}}"
     `);
   });
 
@@ -54,7 +54,7 @@ describe('User Config', () => {
       ================================================================================
       .output/chrome-mv3/manifest.json
       ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"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\\",\\"background\\":{\\"service_worker\\":\\"background.js\\"}}"
     `);
   });
 
@@ -82,7 +82,7 @@ describe('User Config', () => {
     expect(output).toMatchInlineSnapshot(`
       ".output/chrome-mv3/manifest.json
       ----------------------------------------
-      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"version_name\\":\\"0.0.0-test\\",\\"example_customization\\":[\\"production\\",\\"chrome\\",\\"3\\",\\"build\\"]}"
+      {\\"manifest_version\\":3,\\"name\\":\\"E2E Extension\\",\\"description\\":\\"Example description\\",\\"version\\":\\"0.0.0\\",\\"example_customization\\":[\\"production\\",\\"chrome\\",\\"3\\",\\"build\\"]}"
     `);
   });
 });

e2e/utils.ts

@@ -24,7 +24,7 @@ export class TestProject {
           {
             name: 'E2E Extension',
             description: 'Example description',
-            version: '0.0.0-test',
+            version: '0.0.0',
             dependencies: {
               wxt: '../../..',
             },

package.json

@@ -1,10 +1,10 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.7.2",
+  "version": "0.8.1",
   "description": "Next gen framework for developing web extensions",
   "engines": {
-    "node": ">=18.16.0",
+    "node": ">=18",
     "pnpm": ">=8"
   },
   "repository": {
@@ -44,6 +44,10 @@
       "import": "./dist/client.js",
       "types": "./dist/client.d.ts"
     },
+    "./sandbox": {
+      "import": "./dist/sandbox.js",
+      "types": "./dist/sandbox.d.ts"
+    },
     "./browser": {
       "import": "./dist/browser.js",
       "types": "./dist/browser.d.ts"
@@ -59,9 +63,10 @@
     "test:coverage": "vitest run --coverage.enabled --coverage.exclude=e2e --coverage.exclude=src/testing",
     "prepare": "simple-git-hooks",
     "prepublish": "pnpm -s build",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
+    "docs:gen": "typedoc --options docs/typedoc.json",
+    "docs:dev": "pnpm -s docs:gen && vitepress dev docs",
+    "docs:build": "pnpm -s docs:gen && vitepress build docs",
+    "docs:preview": "pnpm -s docs:gen && vitepress preview docs",
     "sync-releases": "pnpx changelogen@latest gh release"
   },
   "dependencies": {
@@ -90,7 +95,7 @@
     "prompts": "^2.4.2",
     "rollup-plugin-visualizer": "^5.9.2",
     "unimport": "^3.1.0",
-    "vite": "^4.4.7",
+    "vite": "^4.4.11",
     "web-ext-run": "^0.1.0",
     "webextension-polyfill": "^0.10.0",
     "zip-dir": "^2.0.0"
@@ -99,9 +104,9 @@
     "@faker-js/faker": "^8.0.2",
     "@types/fs-extra": "^11.0.1",
     "@types/lodash.merge": "^4.6.7",
-    "@types/node": "^20.4.5",
+    "@types/node": "^20.8.6",
     "@types/prompts": "^2.4.4",
-    "@vitest/coverage-v8": "^0.34.1",
+    "@vitest/coverage-v8": "^0.34.6",
     "execa": "^7.2.0",
     "jsdom": "^22.1.0",
     "lint-staged": "^14.0.0",
@@ -109,13 +114,15 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.1",
     "simple-git-hooks": "^2.9.0",
-    "ts-morph": "^20.0.0",
     "tsup": "^7.1.0",
     "tsx": "^3.12.7",
+    "typedoc": "^0.25.2",
+    "typedoc-plugin-markdown": "4.0.0-next.23",
+    "typedoc-vitepress-theme": "1.0.0-next.3",
     "typescript": "^5.2.2",
     "vitepress": "1.0.0-rc.10",
-    "vitest": "^0.34.1",
-    "vitest-mock-extended": "^1.1.4",
+    "vitest": "^0.34.6",
+    "vitest-mock-extended": "^1.3.1",
     "vue": "^3.3.4",
     "webextension-polyfill": "^0.10.0"
   },

pnpm-lock.yaml

@@ -84,8 +84,8 @@ importers:
         specifier: ^3.1.0
         version: 3.3.0
       vite:
-        specifier: ^4.4.7
-        version: 4.4.9(@types/node@20.5.9)
+        specifier: ^4.4.11
+        version: 4.4.11(@types/node@20.8.6)
       web-ext-run:
         specifier: ^0.1.0
         version: 0.1.0
@@ -106,14 +106,14 @@ importers:
         specifier: ^4.6.7
         version: 4.6.7
       '@types/node':
-        specifier: ^20.4.5
-        version: 20.5.9
+        specifier: ^20.8.6
+        version: 20.8.6
       '@types/prompts':
         specifier: ^2.4.4
         version: 2.4.4
       '@vitest/coverage-v8':
-        specifier: ^0.34.1
-        version: 0.34.1(vitest@0.34.3)
+        specifier: ^0.34.6
+        version: 0.34.6(vitest@0.34.6)
       execa:
         specifier: ^7.2.0
         version: 7.2.0
@@ -135,27 +135,33 @@ importers:
       simple-git-hooks:
         specifier: ^2.9.0
         version: 2.9.0
-      ts-morph:
-        specifier: ^20.0.0
-        version: 20.0.0
       tsup:
         specifier: ^7.1.0
         version: 7.2.0(typescript@5.2.2)
       tsx:
         specifier: ^3.12.7
         version: 3.12.8
+      typedoc:
+        specifier: ^0.25.2
+        version: 0.25.2(typescript@5.2.2)
+      typedoc-plugin-markdown:
+        specifier: 4.0.0-next.23
+        version: 4.0.0-next.23(typedoc@0.25.2)
+      typedoc-vitepress-theme:
+        specifier: 1.0.0-next.3
+        version: 1.0.0-next.3(typedoc-plugin-markdown@4.0.0-next.23)
       typescript:
         specifier: ^5.2.2
         version: 5.2.2
       vitepress:
         specifier: 1.0.0-rc.10
-        version: 1.0.0-rc.10(@types/node@20.5.9)
+        version: 1.0.0-rc.10(@types/node@20.8.6)
       vitest:
-        specifier: ^0.34.1
-        version: 0.34.3(jsdom@22.1.0)
+        specifier: ^0.34.6
+        version: 0.34.6(jsdom@22.1.0)
       vitest-mock-extended:
-        specifier: ^1.1.4
-        version: 1.3.0(typescript@5.2.2)(vitest@0.34.3)
+        specifier: ^1.3.1
+        version: 1.3.1(typescript@5.2.2)(vitest@0.34.6)
       vue:
         specifier: ^3.3.4
         version: 3.3.4
@@ -864,8 +870,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /@jest/schemas@29.6.0:
-    resolution: {integrity: sha512-rxLjXyJBTL4LQeJW3aKo0M/+GkCOXsO+8i9Iu7eDb6KwtP65ayoDsitrdPBtujxQ88k4wI2FNYfa6TOGwSn6cQ==}
+  /@jest/schemas@29.6.3:
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@sinclair/typebox': 0.27.8
@@ -978,15 +984,6 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
-  /@ts-morph/common@0.21.0:
-    resolution: {integrity: sha512-ES110Mmne5Vi4ypUKrtVQfXFDtCsDXiUiGxF6ILVlE90dDD4fdpC1LSjydl/ml7xJWKSDZwUYD2zkOePMSrPBA==}
-    dependencies:
-      fast-glob: 3.3.1
-      minimatch: 7.4.6
-      mkdirp: 2.1.6
-      path-browserify: 1.0.1
-    dev: true
-
   /@types/chai-subset@1.3.3:
     resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
     dependencies:
@@ -1005,7 +1002,7 @@ packages:
     resolution: {integrity: sha512-c0hrgAOVYr21EX8J0jBMXGLMgJqVf/v6yxi0dLaJboW9aQPh16Id+z6w2Tx1hm+piJOLv8xPfVKZCLfjPw/IMQ==}
     dependencies:
       '@types/jsonfile': 6.1.1
-      '@types/node': 20.5.9
+      '@types/node': 20.8.6
     dev: true
 
   /@types/http-cache-semantics@4.0.1:
@@ -1019,7 +1016,7 @@ packages:
   /@types/jsonfile@6.1.1:
     resolution: {integrity: sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==}
     dependencies:
-      '@types/node': 20.5.9
+      '@types/node': 20.8.6
     dev: true
 
   /@types/lodash.merge@4.6.7:
@@ -1036,13 +1033,15 @@ packages:
     resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
     dev: false
 
-  /@types/node@20.5.9:
-    resolution: {integrity: sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==}
+  /@types/node@20.8.6:
+    resolution: {integrity: sha512-eWO4K2Ji70QzKUqRy6oyJWUeB7+g2cRagT3T/nxYibYcT4y2BDL8lqolRXjTHmkZCdJfIPaY73KbJAZmcryxTQ==}
+    dependencies:
+      undici-types: 5.25.3
 
   /@types/prompts@2.4.4:
     resolution: {integrity: sha512-p5N9uoTH76lLvSAaYSZtBCdEXzpOOufsRjnhjVSrZGXikVGHX9+cc9ERtHRV4hvBKHyZb1bg4K+56Bd2TqUn4A==}
     dependencies:
-      '@types/node': 20.5.9
+      '@types/node': 20.8.6
       kleur: 3.0.3
     dev: true
 
@@ -1080,8 +1079,8 @@ packages:
     resolution: {integrity: sha512-Sdg+E2F5JUbhkE1qX15QUxpyhfMFKRGJqND9nb1C0gNN4NR7kCV31/1GvNbg6Xe+m/JElJ9/lG5kepMzjGPuQw==}
     dev: false
 
-  /@vitest/coverage-v8@0.34.1(vitest@0.34.3):
-    resolution: {integrity: sha512-lRgUwjTMr8idXEbUPSNH4jjRZJXJCVY3BqUa+LDXyJVe3pldxYMn/r0HMqatKUGTp0Kyf1j5LfFoY6kRqRp7jw==}
+  /@vitest/coverage-v8@0.34.6(vitest@0.34.6):
+    resolution: {integrity: sha512-fivy/OK2d/EsJFoEoxHFEnNGTg+MmdZBAVK9Ka4qhXR2K3J0DS08vcGVwzDtXSuUMabLv4KtPcpSKkcMXFDViw==}
     peerDependencies:
       vitest: '>=0.32.0 <1'
     dependencies:
@@ -1096,47 +1095,47 @@ packages:
       std-env: 3.3.3
       test-exclude: 6.0.0
       v8-to-istanbul: 9.1.0
-      vitest: 0.34.3(jsdom@22.1.0)
+      vitest: 0.34.6(jsdom@22.1.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitest/expect@0.34.3:
-    resolution: {integrity: sha512-F8MTXZUYRBVsYL1uoIft1HHWhwDbSzwAU9Zgh8S6WFC3YgVb4AnFV2GXO3P5Em8FjEYaZtTnQYoNwwBrlOMXgg==}
+  /@vitest/expect@0.34.6:
+    resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==}
     dependencies:
-      '@vitest/spy': 0.34.3
-      '@vitest/utils': 0.34.3
-      chai: 4.3.7
+      '@vitest/spy': 0.34.6
+      '@vitest/utils': 0.34.6
+      chai: 4.3.10
     dev: true
 
-  /@vitest/runner@0.34.3:
-    resolution: {integrity: sha512-lYNq7N3vR57VMKMPLVvmJoiN4bqwzZ1euTW+XXYH5kzr3W/+xQG3b41xJn9ChJ3AhYOSoweu974S1V3qDcFESA==}
+  /@vitest/runner@0.34.6:
+    resolution: {integrity: sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==}
     dependencies:
-      '@vitest/utils': 0.34.3
+      '@vitest/utils': 0.34.6
       p-limit: 4.0.0
       pathe: 1.1.1
     dev: true
 
-  /@vitest/snapshot@0.34.3:
-    resolution: {integrity: sha512-QyPaE15DQwbnIBp/yNJ8lbvXTZxS00kRly0kfFgAD5EYmCbYcA+1EEyRalc93M0gosL/xHeg3lKAClIXYpmUiQ==}
+  /@vitest/snapshot@0.34.6:
+    resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==}
     dependencies:
-      magic-string: 0.30.3
+      magic-string: 0.30.2
       pathe: 1.1.1
-      pretty-format: 29.6.0
+      pretty-format: 29.7.0
     dev: true
 
-  /@vitest/spy@0.34.3:
-    resolution: {integrity: sha512-N1V0RFQ6AI7CPgzBq9kzjRdPIgThC340DGjdKdPSE8r86aUSmeliTUgkTqLSgtEwWWsGfBQ+UetZWhK0BgJmkQ==}
+  /@vitest/spy@0.34.6:
+    resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==}
     dependencies:
-      tinyspy: 2.1.1
+      tinyspy: 2.2.0
     dev: true
 
-  /@vitest/utils@0.34.3:
-    resolution: {integrity: sha512-kiSnzLG6m/tiT0XEl4U2H8JDBjFtwVlaE8I3QfGiMFR0QvnRDfYfdP3YvTBWM/6iJDAyaPY6yVQiCTUc7ZzTHA==}
+  /@vitest/utils@0.34.6:
+    resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==}
     dependencies:
-      diff-sequences: 29.4.3
-      loupe: 2.3.6
-      pretty-format: 29.6.0
+      diff-sequences: 29.6.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
     dev: true
 
   /@vue/compiler-core@3.3.4:
@@ -1616,15 +1615,15 @@ packages:
     engines: {node: '>=14.16'}
     dev: false
 
-  /chai@4.3.7:
-    resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
+  /chai@4.3.10:
+    resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==}
     engines: {node: '>=4'}
     dependencies:
       assertion-error: 1.1.0
-      check-error: 1.0.2
+      check-error: 1.0.3
       deep-eql: 4.1.3
-      get-func-name: 2.0.0
-      loupe: 2.3.6
+      get-func-name: 2.0.2
+      loupe: 2.3.7
       pathval: 1.1.1
       type-detect: 4.0.8
     dev: true
@@ -1641,8 +1640,10 @@ packages:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
-  /check-error@1.0.2:
-    resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==}
+  /check-error@1.0.3:
+    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
+    dependencies:
+      get-func-name: 2.0.2
     dev: true
 
   /chokidar@3.5.3:
@@ -1657,7 +1658,7 @@ packages:
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
 
   /chownr@2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
@@ -1669,7 +1670,7 @@ packages:
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
-      '@types/node': 20.5.9
+      '@types/node': 20.8.6
       escape-string-regexp: 4.0.0
       is-wsl: 2.2.0
       lighthouse-logger: 1.4.2
@@ -1715,10 +1716,6 @@ packages:
       wrap-ansi: 7.0.0
     dev: false
 
-  /code-block-writer@12.0.0:
-    resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==}
-    dev: true
-
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1960,8 +1957,8 @@ packages:
     resolution: {integrity: sha512-FJ9RDpf3GicEBvzI3jxc2XhHzbqD8p4ANw/1kPsFBfTvP1b7Gn/Lg1vO7R9J4IVgoMbyUmFrFGZafJ1hPZpvlg==}
     dev: false
 
-  /diff-sequences@29.4.3:
-    resolution: {integrity: sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==}
+  /diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dev: true
 
@@ -2329,8 +2326,8 @@ packages:
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
-  /fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
@@ -2371,8 +2368,8 @@ packages:
     engines: {node: 6.* || 8.* || >= 10.*}
     dev: false
 
-  /get-func-name@2.0.0:
-    resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==}
+  /get-func-name@2.0.2:
+    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
     dev: true
 
   /get-intrinsic@1.2.1:
@@ -3211,10 +3208,10 @@ packages:
       js-tokens: 4.0.0
     dev: false
 
-  /loupe@2.3.6:
-    resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
+  /loupe@2.3.7:
+    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
     dependencies:
-      get-func-name: 2.0.0
+      get-func-name: 2.0.2
     dev: true
 
   /lowercase-keys@3.0.0:
@@ -3228,6 +3225,10 @@ packages:
     dependencies:
       yallist: 4.0.0
 
+  /lunr@2.3.9:
+    resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==}
+    dev: true
+
   /magic-string@0.30.2:
     resolution: {integrity: sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==}
     engines: {node: '>=12'}
@@ -3256,6 +3257,12 @@ packages:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
     dev: true
 
+  /marked@4.3.0:
+    resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    dev: true
+
   /marky@1.2.5:
     resolution: {integrity: sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==}
     dev: false
@@ -3316,19 +3323,11 @@ packages:
     dependencies:
       brace-expansion: 1.1.11
 
-  /minimatch@7.4.6:
-    resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==}
-    engines: {node: '>=10'}
-    dependencies:
-      brace-expansion: 2.0.1
-    dev: true
-
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
-    dev: false
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@@ -3372,12 +3371,6 @@ packages:
     hasBin: true
     dev: false
 
-  /mkdirp@2.1.6:
-    resolution: {integrity: sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dev: true
-
   /mlly@1.4.0:
     resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==}
     dependencies:
@@ -3393,7 +3386,7 @@ packages:
       acorn: 8.10.0
       pathe: 1.1.1
       pkg-types: 1.0.3
-      ufo: 1.3.0
+      ufo: 1.3.1
 
   /moment@2.29.4:
     resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
@@ -3664,10 +3657,6 @@ packages:
       entities: 4.5.0
     dev: true
 
-  /path-browserify@1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
-    dev: true
-
   /path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -3784,11 +3773,11 @@ packages:
     hasBin: true
     dev: true
 
-  /pretty-format@29.6.0:
-    resolution: {integrity: sha512-XH+D4n7Ey0iSR6PdAnBs99cWMZdGsdKrR33iUHQNr79w1szKTCIZDVdXuccAsHVwDBp0XeWPfNEoaxP9EZgRmQ==}
+  /pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@jest/schemas': 29.6.0
+      '@jest/schemas': 29.6.3
       ansi-styles: 5.2.0
       react-is: 18.2.0
     dev: true
@@ -4035,7 +4024,7 @@ packages:
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /rollup@3.28.0:
@@ -4043,7 +4032,7 @@ packages:
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
 
   /rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
@@ -4494,8 +4483,8 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
-  /tinyspy@2.1.1:
-    resolution: {integrity: sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==}
+  /tinyspy@2.2.0:
+    resolution: {integrity: sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==}
     engines: {node: '>=14.0.0'}
     dev: true
 
@@ -4557,13 +4546,6 @@ packages:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
 
-  /ts-morph@20.0.0:
-    resolution: {integrity: sha512-JVmEJy2Wow5n/84I3igthL9sudQ8qzjh/6i4tmYCm6IqYyKFlNbJZi7oBdjyqcWSWYRu3CtL0xbT6fS03ESZIg==}
-    dependencies:
-      '@ts-morph/common': 0.21.0
-      code-block-writer: 12.0.0
-    dev: true
-
   /tslib@2.6.0:
     resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==}
     dev: false
@@ -4612,7 +4594,7 @@ packages:
       '@esbuild-kit/core-utils': 3.2.2
       '@esbuild-kit/esm-loader': 2.5.5
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /type-detect@4.0.8:
@@ -4652,6 +4634,36 @@ packages:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
     dev: false
 
+  /typedoc-plugin-markdown@4.0.0-next.23(typedoc@0.25.2):
+    resolution: {integrity: sha512-bKD0LnrQxUTbuDRiJfCWYLlzyERuskWldJ5eWKKuNY38xBOyBhSN8P+vD5KxlJoAifTOm76MK58sNrl4wgOoWg==}
+    peerDependencies:
+      typedoc: '>=0.25.0'
+    dependencies:
+      typedoc: 0.25.2(typescript@5.2.2)
+    dev: true
+
+  /typedoc-vitepress-theme@1.0.0-next.3(typedoc-plugin-markdown@4.0.0-next.23):
+    resolution: {integrity: sha512-MPVXYNu+pU3KgB7he3gdKfhEj1CD44uEwIxSp+ojaVG6jN1Iwo7/D2tNwmzszM3Yocz6IBvNb9EVfZBXzyWG/w==}
+    peerDependencies:
+      typedoc-plugin-markdown: '>=4.0.0-next.19'
+    dependencies:
+      typedoc-plugin-markdown: 4.0.0-next.23(typedoc@0.25.2)
+    dev: true
+
+  /typedoc@0.25.2(typescript@5.2.2):
+    resolution: {integrity: sha512-286F7BeATBiWe/qC4PCOCKlSTwfnsLbC/4cZ68oGBbvAqb9vV33quEOXx7q176OXotD+JdEerdQ1OZGJ818lnA==}
+    engines: {node: '>= 16'}
+    hasBin: true
+    peerDependencies:
+      typescript: 4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x
+    dependencies:
+      lunr: 2.3.9
+      marked: 4.3.0
+      minimatch: 9.0.3
+      shiki: 0.14.3
+      typescript: 5.2.2
+    dev: true
+
   /typescript@5.2.2:
     resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}
@@ -4660,6 +4672,10 @@ packages:
 
   /ufo@1.3.0:
     resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==}
+    dev: false
+
+  /ufo@1.3.1:
+    resolution: {integrity: sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==}
 
   /uhyphen@0.2.0:
     resolution: {integrity: sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==}
@@ -4674,6 +4690,9 @@ packages:
       which-boxed-primitive: 1.0.2
     dev: true
 
+  /undici-types@5.25.3:
+    resolution: {integrity: sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==}
+
   /unimport@3.3.0:
     resolution: {integrity: sha512-3jhq3ZG5hFZzrWGDCpx83kjPzefP/EeuKkIO1T0MA4Zwj+dO/Og1mFvZ4aZ5WSDm0FVbbdVIRH1zKBG7c4wOpg==}
     dependencies:
@@ -4775,8 +4794,8 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-node@0.34.3(@types/node@20.5.9):
-    resolution: {integrity: sha512-+0TzJf1g0tYXj6tR2vEyiA42OPq68QkRZCu/ERSo2PtsDJfBpDyEfuKbRvLmZqi/CgC7SCBtyC+WjTGNMRIaig==}
+  /vite-node@0.34.6(@types/node@20.8.6):
+    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     dependencies:
@@ -4785,7 +4804,7 @@ packages:
       mlly: 1.4.2
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.9(@types/node@20.5.9)
+      vite: 4.4.11(@types/node@20.8.6)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -4797,8 +4816,8 @@ packages:
       - terser
     dev: true
 
-  /vite@4.4.9(@types/node@20.5.9):
-    resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
+  /vite@4.4.11(@types/node@20.8.6):
+    resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -4825,14 +4844,14 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.5.9
+      '@types/node': 20.8.6
       esbuild: 0.18.20
       postcss: 8.4.27
       rollup: 3.28.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
 
-  /vitepress@1.0.0-rc.10(@types/node@20.5.9):
+  /vitepress@1.0.0-rc.10(@types/node@20.8.6):
     resolution: {integrity: sha512-+MsahIWqq5WUEmj6MR4obcKYbT7im07jZPCQPdNJExkeOSbOAJ4xypSLx88x7rvtzWHhHc5aXbOhCRvGEGjFrw==}
     hasBin: true
     dependencies:
@@ -4845,7 +4864,7 @@ packages:
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.3
-      vite: 4.4.9(@types/node@20.5.9)
+      vite: 4.4.11(@types/node@20.8.6)
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -4874,19 +4893,19 @@ packages:
       - universal-cookie
     dev: true
 
-  /vitest-mock-extended@1.3.0(typescript@5.2.2)(vitest@0.34.3):
-    resolution: {integrity: sha512-qolbgansCq7huhmUUlHXOUYlejL86+jFkfyeoxGR9IWKhWcIjI3Ek2J9eTwIFfVzNkaTCpuJizEg9EqDJuuOkg==}
+  /vitest-mock-extended@1.3.1(typescript@5.2.2)(vitest@0.34.6):
+    resolution: {integrity: sha512-OpghYjh4BDuQ/Mzs3lFMQ1QRk9D8/2O9T47MLUA5eLn7K4RWIy+MfIivYOWEyxjTENjsBnzgMihDjyNalN/K0Q==}
     peerDependencies:
       typescript: 3.x || 4.x || 5.x
       vitest: '>=0.31.1'
     dependencies:
       ts-essentials: 9.3.2(typescript@5.2.2)
       typescript: 5.2.2
-      vitest: 0.34.3(jsdom@22.1.0)
+      vitest: 0.34.6(jsdom@22.1.0)
     dev: true
 
-  /vitest@0.34.3(jsdom@22.1.0):
-    resolution: {integrity: sha512-7+VA5Iw4S3USYk+qwPxHl8plCMhA5rtfwMjgoQXMT7rO5ldWcdsdo3U1QD289JgglGK4WeOzgoLTsGFu6VISyQ==}
+  /vitest@0.34.6(jsdom@22.1.0):
+    resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     peerDependencies:
@@ -4918,16 +4937,16 @@ packages:
     dependencies:
       '@types/chai': 4.3.5
       '@types/chai-subset': 1.3.3
-      '@types/node': 20.5.9
-      '@vitest/expect': 0.34.3
-      '@vitest/runner': 0.34.3
-      '@vitest/snapshot': 0.34.3
-      '@vitest/spy': 0.34.3
-      '@vitest/utils': 0.34.3
+      '@types/node': 20.8.6
+      '@vitest/expect': 0.34.6
+      '@vitest/runner': 0.34.6
+      '@vitest/snapshot': 0.34.6
+      '@vitest/spy': 0.34.6
+      '@vitest/utils': 0.34.6
       acorn: 8.10.0
       acorn-walk: 8.2.0
       cac: 6.7.14
-      chai: 4.3.7
+      chai: 4.3.10
       debug: 4.3.4
       jsdom: 22.1.0
       local-pkg: 0.4.3
@@ -4938,8 +4957,8 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.0
       tinypool: 0.7.0
-      vite: 4.4.9(@types/node@20.5.9)
-      vite-node: 0.34.3(@types/node@20.5.9)
+      vite: 4.4.11(@types/node@20.8.6)
+      vite-node: 0.34.6(@types/node@20.8.6)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

scripts/build.ts

@@ -10,7 +10,7 @@ const spinner = ora('Building WXT').start();
 
 const startTime = Date.now();
 const outDir = 'dist';
-const virtualEntrypoints = ['background', 'content-script'];
+const virtualEntrypoints = ['background', 'content-script', 'unlisted-script'];
 
 await fs.rm(outDir, { recursive: true, force: true });
 
@@ -48,6 +48,13 @@ await Promise.all([
     silent: true,
     external: ['vite'],
   }),
+  tsup.build({
+    entry: { sandbox: 'src/client/sandbox/index.ts' },
+    format: ['esm'],
+    sourcemap: 'inline',
+    dts: true,
+    silent: true,
+  }),
   ...virtualEntrypoints.map((entryName) =>
     tsup.build({
       entry: {

src/client/__tests__/defineBackground.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from 'vitest';
+import { defineBackground } from '../defineBackground';
+import { BackgroundDefinition } from '../../core/types';
+
+describe('defineBackground', () => {
+  it('should return the object definition when given an object', () => {
+    const definition: BackgroundDefinition = {
+      include: [''],
+      persistent: false,
+      main: vi.fn(),
+    };
+
+    const actual = defineBackground(definition);
+
+    expect(actual).toEqual(definition);
+  });
+
+  it('should return the object definition when given a main function', () => {
+    const main = vi.fn();
+
+    const actual = defineBackground(main);
+
+    expect(actual).toEqual({ main });
+  });
+});

src/client/__tests__/defineContentScript.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it, vi } from 'vitest';
+import { defineContentScript } from '../defineContentScript';
+import { ContentScriptDefinition } from '../../core/types';
+
+describe('defineContentScript', () => {
+  it('should return the object passed in', () => {
+    const definition: ContentScriptDefinition = {
+      matches: [],
+      include: [''],
+      main: vi.fn(),
+    };
+
+    const actual = defineContentScript(definition);
+
+    expect(actual).toEqual(definition);
+  });
+});

src/client/browser.ts

@@ -1,3 +1,6 @@
+/**
+ * @module wxt/browser
+ */
 import originalBrowser, { Browser, Runtime, I18n } from 'webextension-polyfill';
 
 export interface AugmentedBrowser extends Browser {

src/client/createContentScriptUi.ts

@@ -7,7 +7,7 @@ import { ContentScriptContext } from '.';
  * Utility for mounting content script UI's with isolated styles. Automatically removed from the DOM
  * when the content script's context is invalidated.
  *
- * See <https://wxt.dev/entrypoints/content-scripts.html#ui> for full documentation.
+ * See https://wxt.dev/entrypoints/content-scripts.html#ui for full documentation.
  *
  * @example
  * // entrypoints/example-ui.content/index.ts
@@ -31,10 +31,10 @@ import { ContentScriptContext } from '.';
  *   }
  * })
  */
-export async function createContentScriptUi<T>(
+export async function createContentScriptUi<TApp>(
   ctx: ContentScriptContext,
-  options: ContentScriptUiOptions<T>,
-): Promise<ContentScriptUi<T>> {
+  options: ContentScriptUiOptions<TApp>,
+): Promise<ContentScriptUi<TApp>> {
   const css = [options.css ?? ''];
   if (ctx.options?.cssInjectionMode === 'ui') {
     css.push(await loadCss());
@@ -62,7 +62,7 @@ export async function createContentScriptUi<T>(
     return resolved ?? undefined;
   };
 
-  let mounted: T;
+  let mounted: TApp;
 
   const mount = () => {
     const anchor = getAnchor();
@@ -173,7 +173,7 @@ async function loadCss(): Promise<string> {
   }
 }
 
-export interface ContentScriptUi<T> {
+export interface ContentScriptUi<TApp> {
   /**
    * The `HTMLElement` hosting the shadow root used to isolate the UI's styles. This is the element
    * that get's added to the DOM. This element's style is not isolated from the webpage.
@@ -191,7 +191,7 @@ export interface ContentScriptUi<T> {
   /**
    * Custom data returned from the `options.mount` function.
    */
-  mounted: T;
+  mounted: TApp;
   /**
    * Function that mounts or remounts the UI on the page.
    */
@@ -202,7 +202,7 @@ export interface ContentScriptUi<T> {
   remove: () => void;
 }
 
-interface BaseContentScriptUiOptions<T> {
+interface BaseContentScriptUiOptions<TApp> {
   /**
    * The name of the custom component used to host the ShadowRoot. Must be kebab-case.
    */
@@ -234,50 +234,53 @@ interface BaseContentScriptUiOptions<T> {
    *
    * Optionally return a value that can be accessed at `ui.mounted` or in the `onRemove` callback.
    */
-  mount: (container: Element) => T;
+  mount: (container: Element) => TApp;
   /**
    * Callback called when the UI is removed from the webpage. Use to cleanup your UI, like
    * unmounting your vue or react apps.
    */
-  onRemove?: (mounted: T) => void;
+  onRemove?: (mounted: TApp) => void;
   /**
    * Custom CSS text to apply to the UI. If your content script imports/generates CSS and you've
    * set `cssInjectionMode: "ui"`, the imported CSS will be included automatically. You do not need
    * to pass those styles in here. This is for any additional styles not in the imported CSS.
    *
-   * See <https://wxt.dev/entrypoints/content-scripts.html#ui> for more info.
+   * See https://wxt.dev/entrypoints/content-scripts.html#ui for more info.
    */
   css?: string;
 }
 
-export type OverlayContentScriptUiOptions<T> = BaseContentScriptUiOptions<T> & {
-  type: 'overlay';
-  /**
-   * When using `type: "overlay"`, the mounted element is 0px by 0px in size. Alignment specifies
-   * which corner is aligned with that 0x0 pixel space.
-   *
-   * @default "top-left"
-   */
-  alignment?: ContentScriptUiOverlayAlignment;
-  /**
-   * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
-   * content.
-   */
-  zIndex?: number;
-};
+export type OverlayContentScriptUiOptions<TApp> =
+  BaseContentScriptUiOptions<TApp> & {
+    type: 'overlay';
+    /**
+     * When using `type: "overlay"`, the mounted element is 0px by 0px in size. Alignment specifies
+     * which corner is aligned with that 0x0 pixel space.
+     *
+     * @default "top-left"
+     */
+    alignment?: ContentScriptUiOverlayAlignment;
+    /**
+     * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
+     * content.
+     */
+    zIndex?: number;
+  };
 
-export type ModalContentScriptUiOptions<T> = BaseContentScriptUiOptions<T> & {
-  type: 'modal';
-  /**
-   * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
-   * content.
-   */
-  zIndex?: number;
-};
+export type ModalContentScriptUiOptions<TApp> =
+  BaseContentScriptUiOptions<TApp> & {
+    type: 'modal';
+    /**
+     * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
+     * content.
+     */
+    zIndex?: number;
+  };
 
-export type InlineContentScriptUiOptions<T> = BaseContentScriptUiOptions<T> & {
-  type: 'inline';
-};
+export type InlineContentScriptUiOptions<TApp> =
+  BaseContentScriptUiOptions<TApp> & {
+    type: 'inline';
+  };
 
 export type ContentScriptUiOverlayAlignment =
   | 'top-left'
@@ -292,7 +295,7 @@ export type ContentScriptAppendMode =
   | 'before'
   | 'after';
 
-export type ContentScriptUiOptions<T> =
-  | OverlayContentScriptUiOptions<T>
-  | ModalContentScriptUiOptions<T>
-  | InlineContentScriptUiOptions<T>;
+export type ContentScriptUiOptions<TApp> =
+  | OverlayContentScriptUiOptions<TApp>
+  | ModalContentScriptUiOptions<TApp>
+  | InlineContentScriptUiOptions<TApp>;

src/client/defineBackground.ts

@@ -1,12 +1,12 @@
-import { BackgroundScriptDefintition } from '..';
+import { BackgroundDefinition } from '..';
 
-export function defineBackground(main: () => void): BackgroundScriptDefintition;
+export function defineBackground(main: () => void): BackgroundDefinition;
 export function defineBackground(
-  definition: BackgroundScriptDefintition,
-): BackgroundScriptDefintition;
+  definition: BackgroundDefinition,
+): BackgroundDefinition;
 export function defineBackground(
-  arg: (() => void) | BackgroundScriptDefintition,
-): BackgroundScriptDefintition {
+  arg: (() => void) | BackgroundDefinition,
+): BackgroundDefinition {
   if (typeof arg === 'function') return { main: arg };
   return arg;
 }

src/client/index.ts

@@ -1,3 +1,6 @@
+/**
+ * @module wxt/client
+ */
 export * from './defineContentScript';
 export * from './defineBackground';
 export * from './createContentScriptUi';

src/client/sandbox/__tests__/defineUnlistedScript.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from 'vitest';
+import { defineUnlistedScript } from '../defineUnlistedScript';
+import { UnlistedScriptDefinition } from '../../../core/types';
+
+describe('defineUnlistedScript', () => {
+  it('should return the object definition when given an object', () => {
+    const definition: UnlistedScriptDefinition = {
+      include: [''],
+      main: vi.fn(),
+    };
+
+    const actual = defineUnlistedScript(definition);
+
+    expect(actual).toEqual(definition);
+  });
+
+  it('should return the object definition when given a main function', () => {
+    const main = vi.fn();
+
+    const actual = defineUnlistedScript(main);
+
+    expect(actual).toEqual({ main });
+  });
+});

src/client/sandbox/defineUnlistedScript.ts

@@ -0,0 +1,14 @@
+import { UnlistedScriptDefinition } from '../../core/types';
+
+export function defineUnlistedScript(
+  main: () => void,
+): UnlistedScriptDefinition;
+export function defineUnlistedScript(
+  definition: UnlistedScriptDefinition,
+): UnlistedScriptDefinition;
+export function defineUnlistedScript(
+  arg: (() => void) | UnlistedScriptDefinition,
+): UnlistedScriptDefinition {
+  if (typeof arg === 'function') return { main: arg };
+  return arg;
+}

src/client/sandbox/index.ts

@@ -0,0 +1,4 @@
+/**
+ * @module wxt/sandbox
+ */
+export * from './defineUnlistedScript';

src/client/utils/ContentScriptContext.ts

@@ -10,7 +10,7 @@ import { logger } from './logger';
  * content scripts instead of `window.setTimeout` or `window.setInterval`.
  */
 export class ContentScriptContext extends AbortController {
-  static SCRIPT_STARTED_MESSAGE_TYPE = 'wxt:content-script-started';
+  private static SCRIPT_STARTED_MESSAGE_TYPE = 'wxt:content-script-started';
 
   #isTopFrame = window.self === window.top;
 
@@ -150,6 +150,7 @@ export class ContentScriptContext extends AbortController {
   }
 
   /**
+   * @internal
    * Abort the abort controller and execute all `onInvalidated` listeners.
    */
   notifyInvalidated() {

src/client/virtual-modules/background-entrypoint.ts

@@ -37,6 +37,6 @@ try {
     );
   }
 } catch (err) {
-  logger.error('The background script crashed on startup!');
+  logger.error('The background crashed on startup!');
   throw err;
 }

src/client/virtual-modules/content-script-entrypoint.ts

@@ -9,6 +9,9 @@ import { ContentScriptContext } from '../utils/ContentScriptContext';
 
     await main(ctx);
   } catch (err) {
-    logger.error('The content script crashed on startup!', err);
+    logger.error(
+      `The content script "${__ENTRYPOINT__}" crashed on startup!`,
+      err,
+    );
   }
 })();

src/client/virtual-modules/unlisted-script-entrypoint.ts

@@ -0,0 +1,13 @@
+import definition from 'virtual:user-unlisted-script';
+import { logger } from '../utils/logger';
+
+(async () => {
+  try {
+    await definition.main();
+  } catch (err) {
+    logger.error(
+      `The unlisted script "${__ENTRYPOINT__}" crashed on startup!`,
+      err,
+    );
+  }
+})();

src/client/virtual-modules/virtual-module-globals.d.ts

@@ -6,7 +6,7 @@ declare module '*?raw' {
 }
 
 declare module 'virtual:user-background' {
-  const definition: import('../../').BackgroundScriptDefintition;
+  const definition: import('../../').BackgroundDefinition;
   export default definition;
 }
 
@@ -15,6 +15,11 @@ declare module 'virtual:user-content-script' {
   export default definition;
 }
 
+declare module 'virtual:user-unlisted-script' {
+  const definition: import('../../').UnlistedScriptDefinition;
+  export default definition;
+}
+
 // Globals defined by the vite-plugins/devServerGlobals.ts and utils/globals.ts
 declare const __COMMAND__: 'build' | 'serve';
 declare const __DEV_SERVER_PROTOCOL__: string;

src/core/build/__tests__/findEntrypoints.test.ts

@@ -261,6 +261,43 @@ describe('findEntrypoints', () => {
     });
   });
 
+  it.each<[string, Omit<GenericEntrypoint, 'options'>]>([
+    [
+      'injected.ts',
+      {
+        type: 'unlisted-script',
+        name: 'injected',
+        inputPath: resolve(config.entrypointsDir, 'injected.ts'),
+        outputDir: config.outDir,
+      },
+    ],
+    [
+      'injected/index.ts',
+      {
+        type: 'unlisted-script',
+        name: 'injected',
+        inputPath: resolve(config.entrypointsDir, 'injected/index.ts'),
+        outputDir: config.outDir,
+      },
+    ],
+  ])(
+    'should find and load unlisted-script entrypoint config from %s',
+    async (path, expected) => {
+      const options: GenericEntrypoint['options'] = {};
+      globMock.mockResolvedValueOnce([path]);
+      importEntrypointFileMock.mockResolvedValue(options);
+
+      const entrypoints = await findEntrypoints(config);
+
+      expect(entrypoints).toHaveLength(1);
+      expect(entrypoints[0]).toEqual({ ...expected, options });
+      expect(importEntrypointFileMock).toBeCalledWith(
+        expected.inputPath,
+        config,
+      );
+    },
+  );
+
   it.each<[string, GenericEntrypoint]>([
     // Sandbox
     [
@@ -456,28 +493,6 @@ describe('findEntrypoints', () => {
       },
     ],
 
-    // unlisted-script
-    [
-      'injected.ts',
-      {
-        type: 'unlisted-script',
-        name: 'injected',
-        inputPath: resolve(config.entrypointsDir, 'injected.ts'),
-        outputDir: config.outDir,
-        options: {},
-      },
-    ],
-    [
-      'injected/index.ts',
-      {
-        type: 'unlisted-script',
-        name: 'injected',
-        inputPath: resolve(config.entrypointsDir, 'injected/index.ts'),
-        outputDir: config.outDir,
-        options: {},
-      },
-    ],
-
     // unlisted-style
     [
       'iframe.scss',

src/core/build/buildEntrypoints.ts

@@ -53,7 +53,11 @@ async function buildSingleEntrypoint(
   config: InternalConfig,
 ): Promise<BuildStepOutput> {
   // Should this entrypoint be wrapped by the vite-plugins/virtualEntrypoint plugin?
-  const isVirtual = ['background', 'content-script'].includes(entrypoint.type);
+  const isVirtual = [
+    'background',
+    'content-script',
+    'unlisted-script',
+  ].includes(entrypoint.type);
   const entry = isVirtual
     ? `virtual:wxt-${entrypoint.type}?${entrypoint.inputPath}`
     : entrypoint.inputPath;

src/core/build/findEntrypoints.ts

@@ -1,7 +1,7 @@
 import { relative, resolve } from 'path';
 import {
   BackgroundEntrypoint,
-  BackgroundScriptDefintition,
+  BackgroundDefinition,
   BaseEntrypointOptions,
   ContentScriptDefinition,
   ContentScriptEntrypoint,
@@ -10,6 +10,7 @@ import {
   InternalConfig,
   OptionsEntrypoint,
   PopupEntrypoint,
+  UnlistedScriptDefinition,
 } from '../types';
 import fs from 'fs-extra';
 import { minimatch } from 'minimatch';
@@ -74,15 +75,14 @@ export async function findEntrypoints(
           hasBackground = true;
           break;
         case 'content-script':
-          entrypoint = await getContentScriptEntrypoint(
-            config,
-            getEntrypointName(config.entrypointsDir, path),
-            path,
-          );
+          entrypoint = await getContentScriptEntrypoint(config, path);
           break;
         case 'unlisted-page':
           entrypoint = await getUnlistedPageEntrypoint(config, path);
           break;
+        case 'unlisted-script':
+          entrypoint = await getUnlistedScriptEntrypoint(config, path);
+          break;
         case 'content-script-style':
           entrypoint = {
             type,
@@ -201,12 +201,19 @@ async function getPopupEntrypoint(
     }
   }
 
-  const mv2KeyContent = document
+  const mv2TypeContent = document
     .querySelector("meta[name='manifest.type']")
     ?.getAttribute('content');
-  if (mv2KeyContent) {
+  if (mv2TypeContent) {
     options.mv2Key =
-      mv2KeyContent === 'page_action' ? 'page_action' : 'browser_action';
+      mv2TypeContent === 'page_action' ? 'page_action' : 'browser_action';
+  }
+
+  const browserStyleContent = document
+    .querySelector("meta[name='manifest.browser_style']")
+    ?.getAttribute('content');
+  if (browserStyleContent) {
+    options.browserStyle = browserStyleContent === 'true';
   }
 
   return {
@@ -281,6 +288,35 @@ async function getUnlistedPageEntrypoint(
   };
 }
 
+/**
+ * @param path Absolute path to the script's file.
+ * @param content String contents of the file at the path.
+ */
+async function getUnlistedScriptEntrypoint(
+  config: InternalConfig,
+  path: string,
+): Promise<GenericEntrypoint> {
+  const name = getEntrypointName(config.entrypointsDir, path);
+  const defaultExport = await importEntrypointFile<UnlistedScriptDefinition>(
+    path,
+    config,
+  );
+  if (defaultExport == null) {
+    throw Error(
+      `${name}: Default export not found, did you forget to call "export default defineUnlistedScript(...)"?`,
+    );
+  }
+  const { main: _, ...moduleOptions } = defaultExport;
+  const options: Omit<UnlistedScriptDefinition, 'main'> = moduleOptions;
+  return {
+    type: 'unlisted-script',
+    name,
+    inputPath: path,
+    outputDir: config.outDir,
+    options,
+  };
+}
+
 /**
  * @param path Absolute path to the background's TS file.
  */
@@ -288,19 +324,24 @@ async function getBackgroundEntrypoint(
   config: InternalConfig,
   path: string,
 ): Promise<BackgroundEntrypoint> {
-  let options: Omit<BackgroundScriptDefintition, 'main'> = {};
+  const name = 'background';
+  let options: Omit<BackgroundDefinition, 'main'> = {};
   if (path !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
-    const defaultExport =
-      await importEntrypointFile<BackgroundScriptDefintition>(path, config);
+    const defaultExport = await importEntrypointFile<BackgroundDefinition>(
+      path,
+      config,
+    );
     if (defaultExport == null) {
-      throw Error('Background script does not have a default export');
+      throw Error(
+        `${name}: Default export not found, did you forget to call "export default defineBackground(...)"?`,
+      );
     }
     const { main: _, ...moduleOptions } = defaultExport;
     options = moduleOptions;
   }
   return {
     type: 'background',
-    name: 'background',
+    name,
     inputPath: path,
     outputDir: config.outDir,
     options: {
@@ -316,17 +357,19 @@ async function getBackgroundEntrypoint(
  */
 async function getContentScriptEntrypoint(
   config: InternalConfig,
-  name: string,
   path: string,
 ): Promise<ContentScriptEntrypoint> {
+  const name = getEntrypointName(config.entrypointsDir, path);
   const { main: _, ...options } =
     await importEntrypointFile<ContentScriptDefinition>(path, config);
   if (options == null) {
-    throw Error(`Content script ${name} does not have a default export`);
+    throw Error(
+      `${name}: Default export not found, did you forget to call "export default defineContentScript(...)"?`,
+    );
   }
   return {
     type: 'content-script',
-    name: getEntrypointName(config.entrypointsDir, path),
+    name,
     inputPath: path,
     outputDir: resolve(config.outDir, CONTENT_SCRIPT_OUT_DIR),
     options,
@@ -356,14 +399,14 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
   'devtools.html': 'devtools',
   'devtools/index.html': 'devtools',
 
-  'background.ts': 'background',
-  'background/index.ts': 'background',
+  'background.[jt]s': 'background',
+  'background/index.[jt]s': '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',
+  'content.[jt]s?(x)': 'content-script',
+  'content/index.[jt]s?(x)': 'content-script',
+  '*.content.[jt]s?(x)': 'content-script',
+  '*.content/index.[jt]s?(x)': 'content-script',
   [`content.${CSS_EXTENSIONS_PATTERN}`]: 'content-script-style',
   [`*.content.${CSS_EXTENSIONS_PATTERN}`]: 'content-script-style',
   [`content/index.${CSS_EXTENSIONS_PATTERN}`]: 'content-script-style',
@@ -377,7 +420,7 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
 
   '*.html': 'unlisted-page',
   '*/index.html': 'unlisted-page',
-  '*.ts': 'unlisted-script',
+  '*.[jt]s': 'unlisted-script',
   '*/index.ts': 'unlisted-script',
   [`*.${CSS_EXTENSIONS_PATTERN}`]: 'unlisted-style',
   [`*/index.${CSS_EXTENSIONS_PATTERN}`]: 'unlisted-style',

src/core/clean.ts

@@ -8,6 +8,9 @@ import pc from 'picocolors';
  * Remove generated/temp files from the directory.
  *
  * @param root The directory to look for generated/temp files in. Defaults to `process.cwd()`. Can be relative to `process.cwd()` or absolute.
+ *
+ * @example
+ * await clean();
  */
 export async function clean(root = process.cwd()) {
   consola.info('Cleaning Project');

src/core/types/external.ts

@@ -110,12 +110,12 @@ export interface InlineConfig {
      *
      * 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"
+     * - `{{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"
+     * @default "{{name}}-{{version}}-{{browser}}.zip"
      */
     artifactTemplate?: string;
     /**
@@ -123,12 +123,12 @@ export interface InlineConfig {
      *
      * 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"
+     * - `{{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"
+     * @default "{{name}}-{{version}}-sources.zip"
      */
     sourcesTemplate?: string;
     /**
@@ -343,6 +343,7 @@ export interface PopupEntrypoint extends BaseEntrypoint {
     mv2Key?: 'browser_action' | 'page_action';
     defaultIcon?: Record<string, string>;
     defaultTitle?: string;
+    browserStyle?: boolean;
   } & BaseEntrypointOptions;
 }
 
@@ -416,6 +417,8 @@ export interface ContentScriptDefinition extends ExcludableEntrypoint {
    * - `"manual"` - Exclude the CSS from the manifest. You are responsible for manually loading it
    *   onto the page. Use `browser.runtime.getURL("content-scripts/<name>.css")` to get the file's
    *   URL
+   * - `"ui"` - Exclude the CSS from the manifest. CSS will be automatically added to your UI when
+   *   calling `createContentScriptUi`
    *
    * @default "manifest"
    */
@@ -426,12 +429,19 @@ export interface ContentScriptDefinition extends ExcludableEntrypoint {
   main(ctx: ContentScriptContext): void | Promise<void>;
 }
 
-export interface BackgroundScriptDefintition extends ExcludableEntrypoint {
+export interface BackgroundDefinition extends ExcludableEntrypoint {
   type?: PerBrowserOption<'module'>;
   persistent?: PerBrowserOption<boolean>;
   main(): void;
 }
 
+export interface UnlistedScriptDefinition extends ExcludableEntrypoint {
+  /**
+   * Main function executed when the unlisted script is ran.
+   */
+  main(): void | Promise<void>;
+}
+
 export type PerBrowserOption<T> = T | { [browser: TargetBrowser]: T };
 
 export interface ExcludableEntrypoint {

src/core/utils/__tests__/content-scripts.test.ts

@@ -1,26 +1,36 @@
 import { describe, expect, it } from 'vitest';
 import { hashContentScriptOptions } from '../content-scripts';
+import { fakeInternalConfig } from '../../../testing/fake-objects';
 
 describe('Content Script Utils', () => {
   describe('hashContentScriptOptions', () => {
     it('should return a string containing all the options with defaults applied', () => {
-      const hash = hashContentScriptOptions({ matches: [] });
+      const hash = hashContentScriptOptions(
+        { matches: [] },
+        fakeInternalConfig(),
+      );
 
       expect(hash).toMatchInlineSnapshot(
-        '"[[\\"allFrames\\",false],[\\"excludeGlobs\\",[]],[\\"excludeMatches\\",[]],[\\"includeGlobs\\",[]],[\\"matchAboutBlank\\",false],[\\"matches\\",[]],[\\"matchOriginAsFallback\\",false],[\\"runAt\\",\\"document_idle\\"],[\\"world\\",\\"ISOLATED\\"]]"',
+        '"[[\\"all_frames\\",false],[\\"exclude_globs\\",[]],[\\"exclude_matches\\",[]],[\\"include_globs\\",[]],[\\"match_about_blank\\",false],[\\"match_origin_as_fallback\\",false],[\\"matches\\",[]],[\\"run_at\\",\\"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,
-      });
+      const hash1 = hashContentScriptOptions(
+        {
+          allFrames: true,
+          matches: ['*://google.com/*', '*://duckduckgo.com/*'],
+          matchAboutBlank: false,
+        },
+        fakeInternalConfig(),
+      );
+      const hash2 = hashContentScriptOptions(
+        {
+          matches: ['*://duckduckgo.com/*', '*://google.com/*'],
+          allFrames: true,
+        },
+        fakeInternalConfig(),
+      );
 
       expect(hash1).toBe(hash2);
     });

src/core/utils/__tests__/importEntrypointFile.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { importEntrypointFile } from '../importEntrypointFile';
+import { fakeInternalConfig } from '../../../testing/fake-objects';
+import { resolve } from 'node:path';
+
+const entrypointPath = (filename: string) =>
+  resolve('src/core/utils/__tests__/test-entrypoints', filename);
+
+const config = fakeInternalConfig({
+  imports: false,
+  debug: false,
+  // Run inside the demo folder so that wxt is in the node_modules
+  // WXT must also be built for these tests to pass
+  root: 'demo',
+});
+
+describe('importEntrypointFile', () => {
+  it.each([
+    ['background.ts', { main: expect.any(Function) }],
+    ['content.ts', { main: expect.any(Function), matches: ['<all_urls>'] }],
+    ['unlisted.ts', { main: expect.any(Function) }],
+    ['react.tsx', { main: expect.any(Function) }],
+    ['with-named.ts', { main: expect.any(Function) }],
+  ])(
+    'should return the default export of test-entrypoints/%s',
+    async (file, expected) => {
+      const actual = await importEntrypointFile(entrypointPath(file), config);
+
+      expect(actual).toEqual(expected);
+    },
+  );
+
+  it('should return undefined when there is no default export', async () => {
+    const actual = await importEntrypointFile(
+      entrypointPath('no-default-export.ts'),
+      config,
+    );
+
+    expect(actual).toBeUndefined();
+  });
+});

src/core/utils/__tests__/test-entrypoints/background.ts

@@ -0,0 +1,5 @@
+import { defineBackground } from '../../../../client';
+
+export default defineBackground({
+  main() {},
+});

src/core/utils/__tests__/test-entrypoints/content.ts

@@ -0,0 +1,6 @@
+import { defineContentScript } from '../../../../client';
+
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  main() {},
+});

src/core/utils/__tests__/test-entrypoints/react.tsx

@@ -0,0 +1,3 @@
+import { defineUnlistedScript } from '../../../../client/sandbox';
+
+export default defineUnlistedScript(() => {});

src/core/utils/__tests__/test-entrypoints/unlisted.ts

@@ -0,0 +1,3 @@
+import { defineUnlistedScript } from '../../../../client/sandbox';
+
+export default defineUnlistedScript(() => {});

src/core/utils/__tests__/test-entrypoints/with-named.ts

@@ -0,0 +1,5 @@
+import { defineBackground } from '../../../../client';
+
+export const a = {};
+
+export default defineBackground(() => {});

src/core/utils/auto-imports.ts

@@ -10,7 +10,11 @@ export function getUnimportOptions(
   const defaultOptions: Partial<UnimportOptions> = {
     debugLog: config.logger.debug,
     imports: [{ name: 'defineConfig', from: 'wxt' }],
-    presets: [{ package: 'wxt/client' }, { package: 'wxt/browser' }],
+    presets: [
+      { package: 'wxt/client' },
+      { package: 'wxt/browser' },
+      { package: 'wxt/sandbox' },
+    ],
     warn: config.logger.warn,
     dirs: ['components', 'composables', 'hooks', 'utils'],
   };

src/core/utils/content-scripts.ts

@@ -9,18 +9,27 @@ import { resolvePerBrowserOption } from './entrypoints';
  */
 export function hashContentScriptOptions(
   options: ContentScriptEntrypoint['options'],
+  config: InternalConfig,
 ): string {
-  const withDefaults: ContentScriptEntrypoint['options'] = {
-    excludeGlobs: [],
-    excludeMatches: [],
-    includeGlobs: [],
-    matchAboutBlank: false,
-    matchOriginAsFallback: false,
-    runAt: 'document_idle',
-    allFrames: false,
+  const simplifiedOptions = mapWxtOptionsToContentScript(options, config);
+
+  // Remove undefined fields and use defaults to generate hash
+  Object.keys(simplifiedOptions).forEach((key) => {
+    // @ts-expect-error: key not typed as keyof ...
+    if (simplifiedOptions[key] == null) delete simplifiedOptions[key];
+  });
+
+  const withDefaults: Manifest.ContentScript = {
+    exclude_globs: [],
+    exclude_matches: [],
+    include_globs: [],
+    match_about_blank: false,
+    run_at: 'document_idle',
+    all_frames: false,
+    // @ts-expect-error - not in type
+    match_origin_as_fallback: false,
     world: 'ISOLATED',
-    // TODO: strip undefined fields from options object to improve content script grouping.
-    ...options,
+    ...simplifiedOptions,
   };
   return JSON.stringify(
     Object.entries(withDefaults)

src/core/utils/getInternalConfig.ts

@@ -237,10 +237,13 @@ async function resolveInternalViteConfig(
   internalVite.plugins.push(plugins.devHtmlPrerender(finalConfig));
   internalVite.plugins.push(plugins.unimport(finalConfig));
   internalVite.plugins.push(
-    plugins.virtualEntrypoin('background', finalConfig),
+    plugins.virtualEntrypoint('background', finalConfig),
   );
   internalVite.plugins.push(
-    plugins.virtualEntrypoin('content-script', finalConfig),
+    plugins.virtualEntrypoint('content-script', finalConfig),
+  );
+  internalVite.plugins.push(
+    plugins.virtualEntrypoint('unlisted-script', finalConfig),
   );
   internalVite.plugins.push(plugins.devServerGlobals(finalConfig));
   internalVite.plugins.push(plugins.tsconfigPaths(finalConfig));

src/core/utils/importEntrypointFile.ts

@@ -49,14 +49,14 @@ export async function importEntrypointFile<T>(
     cache: false,
     debug: config.debug,
     esmResolve: true,
-    interopDefault: true,
     alias: {
       'webextension-polyfill': resolve(
         config.root,
         'node_modules/wxt/dist/virtual-modules/fake-browser.js',
       ),
     },
-    extensions: ['.ts', '.tsx', '.cjs', '.js', '.mjs'],
+    // List of extensions to transform with esbuild
+    extensions: ['.ts', '.cts', '.mts', '.tsx', '.js', '.cjs', '.mjs', '.jsx'],
     transform(opts) {
       const isEntrypoint = opts.filename === normalPath;
       return transformSync(
@@ -68,7 +68,8 @@ export async function importEntrypointFile<T>(
   });
 
   try {
-    return await jiti(path);
+    const res = await jiti(path);
+    return res.default;
   } catch (err) {
     config.logger.error(err);
     throw err;

src/core/utils/manifest.ts

@@ -60,16 +60,19 @@ export async function generateMainfest(
 ): Promise<Manifest.WebExtensionManifest> {
   const pkg = await getPackageJson(config);
 
+  const versionName = config.manifest.version_name ?? pkg?.version;
+  const version = config.manifest.version ?? simplifyVersion(pkg?.version);
+
   const baseManifest: Manifest.WebExtensionManifest = {
     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,
     version_name:
-      config.browser !== 'firefox' && !config.manifest.version
-        ? pkg?.version
-        : undefined,
+      // Firefox doesn't support version_name
+      config.browser === 'firefox' || versionName === version
+        ? undefined
+        : versionName,
     short_name: pkg?.shortName,
     icons: discoverIcons(buildOutput),
   };
@@ -214,6 +217,7 @@ function addEntrypoints(
     const options: Manifest.ActionManifest = {
       default_icon: popup.options.defaultIcon,
       default_title: popup.options.defaultTitle,
+      browser_style: popup.options.browserStyle,
     };
     if (manifest.manifest_version === 3) {
       manifest.action = {
@@ -311,7 +315,7 @@ function addEntrypoints(
       );
     } else {
       const hashToEntrypointsMap = contentScripts.reduce((map, script) => {
-        const hash = hashContentScriptOptions(script.options);
+        const hash = hashContentScriptOptions(script.options, config);
         if (map.has(hash)) map.get(hash)?.push(script);
         else map.set(hash, [script]);
         return map;

src/core/utils/strings.ts

@@ -23,6 +23,7 @@ export function removeProjectImportStatements(text: string): string {
   const noImports = removeImportStatements(text);
 
   return `import { defineContentScript, defineBackground } from 'wxt/client';
+import { defineUnlistedScript } from 'wxt/sandbox';
 
 ${noImports}`;
 }

src/core/vite-plugins/devHtmlPrerender.ts

@@ -4,68 +4,147 @@ import { getEntrypointName } from '../utils/entrypoints';
 import { parseHTML } from 'linkedom';
 import { dirname, isAbsolute, relative, resolve } from 'path';
 
+// Cache the preamble script for all devHtmlPrerender plugins, not just one
+let reactRefreshPreamble = '';
+
 /**
  * Pre-renders the HTML entrypoints when building the extension to connect to the dev server.
  */
-export function devHtmlPrerender(config: InternalConfig): vite.Plugin {
-  return {
-    apply: 'build',
-    name: 'wxt:dev-html-prerender',
-    config() {
-      return {
-        resolve: {
-          alias: {
-            '@wxt/reload-html': resolve(
-              config.root,
-              'node_modules/wxt/dist/virtual-modules/reload-html.js',
-            ),
+export function devHtmlPrerender(config: InternalConfig): vite.PluginOption {
+  const htmlReloadId = '@wxt/reload-html';
+  const resolvedHtmlReloadId = resolve(
+    config.root,
+    'node_modules/wxt/dist/virtual-modules/reload-html.js',
+  );
+  const virtualReactRefreshId = '@wxt/virtual-react-refresh';
+  const resolvedVirtualReactRefreshId = '\0' + virtualReactRefreshId;
+
+  return [
+    {
+      apply: 'build',
+      name: 'wxt:dev-html-prerender',
+      config() {
+        return {
+          resolve: {
+            alias: {
+              [htmlReloadId]: resolvedHtmlReloadId,
+            },
           },
-        },
-      };
+        };
+      },
+      // Convert scripts like src="./main.tsx" -> src="http://localhost:3000/entrypoints/popup/main.tsx"
+      // before the paths are replaced with their bundled path
+      transform(code, id) {
+        const server = config.server;
+        if (
+          config.command !== 'serve' ||
+          server == null ||
+          !id.endsWith('.html')
+        )
+          return;
+
+        const { document } = parseHTML(code);
+
+        const pointToDevServer = (
+          querySelector: string,
+          attr: string,
+        ): void => {
+          document.querySelectorAll(querySelector).forEach((element) => {
+            const src = element.getAttribute(attr);
+            if (!src) return;
+
+            if (isAbsolute(src)) {
+              element.setAttribute(attr, server.origin + src);
+            } else if (src.startsWith('.')) {
+              const abs = resolve(dirname(id), src);
+              const pathname = relative(config.root, abs);
+              element.setAttribute(attr, `${server.origin}/${pathname}`);
+            }
+          });
+        };
+        pointToDevServer('script[type=module]', 'src');
+        pointToDevServer('link[rel=stylesheet]', 'href');
+
+        // Add a script to add page reloading
+        const reloader = document.createElement('script');
+        reloader.src = htmlReloadId;
+        reloader.type = 'module';
+        document.head.appendChild(reloader);
+
+        const newHtml = document.toString();
+        config.logger.debug('transform ' + id);
+        config.logger.debug('Old HTML:\n' + code);
+        config.logger.debug('New HTML:\n' + newHtml);
+        return newHtml;
+      },
+
+      // Pass the HTML through the dev server to add dev-mode specific code
+      async transformIndexHtml(html, ctx) {
+        const server = config.server;
+        if (config.command !== 'serve' || server == null) return;
+
+        const originalUrl = `${server.origin}${ctx.path}`;
+        const name = getEntrypointName(config.entrypointsDir, ctx.filename);
+        const url = `${server.origin}/${name}.html`;
+        const serverHtml = await server.transformIndexHtml(
+          url,
+          html,
+          originalUrl,
+        );
+        const { document } = parseHTML(serverHtml);
+
+        // React pages include a preamble as an unsafe-inline type="module" script to enable fast refresh, as shown here:
+        // https://github.com/wxt-dev/wxt/issues/157#issuecomment-1756497616
+        // Since unsafe-inline scripts are blocked by MV3 CSPs, we need to virtualize it.
+        const reactRefreshScript = Array.from(
+          document.querySelectorAll('script[type=module]'),
+        ).find((script) => script.innerHTML.includes('@react-refresh'));
+        if (reactRefreshScript) {
+          // Save preamble to serve from server
+          reactRefreshPreamble = reactRefreshScript.innerHTML;
+
+          // Replace unsafe inline script
+          const virtualScript = document.createElement('script');
+          virtualScript.type = 'module';
+          virtualScript.src = `${server.origin}/${virtualReactRefreshId}`;
+          reactRefreshScript.replaceWith(virtualScript);
+        }
+
+        // Change /@vite/client -> http://localhost:3000/@vite/client
+        const viteClientScript = document.querySelector<HTMLScriptElement>(
+          "script[src='/@vite/client']",
+        );
+        if (viteClientScript) {
+          viteClientScript.src = `${server.origin}${viteClientScript.src}`;
+        }
+
+        const newHtml = document.toString();
+        config.logger.debug('transformIndexHtml ' + ctx.filename);
+        config.logger.debug('Old HTML:\n' + html);
+        config.logger.debug('New HTML:\n' + newHtml);
+        return newHtml;
+      },
     },
-    async transform(html, id) {
-      const server = config.server;
-      if (config.command !== 'serve' || server == null || !id.endsWith('.html'))
-        return;
-
-      const originalUrl = `${server.origin}${id}`;
-      const name = getEntrypointName(config.entrypointsDir, id);
-      const url = `${server.origin}/${name}.html`;
-      const serverHtml = await server.transformIndexHtml(
-        url,
-        html,
-        originalUrl,
-      );
-      const { document } = parseHTML(serverHtml);
-
-      const pointToDevServer = (querySelector: string, attr: string): void => {
-        document.querySelectorAll(querySelector).forEach((element) => {
-          const src = element.getAttribute(attr);
-          if (!src) return;
-
-          if (isAbsolute(src)) {
-            element.setAttribute(attr, server.origin + src);
-          } else if (src.startsWith('.')) {
-            const abs = resolve(dirname(id), src);
-            const pathname = relative(config.root, abs);
-            element.setAttribute(attr, `${server.origin}/${pathname}`);
-          }
-        });
-      };
-      pointToDevServer('script[type=module]', 'src');
-      pointToDevServer('link[rel=stylesheet]', 'href');
-
-      // Add a script to add page reloading
-      const reloader = document.createElement('script');
-      reloader.src = '@wxt/reload-html';
-      reloader.type = 'module';
-      document.head.appendChild(reloader);
-
-      const newHtml = document.toString();
-      config.logger.debug('Transformed ' + id);
-      config.logger.debug('Old HTML:\n' + html);
-      config.logger.debug('New HTML:\n' + newHtml);
-      return newHtml;
+    {
+      name: 'wxt:virtualize-react-refresh',
+      apply: 'serve',
+      resolveId(id) {
+        if (id === `/${virtualReactRefreshId}`) {
+          return resolvedVirtualReactRefreshId;
+        }
+        // Ignore chunk contents when pre-rendering
+        if (id.startsWith('/chunks/')) {
+          return '\0noop';
+        }
+      },
+      load(id) {
+        if (id === resolvedVirtualReactRefreshId) {
+          return reactRefreshPreamble;
+        }
+        if (id === '\0noop') {
+          return '';
+        }
+      },
     },
-  };
+  ];
 }

src/core/vite-plugins/virtualEntrypoint.ts

@@ -7,7 +7,7 @@ import { normalizePath } from '../utils/paths';
 /**
  * Wraps a user's entrypoint with a vitual version with additional logic.
  */
-export function virtualEntrypoin(
+export function virtualEntrypoint(
   type: Entrypoint['type'],
   config: InternalConfig,
 ): Plugin {

src/core/zip.ts

@@ -12,7 +12,12 @@ 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.
+ * @returns A list of ZIP files that were created.
+ *
+ * @example
+ * const config: InlineConfig = {};
+ * const result = await build(config);
+ * await zipExtension(config, result);
  */
 export async function zipExtension(
   config: InternalConfig,

src/index.ts

@@ -1,3 +1,6 @@
+/**
+ * @module wxt
+ */
 import { BuildOutput, WxtDevServer, InlineConfig } from './core/types';
 import { getInternalConfig } from './core/utils/getInternalConfig';
 import pc from 'picocolors';
@@ -22,6 +25,11 @@ export * from './core/utils/defineRunnerConfig';
 
 /**
  * Bundles the extension for production. Returns a promise of the build result.
+ *
+ * @example
+ * const res = await build({
+ *   // Enter config...
+ * })
  */
 export async function build(config: InlineConfig): Promise<BuildOutput> {
   const internalConfig = await getInternalConfig(config, 'build');
@@ -29,8 +37,13 @@ export async function build(config: InlineConfig): Promise<BuildOutput> {
 }
 
 /**
- * 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.
+ * Creates a dev server and pre-builds all the files that need to exist before loading the extension.
+ *
+ * @example
+ * const server = await wxt.createServer({
+ *   // Enter config...
+ * });
+ * await server.start();
  */
 export async function createServer(
   config?: InlineConfig,

templates/react/package.json

@@ -23,6 +23,6 @@
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.3",
     "typescript": "^5.1.6",
-    "wxt": "^0.5.0"
+    "wxt": "^0.8.0"
   }
 }

templates/solid/package.json

@@ -20,6 +20,6 @@
   "devDependencies": {
     "typescript": "^5.1.6",
     "vite-plugin-solid": "^2.7.0",
-    "wxt": "^0.5.0"
+    "wxt": "^0.8.0"
   }
 }

templates/svelte/package.json

@@ -20,6 +20,6 @@
     "svelte-check": "^3.4.6",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
-    "wxt": "^0.5.0"
+    "wxt": "^0.8.0"
   }
 }

templates/svelte/src/entrypoints/popup/App.svelte

@@ -12,7 +12,7 @@
       <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
     </a>
   </div>
-  <h1>WXT 2 + Svelte</h1>
+  <h1>WXT + Svelte</h1>
 
   <div class="card">
     <Counter />

templates/vanilla/package.json

@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "typescript": "^5.1.6",
-    "wxt": "^0.5.0"
+    "wxt": "^0.8.0"
   }
 }

templates/vue/package.json

@@ -21,6 +21,6 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.1.6",
     "vue-tsc": "^1.8.4",
-    "wxt": "^0.5.0"
+    "wxt": "^0.8.0"
   }
 }