0.19.0-alpha1

Co-authored-by: Aaron <aaronklinker1@gmail.com>

.github/workflows/validate.yml

@@ -35,7 +35,7 @@ jobs:
       - uses: ./.github/actions/setup
       - uses: oven-sh/setup-bun@v2
       - name: pnpm test:coverage
-        run: pnpm test:coverage --reporter=default --reporter=hanging-process
+        run: pnpm test:coverage -- --reporter=default --reporter=hanging-process
       - uses: codecov/codecov-action@v4
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -44,7 +44,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: pnpm test run
+      - run: pnpm test
   template:
     runs-on: ubuntu-22.04
     strategy:

README.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img style="vertical-align:middle" width="44" src="./docs/public/hero-logo.svg" alt="WXT Logo">
+  <img style="vertical-align:middle" width="44" src="https://raw.githubusercontent.com/wxt-dev/wxt/HEAD/docs/public/hero-logo.svg" alt="WXT Logo">
   <span>WXT</span>
 </h1>
 
@@ -22,18 +22,18 @@
 </p>
 
 <p align="center">
-  <a href="https://wxt.dev" target="_blank">Get Started</a>
-  &bull;
-  <a href="https://wxt.dev/guide/installation.html" target="_blank">Installation</a>
+  <a href="https://wxt.dev/guide/installation.html" target="_blank">Get Started</a>
   &bull;
   <a href="https://wxt.dev/api/config.html" target="_blank">Configuration</a>
   &bull;
   <a href="https://wxt.dev/examples.html" target="_blank">Examples</a>
   &bull;
+  <a href="https://github.com/wxt-dev/wxt/blob/main/packages/wxt/CHANGELOG.md" target="_blank">Changelog</a>
+  &bull;
   <a href="https://discord.gg/ZFsZqGery9" target="_blank">Discord</a>
 </p>
 
-![Example CLI Output](./docs/assets/cli-output.png)
+![Example CLI Output](https://raw.githubusercontent.com/wxt-dev/wxt/HEAD/docs/assets/cli-output.png)
 
 ## Demo
 

docs/.vitepress/components/UsingWxtSection.vue

@@ -30,6 +30,11 @@ const chromeExtensionIds = [
   'oadbjpccljkplmhnjekgjamejnbadlne', // demo.fun - Interactive product demos that convert
   'iopdafdcollfgaoffingmahpffckmjni', // SmartEReply: Elevate Your LinkedIn™ Engagement with AI 🚀📈
   'khjdmjcmpolknpccmaaipmidphjokhdf', // WorkFlowy MultiFlow
+  'fencadnndhdeggodopebjgdfdlhcimfk', // 香草布丁🌿🍮- https://github.com/Xdy1579883916/vanilla-pudding
+  'bnacincmbaknlbegecpioobkfgejlojp', // MaxFocus: Link Preview
+  'bcpgdpedphodjcjlminjbdeejccjbimp', // 汇率转换-中文版本
+  'loeilaonggnalkaiiaepbegccilkmjjp', // Currency Converter Plus
+  'npcnninnjghigjfiecefheeibomjpkak', // Respond Easy
 ];
 
 const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);

docs/.vitepress/config.ts

@@ -121,6 +121,7 @@ export default defineConfig({
 
           // Files
           menuItem('.env', 'env'),
+          menuItem('app.config.ts', 'app-config'),
           menuItem('package.json', 'package'),
           menuItem('tsconfig.json', 'tsconfig'),
           menuItem('web-ext.config.ts', 'web-ext-config'),

docs/get-started/entrypoints.md

@@ -17,7 +17,7 @@ In WXT, you create an entrypoint by adding a file to the `entrypoints/` director
 
 Some entrypoint filesname patterns are reserved by WXT and effect how the manifest is generated.
 
-- `popup` adds a `action` to the manifest
+- `popup` adds an `action` to the manifest
 - `background` adds a background script/service worker
 - `*.content.ts` adds a content script
 - ...

docs/get-started/migrate-to-wxt.md

@@ -25,7 +25,7 @@ In general, you'll need to:
 &ensp;<input type="checkbox" /> Convert custom import syntax to be compatible with Vite<br />
 &ensp;<input type="checkbox" /> Add a default export to JS entrypoints<br />
 &ensp;<input type="checkbox" /> Use the `browser` global instead of `chrome`<br />
-&ensp;<input type="checkbox" /> Compare final `manifest.json` files, making sure permissions and host permissions are unchanged<br />
+&ensp;<input type="checkbox" /> Compare final `manifest.json` files, making sure permissions and host permissions are unchanged. Use [Google's update testing tool](https://github.com/GoogleChromeLabs/extension-update-testing-tool) if your extension is already live on the Chrome Web Store<br />
 &ensp;<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!

docs/guide/directory-structure/app-config.md

@@ -0,0 +1,61 @@
+# `<srcDir>/app.config.ts`
+
+:::warning Nuxt Users
+If you're familiar with Nuxt, this file is meant to be a direct equivalent to Nuxt's `app.config.ts` file.
+
+However, some of Nuxt's features, like overriding the app config based on a `.env` file or automatically generating the config's types, are not implemented. They are planned, just not implemented yet. Feel free to open a PR!
+:::
+
+## Overview
+
+Define runtime configuration in a single place.
+
+```ts
+// <srcDir>/app.config.ts
+import { defineAppConfig } from 'wxt/sandbox';
+
+// Define types for your config
+declare module 'wxt/sandbox' {
+  export interface WxtAppConfig {
+    theme?: 'light' | 'dark';
+  }
+}
+
+export default defineAppConfig({
+  theme: 'dark',
+});
+```
+
+Then access the config in your extension by calling `useAppConfig`:
+
+```ts
+console.log(useAppConfig()); // { theme: "dark" }
+```
+
+## Environment Variables
+
+If you have a `.env` file, you can access any variables defined in it here. You can convert them to better types (like booleans), add types for them, or leave them as is.
+
+```txt
+# .env
+VITE_BUG_REPORTING_DISABLED=true
+VITE_API_KEY=...
+```
+
+```ts
+// <srcDir>/app.config.ts
+
+declare module 'wxt/sandbox' {
+  export interface WxtAppConfig {
+    bugReportingDisabled: boolean;
+    apiKey?: string;
+  }
+}
+
+export default defineAppConfig({
+  bugReportingDisabled: process.env.VITE_BUG_REPORTING_DISABLED === 'true',
+  apiKey: process.env.VITE_API_KEY,
+});
+```
+
+> You don't have to do this, you can use `process.env.VITE_*` anywhere in your runtime code, but putting them here consolidates them to one place and defines what variables are expected.

docs/guide/go-further/testing.md

@@ -19,7 +19,7 @@ There are other options for unit tests however, like [Jest](https://jestjs.io/),
 If you want to try to use a different framework for unit tests, you will need to configure the environment manually:
 
 - **Auto-imports**: Add `unimport` to your test environment or disable them by setting `imports: false` in your `wxt.config.ts` file
-- **`browser` mock**: Mock the `webextension-polyfill` module globally with `wxt/dist/virtual/mock-browser.js`
+- **`browser` mock**: Mock the `webextension-polyfill` module globally with `wxt/dist/virtual/mock-browser.mjs`
 - **[Remote Code Bundling](/guide/go-further/remote-code)**: If you use it, configure your environment to handle the `url:` module prefix
 - **Global Variables**: If you consume them, manually define globals provided by WXT (like `import.meta.env.BROWSER`) by adding them to the global scope before accessing them (`import.meta.env.BROWSER = "chrome"`)
 - **Import paths**: If you use the `@/` or `~/` path aliases, add them to your test environment

docs/guide/go-further/vite.md

@@ -18,9 +18,7 @@ export default defineConfig({
 
 ## Using Plugins
 
-Plugins can be passed into the `vite` configuration in you `wxt.config.ts` file, just like any other option.
-
-All plugins should work in WXT, but it is worth pointing out that since WXT orchestrates multiple vite builds to bundle an extension, plugins will be executed multiple times if necessary.
+Plugins can be passed into the `vite` configuration in your `wxt.config.ts` file, just like any other option.
 
 ```ts
 import { defineConfig } from 'wxt';
@@ -33,3 +31,9 @@ export default defineConfig({
   }),
 });
 ```
+
+:::warning UNEXPECTED BEHAVIOR
+Due to the way WXT orchestrates Vite builds, some plugins may not work as expected. Search [GitHub issues](https://github.com/wxt-dev/wxt/issues?q=is%3Aissue+label%3A%22vite+plugin%22) if you run into issues with a specific plugin.
+
+If one doesn't exist, please open a [new issue](https://github.com/wxt-dev/wxt/issues/new/choose)!
+:::

docs/guide/key-concepts/auto-imports.md

@@ -6,7 +6,7 @@ WXT uses the same tool as Nuxt for auto-imports, [`unimport`](https://github.com
 
 Some WXT APIs can be used without importing them:
 
-- [`browser`](/api/reference/wxt/browser/variables/browser) from `wxt/browser`, a small wrapper around `webextension-polyfill`
+- [`browser`](/api/reference/wxt/browser/#browser) from `wxt/browser`, a small wrapper around `webextension-polyfill`
 - [`defineContentScript`](/api/reference/wxt/sandbox/functions/defineContentScript) from `wxt/sandbox`
 - [`defineBackground`](/api/reference/wxt/sandbox/functions/defineBackground) from `wxt/sandbox`
 - [`defineUnlistedScript`](/api/reference/wxt/sandbox/functions/defineUnlistedScript) from `wxt/sandbox`
@@ -79,9 +79,7 @@ export default defineConfig({
 
 ## ESLint
 
-By default, ESLint thinks auto-imported variables are not defined. You have to add them to the `globals` config so it knows these variables exist at runtime.
-
-WXT generates a config file containing the globals you can extend! By default, WXT will attempt to detect if ESLint is installed in your project and generate the config file if so. If the config file isn't being generated automatically, you can manually tell WXT to generate it:
+ESLint doesn't know about the auto-imported variables unless they are explicitly defined in the `globals` config. By default, WXT will generate the config if it detects ESLint is installed in your project. If the config isn't generated automatically, you can manually tell WXT to generate it.
 
 ```ts
 // wxt.config.ts

docs/guide/key-concepts/frontend-frameworks.md

@@ -95,7 +95,7 @@ Usually, this means each entrypoint should be a directory with it's own files in
           ├ App.vue
           ├ main.ts
           ├ style.css
-          └ rotuer.ts
+          └ router.ts
 ```
 
 ## Configuring Routers

docs/guide/key-concepts/manifest.md

@@ -147,6 +147,31 @@ export default defineConfig({
 });
 ```
 
+### Host Permissions
+
+[Host Permissions](https://developer.chrome.com/docs/extensions/develop/concepts/declare-permissions#host-permissions) must be listed in the manifest config.
+
+```ts
+export default defineConfig({
+  manifest: {
+    host_permissions: ['*://*.google.com/*'],
+  },
+});
+```
+
+:::warning
+If you use host permissions and target both MV2 and MV3, make sure to only include the required host permissions for each version:
+
+```ts
+export default defineConfig({
+  manifest: ({ manifestVersion }) => ({
+    host_permissions: manifestVersion === 2 ? [...] : [...],
+  }),
+});
+```
+
+:::
+
 ## Localization
 
 Similar to the icon, the [`_locales` directory](https://developer.chrome.com/docs/extensions/reference/i18n/) should be placed inside the the WXT's [`public` directory](/guide/directory-structure/public/).
@@ -229,7 +254,7 @@ The `manifest` option can also be set equal to a function, letting you use logic
 ```ts
 // wxt.config.ts
 export default defineConfig({
-  manifest: ({ manifestVersion, browser, mode, comamnd }) => {
+  manifest: ({ manifestVersion, browser, mode, command }) => {
     return { ... }
   }
 })

package.json

@@ -5,11 +5,11 @@
     "node": ">=18.20.3",
     "pnpm": "^8.6.3"
   },
-  "packageManager": "pnpm@8.15.8",
+  "packageManager": "pnpm@8.15.9",
   "scripts": {
     "check": "check && pnpm -r --sequential run check",
-    "test": "vitest",
-    "test:coverage": "vitest run --coverage.enabled \"--coverage.include=packages/wxt/src/**\" \"--coverage.exclude=packages/wxt/src/core/utils/testing/**\" \"--coverage.exclude=**/*.d.ts\" \"--coverage.exclude=**/fixtures/**\"",
+    "test": "pnpm -r --sequential run test run",
+    "test:coverage": "pnpm -r --sequential run test:coverage",
     "prepare": "simple-git-hooks",
     "prepublish": "pnpm -s build",
     "docs:gen": "typedoc --options docs/typedoc.json",
@@ -18,10 +18,10 @@
     "docs:preview": "pnpm -s docs:gen && vitepress preview docs"
   },
   "devDependencies": {
-    "@aklinker1/buildc": "^1.0.10",
+    "@aklinker1/buildc": "^1.0.11",
     "@aklinker1/check": "^1.3.1",
     "@types/fs-extra": "^11.0.4",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/coverage-v8": "^2.0.0",
     "changelogen": "^0.5.5",
     "consola": "^3.2.3",
     "dependency-graph": "^1.0.0",
@@ -31,18 +31,16 @@
     "hasha": "^6.0.0",
     "lint-staged": "^15.2.7",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "simple-git-hooks": "^2.11.1",
     "tsx": "4.15.7",
     "typedoc": "^0.25.4",
     "typedoc-plugin-markdown": "4.0.0-next.23",
     "typedoc-vitepress-theme": "1.0.0-next.3",
-    "typescript": "^5.5.2",
-    "vitepress": "^1.2.3",
-    "vitest": "^1.6.0",
-    "vitest-mock-extended": "^1.3.1",
-    "vitest-plugin-random-seed": "^1.1.0",
-    "vue": "^3.4.31",
+    "typescript": "^5.5.3",
+    "vitepress": "^1.3.1",
+    "vitest-mock-extended": "^1.3.2",
+    "vue": "^3.4.33",
     "wxt": "workspace:*",
     "yaml": "^2.4.5"
   },

packages/module-react/modules/react.ts

@@ -9,6 +9,7 @@ export default defineWxtModule<ReactModuleOptions>({
     const { vite } = options ?? {};
 
     addViteConfig(wxt, () => ({
+      // @ts-expect-error: Vite version conflicts
       plugins: [react(vite)],
     }));
 

packages/module-react/package.json

@@ -36,10 +36,10 @@
     "@aklinker1/check": "^1.3.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "publint": "^0.2.8",
+    "publint": "^0.2.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.5.2",
+    "typescript": "^5.5.3",
     "unbuild": "^2.0.0",
     "wxt": "workspace:*"
   }

packages/module-solid/modules/solid.ts

@@ -9,6 +9,7 @@ export default defineWxtModule<SolidModuleOptions>({
     const { vite } = options ?? {};
 
     addViteConfig(wxt, () => ({
+      // @ts-expect-error: Vite version mismatch
       plugins: [solid(vite)],
       build: {
         target: 'esnext',

packages/module-solid/package.json

@@ -34,9 +34,9 @@
   },
   "devDependencies": {
     "@aklinker1/check": "^1.3.1",
-    "publint": "^0.2.8",
-    "solid-js": "^1.8.17",
-    "typescript": "^5.5.2",
+    "publint": "^0.2.9",
+    "solid-js": "^1.8.18",
+    "typescript": "^5.5.3",
     "unbuild": "^2.0.0",
     "wxt": "workspace:*"
   }

packages/module-svelte/README.md

@@ -5,7 +5,7 @@ Enables the use of [Svelte](https://svelte.dev/) in your web extension, in HTML
 This plugin makes a few changes:
 
 1. Adds `@sveltejs/vite-plugin-svelte` to vite
-2. Adds the [`svelte` preset](https://github.com/unjs/unimport/blob/main/src/presets/vue.ts) to auto-imports
+2. Adds the [`svelte` preset](https://github.com/unjs/unimport/blob/main/src/presets/svelte.ts) to auto-imports
 
 ## Usage
 

packages/module-svelte/package.json

@@ -32,8 +32,8 @@
   },
   "devDependencies": {
     "@aklinker1/check": "^1.3.1",
-    "publint": "^0.2.8",
-    "typescript": "^5.5.2",
+    "publint": "^0.2.9",
+    "typescript": "^5.5.3",
     "unbuild": "^2.0.0",
     "wxt": "workspace:*"
   }

packages/module-svelte/src/index.ts

@@ -14,6 +14,7 @@ export default defineWxtModule<SvelteModuleOptions>({
 
     addViteConfig(wxt, () => ({
       plugins: [
+        // @ts-expect-error: Vite version mismatch
         svelte({
           // Using a svelte.config.js file causes a segmentation fault when importing the file
           configFile: false,

packages/module-vue/package.json

@@ -32,8 +32,8 @@
   },
   "devDependencies": {
     "@aklinker1/check": "^1.3.1",
-    "publint": "^0.2.8",
-    "typescript": "^5.5.2",
+    "publint": "^0.2.9",
+    "typescript": "^5.5.3",
     "unbuild": "^2.0.0",
     "wxt": "workspace:*"
   }

packages/wxt-demo/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "buildc --deps-only -- wxt",
-    "build": "buildc -- wxt build",
+    "build": "buildc --deps-only -- wxt build",
     "build:all": "buildc --deps-only -- run-s -s 'build:all:*'",
     "build:all:chrome-mv3": "wxt build",
     "build:all:chrome-mv2": "wxt build --mv2",
@@ -21,10 +21,13 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/chrome": "^0.0.268",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "sass": "^1.77.6",
-    "typescript": "^5.5.2",
+    "sass": "^1.77.8",
+    "typescript": "^5.5.3",
+    "vitest": "^2.0.3",
+    "vitest-plugin-random-seed": "^1.1.0",
     "wxt": "workspace:*"
   },
   "buildc": {

packages/wxt-demo/src/app.config.ts

@@ -0,0 +1,11 @@
+import { defineAppConfig } from 'wxt/sandbox';
+
+declare module 'wxt/sandbox' {
+  export interface WxtAppConfig {
+    example: string;
+  }
+}
+
+export default defineAppConfig({
+  example: 'value',
+});

packages/wxt-demo/src/entrypoints/background.ts

@@ -15,6 +15,8 @@ export default defineBackground({
       messages,
     });
 
+    console.log(useAppConfig());
+
     // @ts-expect-error: should only accept entrypoints or public assets
     browser.runtime.getURL('/');
     browser.runtime.getURL('/background.js');

packages/wxt-demo/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": ["../../tsconfig.base.json", "./.wxt/tsconfig.json"],
   "compilerOptions": {
     "allowImportingTsExtensions": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vitest-plugin-random-seed/types"]
   }
 }

packages/wxt-demo/vitest.config.ts

@@ -6,5 +6,8 @@ export default defineProject({
     mockReset: true,
     restoreMocks: true,
   },
-  plugins: [WxtVitest()],
+  plugins: [
+    // @ts-expect-error: Vite version mismatch
+    WxtVitest(),
+  ],
 });

packages/wxt-demo/wxt.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'wxt';
 
 export default defineConfig({
   srcDir: 'src',
+  extensionApi: 'chrome',
   manifest: {
     permissions: ['storage'],
     default_locale: 'en',

packages/wxt/CHANGELOG.md

@@ -1,5 +1,100 @@
 # Changelog
 
+## v0.18.15
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.14...wxt-v0.18.15)
+
+### 🩹 Fixes
+
+- Don't throw error if localization file is missing ([#832](https://github.com/wxt-dev/wxt/pull/832))
+- Build latest version of package before packing ([88a1244](https://github.com/wxt-dev/wxt/commit/88a1244))
+- Externalize app config during dependency optimization ([#833](https://github.com/wxt-dev/wxt/pull/833))
+
+### 📖 Documentation
+
+- Fix links to Guide pages ([#821](https://github.com/wxt-dev/wxt/pull/821))
+
+### ❤️ Contributors
+
+- Eetann ([@eetann](http://github.com/eetann))
+
+## v0.18.14
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.13...wxt-v0.18.14)
+
+### 🩹 Fixes
+
+- **modules:** Add types from all wxt node_modules, not just ones with config ([#817](https://github.com/wxt-dev/wxt/pull/817))
+
+## v0.18.13
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.12...wxt-v0.18.13)
+
+### 🚀 Enhancements
+
+- **config:** `dev.server.hostname` ([#807](https://github.com/wxt-dev/wxt/pull/807))
+- Add XPath support to getAnchor() ([#813](https://github.com/wxt-dev/wxt/pull/813))
+
+### 🩹 Fixes
+
+- Add debug logs for vite builder ([#816](https://github.com/wxt-dev/wxt/pull/816))
+
+### ❤️ Contributors
+
+- Ayub Kokabi ([@sir-kokabi](http://github.com/sir-kokabi))
+
+## v0.18.12
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.11...wxt-v0.18.12)
+
+### 🚀 Enhancements
+
+- Support runtime config in `app.config.ts` ([#792](https://github.com/wxt-dev/wxt/pull/792))
+
+### 🔥 Performance
+
+- Create zip using streams ([#793](https://github.com/wxt-dev/wxt/pull/793))
+
+### 🩹 Fixes
+
+- Add missing name to ESLint v9 autoImports config ([#801](https://github.com/wxt-dev/wxt/pull/801))
+
+### 📖 Documentation
+
+- Update README ([#802](https://github.com/wxt-dev/wxt/pull/802))
+
+### 🏡 Chore
+
+- **deps:** Upgrade `web-ext-run` (0.2.0 to 0.2.1) ([#804](https://github.com/wxt-dev/wxt/pull/804))
+
+### ❤️ Contributors
+
+- Ntnyq ([@ntnyq](http://github.com/ntnyq))
+- Florian Metz ([@Timeraa](http://github.com/Timeraa))
+
+## v0.18.11
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.10...wxt-v0.18.11)
+
+### 🚀 Enhancements
+
+- Add eslint 9 config support ([#762](https://github.com/wxt-dev/wxt/pull/762))
+
+### 🩹 Fixes
+
+- Respect custom `outDir` when cleaning and zipping ([#774](https://github.com/wxt-dev/wxt/pull/774))
+- **dev:** Catch error when attempting to reload a tab in a saved tab group ([#786](https://github.com/wxt-dev/wxt/pull/786))
+
+### 🏡 Chore
+
+- Replace consola with wxt.logger ([#776](https://github.com/wxt-dev/wxt/pull/776))
+- **deps:** Upgrade non-major deps ([#778](https://github.com/wxt-dev/wxt/pull/778))
+
+### ❤️ Contributors
+
+- KnightYoshi ([@KnightYoshi](http://github.com/KnightYoshi))
+- Asakura Mizu ([@AsakuraMizu](http://github.com/AsakuraMizu))
+
 ## v0.18.10
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.18.9...wxt-v0.18.10)

packages/wxt/README.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img style="vertical-align:middle" width="44" src="./docs/public/hero-logo.svg" alt="WXT Logo">
+  <img style="vertical-align:middle" width="44" src="https://raw.githubusercontent.com/wxt-dev/wxt/HEAD/docs/public/hero-logo.svg" alt="WXT Logo">
   <span>WXT</span>
 </h1>
 
@@ -22,18 +22,18 @@
 </p>
 
 <p align="center">
-  <a href="https://wxt.dev" target="_blank">Get Started</a>
-  &bull;
-  <a href="https://wxt.dev/guide/installation.html" target="_blank">Installation</a>
+  <a href="https://wxt.dev/guide/installation.html" target="_blank">Get Started</a>
   &bull;
   <a href="https://wxt.dev/api/config.html" target="_blank">Configuration</a>
   &bull;
   <a href="https://wxt.dev/examples.html" target="_blank">Examples</a>
   &bull;
+  <a href="https://github.com/wxt-dev/wxt/blob/main/packages/wxt/CHANGELOG.md" target="_blank">Changelog</a>
+  &bull;
   <a href="https://discord.gg/ZFsZqGery9" target="_blank">Discord</a>
 </p>
 
-![Example CLI Output](./docs/assets/cli-output.png)
+![Example CLI Output](https://raw.githubusercontent.com/wxt-dev/wxt/HEAD/docs/assets/cli-output.png)
 
 ## Demo
 

packages/wxt/bin/wxt.mjs

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import '../dist/cli.js';
+import '../dist/cli/index.mjs';

packages/wxt/build.config.ts

@@ -0,0 +1,49 @@
+import { defineBuildConfig } from 'unbuild';
+import { version } from './package.json';
+import { readFile, writeFile } from 'fs/promises';
+import {
+  virtualEntrypointModuleNames,
+  virtualModuleNames,
+} from './src/core/utils/virtual-modules';
+
+export default defineBuildConfig([
+  // Non-virtual modules can be transpiled with mkdist
+  {
+    entries: [
+      {
+        builder: 'mkdist',
+        input: 'src',
+        pattern: ['**/*', '!**/__tests__', '!**/*.md', '!virtual', '!@types'],
+        declaration: true,
+      },
+    ],
+    hooks: {
+      async 'build:done'() {
+        // Replace any template variables in output files
+        await replaceVars('dist/version.mjs', { version });
+      },
+    },
+  },
+
+  // Virtual modules must be bundled individually
+  ...virtualModuleNames.map((moduleName) => ({
+    entries: [`src/virtual/${moduleName}.ts`],
+    externals: [
+      ...virtualEntrypointModuleNames.map((name) => `virtual:user-${name}`),
+      'virtual:wxt-plugins',
+      'virtual:app-config',
+      'wxt/browser',
+      'wxt/sandbox',
+      'wxt/client',
+      'wxt/testing',
+    ],
+  })),
+]);
+
+async function replaceVars(file: string, vars: Record<string, string>) {
+  let text = await readFile(file, 'utf8');
+  Object.entries(vars).forEach(([name, value]) => {
+    text = text.replaceAll(`{{${name}}}`, value);
+  });
+  await writeFile(file, text, 'utf8');
+}

packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap

@@ -12,13 +12,15 @@ exports[`Auto Imports > eslintrc > "enabled: 8" should output a JSON config file
     "createIframeUi": true,
     "createIntegratedUi": true,
     "createShadowRootUi": true,
+    "defineAppConfig": true,
     "defineBackground": true,
     "defineConfig": true,
     "defineContentScript": true,
     "defineUnlistedScript": true,
     "defineWxtPlugin": true,
     "fakeBrowser": true,
-    "storage": true
+    "storage": true,
+    "useAppConfig": true
   }
 }
 "
@@ -35,16 +37,19 @@ const globals = {
   "createIframeUi": true,
   "createIntegratedUi": true,
   "createShadowRootUi": true,
+  "defineAppConfig": true,
   "defineBackground": true,
   "defineConfig": true,
   "defineContentScript": true,
   "defineUnlistedScript": true,
   "defineWxtPlugin": true,
   "fakeBrowser": true,
-  "storage": true
+  "storage": true,
+  "useAppConfig": true
 }
 
 export default {
+  name: "wxt/auto-imports",
   languageOptions: {
     globals,
     sourceType: "module",
@@ -65,13 +70,15 @@ exports[`Auto Imports > eslintrc > "enabled: true" should output a JSON config f
     "createIframeUi": true,
     "createIntegratedUi": true,
     "createShadowRootUi": true,
+    "defineAppConfig": true,
     "defineBackground": true,
     "defineConfig": true,
     "defineContentScript": true,
     "defineUnlistedScript": true,
     "defineWxtPlugin": true,
     "fakeBrowser": true,
-    "storage": true
+    "storage": true,
+    "useAppConfig": true
   }
 }
 "
@@ -89,13 +96,15 @@ exports[`Auto Imports > eslintrc > should allow customizing the output 1`] = `
     "createIframeUi": "readonly",
     "createIntegratedUi": "readonly",
     "createShadowRootUi": "readonly",
+    "defineAppConfig": "readonly",
     "defineBackground": "readonly",
     "defineConfig": "readonly",
     "defineContentScript": "readonly",
     "defineUnlistedScript": "readonly",
     "defineWxtPlugin": "readonly",
     "fakeBrowser": "readonly",
-    "storage": "readonly"
+    "storage": "readonly",
+    "useAppConfig": "readonly"
   }
 }
 "

packages/wxt/e2e/tests/analysis.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { TestProject } from '../utils';
-import { resetBundleIncrement } from '~/core/builders/vite/plugins';
+import { resetBundleIncrement } from '../../src/core/builders/vite/plugins';
 import open from 'open';
 
 vi.mock('open');

packages/wxt/e2e/tests/auto-imports.test.ts

@@ -24,6 +24,7 @@ describe('Auto Imports', () => {
             const createIframeUi: typeof import('wxt/client')['createIframeUi']
             const createIntegratedUi: typeof import('wxt/client')['createIntegratedUi']
             const createShadowRootUi: typeof import('wxt/client')['createShadowRootUi']
+            const defineAppConfig: typeof import('wxt/sandbox')['defineAppConfig']
             const defineBackground: typeof import('wxt/sandbox')['defineBackground']
             const defineConfig: typeof import('wxt')['defineConfig']
             const defineContentScript: typeof import('wxt/sandbox')['defineContentScript']
@@ -31,6 +32,7 @@ describe('Auto Imports', () => {
             const defineWxtPlugin: typeof import('wxt/sandbox')['defineWxtPlugin']
             const fakeBrowser: typeof import('wxt/testing')['fakeBrowser']
             const storage: typeof import('wxt/storage')['storage']
+            const useAppConfig: typeof import('wxt/client')['useAppConfig']
           }
           "
         `);

packages/wxt/e2e/tests/hooks.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { TestProject } from '../utils';
-import { WxtHooks } from '~/types';
+import { WxtHooks } from '../../src/types';
 
 const hooks: WxtHooks = {
   ready: vi.fn(),

packages/wxt/e2e/tests/init.test.ts

@@ -1,9 +1,8 @@
 import { describe, it, expect } from 'vitest';
-import { TestProject } from '../utils';
+import { TestProject, WXT_PACKAGE_DIR } from '../utils';
 import { execaCommand } from 'execa';
 import glob from 'fast-glob';
 import { mkdir, writeJson } from 'fs-extra';
-import { WXT_PACKAGE_DIR } from '../utils';
 
 describe('Init command', () => {
   it('should download and create a template', async () => {

packages/wxt/e2e/tests/modules.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { TestProject } from '../utils';
 import type { GenericEntrypoint, InlineConfig } from '../../src/types';
 import { readFile } from 'fs-extra';
-import { normalizePath } from '~/core/utils/paths';
+import { normalizePath } from '../../src/core/utils/paths';
 
 describe('Module Helpers', () => {
   describe('options', () => {
@@ -192,10 +192,8 @@ describe('Module Helpers', () => {
       const expectedText = addPluginModule(project);
 
       await project.build({
-        experimental: {
-          // reduce build output when comparing test failures
-          includeBrowserPolyfill: false,
-        },
+        // reduce build output when comparing test failures
+        extensionApi: 'chrome',
       });
 
       await expect(project.serializeOutput()).resolves.toContain(expectedText);
@@ -214,10 +212,8 @@ describe('Module Helpers', () => {
       const expectedText = addPluginModule(project);
 
       await project.build({
-        experimental: {
-          // reduce build output when comparing test failures
-          includeBrowserPolyfill: false,
-        },
+        // reduce build output when comparing test failures
+        extensionApi: 'chrome',
       });
 
       await expect(project.serializeOutput()).resolves.toContain(expectedText);
@@ -237,10 +233,8 @@ describe('Module Helpers', () => {
       const expectedText = addPluginModule(project);
 
       await project.build({
-        experimental: {
-          // reduce build output when comparing test failures
-          includeBrowserPolyfill: false,
-        },
+        // reduce build output when comparing test failures
+        extensionApi: 'chrome',
       });
 
       await expect(project.serializeOutput()).resolves.toContain(expectedText);
@@ -255,10 +249,8 @@ describe('Module Helpers', () => {
       const expectedText = addPluginModule(project);
 
       await project.build({
-        experimental: {
-          // reduce build output when comparing test failures
-          includeBrowserPolyfill: false,
-        },
+        // reduce build output when comparing test failures
+        extensionApi: 'chrome',
       });
 
       await expect(project.serializeOutput()).resolves.toContain(expectedText);

packages/wxt/e2e/tests/output-structure.test.ts

@@ -262,10 +262,9 @@ describe('Output Directory Structure', () => {
     project.addFile('entrypoints/popup/main.ts', `logHello('popup')`);
 
     await project.build({
-      experimental: {
-        // Simplify the build output for comparison
-        includeBrowserPolyfill: false,
-      },
+      // Simplify the build output for comparison
+      extensionApi: 'chrome',
+
       vite: () => ({
         build: {
           // Make output for snapshot readible
@@ -278,6 +277,7 @@ describe('Output Directory Structure', () => {
       .toMatchInlineSnapshot(`
         ".output/chrome-mv3/background.js
         ----------------------------------------
+        var _a, _b;
         import { l as logHello, i as initPlugins } from "./chunks/_virtual_wxt-plugins-OjKtWpmY.js";
         function defineBackground(arg) {
           if (typeof arg === "function") return { main: arg };
@@ -289,17 +289,21 @@ describe('Output Directory Structure', () => {
             logHello("background");
           }
         });
-        chrome;
+        // @ts-expect-error
+        ((_b = (_a = globalThis.browser) == null ? void 0 : _a.runtime) == null ? void 0 : _b.id) == null ? globalThis.chrome : (
+          // @ts-expect-error
+          globalThis.browser
+        );
         function print(method, ...args) {
           return;
         }
-        var logger = {
+        const logger = {
           debug: (...args) => print(console.debug, ...args),
           log: (...args) => print(console.log, ...args),
           warn: (...args) => print(console.warn, ...args),
           error: (...args) => print(console.error, ...args)
         };
-        var result;
+        let result;
         try {
           initPlugins();
           result = definition.main();
@@ -343,10 +347,9 @@ describe('Output Directory Structure', () => {
     project.addFile('entrypoints/popup/main.ts', `logHello('popup')`);
 
     await project.build({
-      experimental: {
-        // Simplify the build output for comparison
-        includeBrowserPolyfill: false,
-      },
+      // Simplify the build output for comparison
+      extensionApi: 'chrome',
+
       vite: () => ({
         build: {
           // Make output for snapshot readible
@@ -361,6 +364,7 @@ describe('Output Directory Structure', () => {
         ----------------------------------------
         var _background = function() {
           "use strict";
+          var _a, _b;
           function defineBackground(arg) {
             if (typeof arg === "function") return { main: arg };
             return arg;
@@ -377,17 +381,21 @@ describe('Output Directory Structure', () => {
           _background;
           function initPlugins() {
           }
-          chrome;
+          // @ts-expect-error
+          ((_b = (_a = globalThis.browser) == null ? void 0 : _a.runtime) == null ? void 0 : _b.id) == null ? globalThis.chrome : (
+            // @ts-expect-error
+            globalThis.browser
+          );
           function print(method, ...args) {
             return;
           }
-          var logger = {
+          const logger = {
             debug: (...args) => print(console.debug, ...args),
             log: (...args) => print(console.log, ...args),
             warn: (...args) => print(console.warn, ...args),
             error: (...args) => print(console.error, ...args)
           };
-          var result;
+          let result;
           try {
             initPlugins();
             result = definition.main();
@@ -400,8 +408,8 @@ describe('Output Directory Structure', () => {
             logger.error("The background crashed on startup!");
             throw err;
           }
-          var background_entrypoint_default = result;
-          return background_entrypoint_default;
+          const result$1 = result;
+          return result$1;
         }();
         _background;
         "

packages/wxt/e2e/tests/typescript-project.test.ts

@@ -53,7 +53,7 @@ describe('TypeScript Project', () => {
           | "/popup.html"
           | "/sandbox.html"
         type HtmlPublicPath = Extract<PublicPath, \`\${string}.html\`>
-        export interface WxtRuntime extends Runtime.Static {
+        export interface WxtRuntime {
           getURL(path: PublicPath): string;
           getURL(path: \`\${HtmlPublicPath}\${string}\`): string;
         }

packages/wxt/e2e/tests/user-config.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { TestProject } from '../utils';
-import { InlineConfig } from '~/types';
+import { InlineConfig } from '../../src/types';
 
 describe('User Config', () => {
   // Root directory is tested with all tests.
@@ -88,7 +88,7 @@ describe('User Config', () => {
     `);
   });
 
-  it('should exclude the polyfill when the experimental setting is set to false', async () => {
+  it('should exclude the polyfill when extensionApi="chrome"', async () => {
     const buildBackground = async (config?: InlineConfig) => {
       const background = `export default defineBackground(() => console.log(browser.runtime.id));`;
       const projectWithPolyfill = new TestProject();
@@ -101,9 +101,7 @@ describe('User Config', () => {
 
     const withPolyfill = await buildBackground();
     const withoutPolyfill = await buildBackground({
-      experimental: {
-        includeBrowserPolyfill: false,
-      },
+      extensionApi: 'chrome',
     });
     expect(withoutPolyfill).not.toBe(withPolyfill);
   });

packages/wxt/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.18.10",
+  "version": "0.19.0-alpha1",
   "description": "Next gen framework for developing web extensions",
   "repository": {
     "type": "git",
@@ -30,75 +30,59 @@
     "wxt": "./bin/wxt.mjs",
     "wxt-publish-extension": "./bin/wxt-publish-extension.cjs"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
     },
     "./client": {
-      "types": "./dist/client.d.ts",
-      "import": "./dist/client.js"
+      "types": "./dist/client/index.d.ts",
+      "default": "./dist/client/index.mjs"
     },
     "./sandbox": {
-      "types": "./dist/sandbox.d.ts",
-      "import": "./dist/sandbox.js"
+      "types": "./dist/sandbox/index.d.ts",
+      "default": "./dist/sandbox/index.mjs"
     },
     "./browser": {
-      "types": "./dist/browser.d.ts",
-      "import": "./dist/browser.js"
+      "types": "./dist/browser/index.d.ts",
+      "default": "./dist/browser/index.mjs"
+    },
+    "./browser/chrome": {
+      "types": "./dist/browser/chrome.d.ts",
+      "import": "./dist/browser/chrome.mjs"
+    },
+    "./browser/webextension-polyfill": {
+      "types": "./dist/browser/webextension-polyfill.d.ts",
+      "import": "./dist/browser/webextension-polyfill.mjs"
     },
     "./testing": {
-      "import": {
-        "types": "./dist/testing.d.ts",
-        "default": "./dist/testing.js"
-      },
-      "require": {
-        "types": "./dist/testing.d.cts",
-        "default": "./dist/testing.cjs"
-      }
+      "types": "./dist/testing/index.d.ts",
+      "default": "./dist/testing/index.mjs"
     },
     "./storage": {
-      "import": {
-        "types": "./dist/storage.d.ts",
-        "default": "./dist/storage.js"
-      },
-      "require": {
-        "types": "./dist/storage.d.cts",
-        "default": "./dist/storage.cjs"
-      }
+      "types": "./dist/storage.d.ts",
+      "default": "./dist/storage.mjs"
     },
     "./vite-builder-env": {
       "types": "./dist/vite-builder-env.d.ts"
     },
     "./modules": {
-      "import": {
-        "types": "./dist/modules.d.ts",
-        "default": "./dist/modules.js"
-      },
-      "require": {
-        "types": "./dist/modules.d.cts",
-        "default": "./dist/modules.cjs"
-      }
+      "types": "./dist/modules.d.ts",
+      "default": "./dist/modules.mjs"
     }
   },
   "scripts": {
     "wxt": "tsx src/cli/index.ts",
-    "build": "buildc -- tsx scripts/build.ts",
+    "build": "buildc -- unbuild",
     "check": "buildc --deps-only -- run-s -c check:*",
     "check:default": "check",
     "check:tsc-virtual": "tsc --noEmit -p src/virtual",
     "test": "buildc --deps-only -- vitest",
-    "test:e2e": "buildc --deps-only -- vitest -r e2e",
-    "sync-releases": "pnpx changelogen@latest gh release"
+    "test:coverage": "pnpm test -- run --coverage",
+    "sync-releases": "pnpx changelogen@latest gh release",
+    "prepack": "pnpm build"
   },
   "dependencies": {
     "@aklinker1/rollup-plugin-visualizer": "5.12.0",
@@ -106,16 +90,16 @@
     "@webext-core/fake-browser": "^1.3.1",
     "@webext-core/isolated-element": "^1.1.2",
     "@webext-core/match-patterns": "^1.0.3",
-    "async-mutex": "^0.4.1",
+    "async-mutex": "^0.5.0",
     "c12": "^1.11.1",
     "cac": "^6.7.14",
     "chokidar": "^3.6.0",
     "ci-info": "^4.0.0",
     "defu": "^6.1.4",
     "dequal": "^2.0.3",
-    "esbuild": "^0.19.12",
+    "esbuild": "^0.23.0",
     "fast-glob": "^3.3.2",
-    "filesize": "^10.1.2",
+    "filesize": "^10.1.4",
     "fs-extra": "^11.2.0",
     "get-port": "^7.1.0",
     "giget": "^1.2.3",
@@ -126,39 +110,50 @@
     "jszip": "^3.10.1",
     "linkedom": "^0.18.4",
     "magicast": "^0.3.4",
-    "minimatch": "^9.0.5",
+    "minimatch": "^10.0.1",
     "natural-compare": "^1.4.0",
     "normalize-path": "^3.0.0",
     "nypm": "^0.3.9",
     "ohash": "^1.1.3",
     "open": "^10.1.0",
-    "ora": "^7.0.1",
+    "ora": "^8.0.1",
     "picocolors": "^1.0.1",
     "prompts": "^2.4.2",
     "publish-browser-extension": "^2.1.3",
-    "unimport": "^3.7.2",
-    "vite": "^5.3.2",
-    "vite-node": "^1.6.0",
-    "web-ext-run": "^0.2.0",
-    "webextension-polyfill": "^0.10.0"
+    "unimport": "^3.9.0",
+    "vite": "^5.3.4",
+    "vite-node": "^2.0.0",
+    "web-ext-run": "^0.2.1",
+    "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
     "@aklinker1/check": "^1.3.1",
     "@faker-js/faker": "^8.4.1",
+    "@types/chrome": "^0.0.268",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash.merge": "^4.6.9",
     "@types/natural-compare": "^1.4.3",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.11",
     "@types/normalize-path": "^3.0.2",
     "@types/prompts": "^2.4.9",
     "execa": "^9.3.0",
     "extract-zip": "^2.0.1",
-    "happy-dom": "^13.10.1",
+    "happy-dom": "^14.12.3",
     "lodash.merge": "^4.6.2",
     "p-map": "^7.0.2",
-    "publint": "^0.2.8",
-    "tsup": "^8.1.0",
+    "publint": "^0.2.9",
     "tsx": "4.15.7",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.3",
+    "unbuild": "^2.0.0",
+    "vitest": "^2.0.3",
+    "vitest-plugin-random-seed": "^1.1.0"
+  },
+  "peerDependencies": {
+    "@types/chrome": "*"
+  },
+  "peerDependenciesMeta": {
+    "@types/chrome": {
+      "optional": true
+    }
   }
 }

packages/wxt/scripts/build.ts

@@ -1,125 +0,0 @@
-import tsup from 'tsup';
-import glob from 'fast-glob';
-import { printFileList } from '~/core/utils/log';
-import { formatDuration } from '~/core/utils/time';
-import ora from 'ora';
-import fs from 'fs-extra';
-import { consola } from 'consola';
-import pMap from 'p-map';
-import os from 'node:os';
-import path from 'node:path';
-import {
-  virtualModuleNames,
-  virtualEntrypointModuleNames,
-} from '~/core/utils/virtual-modules';
-
-const spinnerText = 'Building WXT';
-const spinner = ora(spinnerText).start();
-
-const startTime = Date.now();
-const outDir = 'dist';
-await fs.rm(path.join(outDir, '*'), { recursive: true, force: true });
-
-const preset = {
-  dts: true,
-  silent: true,
-  sourcemap: false,
-  external: [
-    ...virtualEntrypointModuleNames.map((name) => `virtual:user-${name}`),
-    'virtual:wxt-plugins',
-  ],
-} satisfies tsup.Options;
-
-function spinnerPMap(configs: tsup.Options[]) {
-  let progress = 1;
-  const updateSpinner = () => {
-    spinner.text = `${spinnerText} [${progress}/${configs.length}]`;
-  };
-  updateSpinner();
-
-  return pMap(
-    config,
-    async (config) => {
-      const res = await tsup.build(config);
-      progress++;
-      updateSpinner();
-      return res;
-    },
-    {
-      stopOnError: true,
-      concurrency: process.env.CI === 'true' ? os.cpus().length : Infinity,
-    },
-  );
-}
-
-const config: tsup.Options[] = [
-  // CJS/ESM
-  {
-    ...preset,
-    entry: {
-      index: 'src/index.ts',
-      testing: 'src/testing/index.ts',
-      storage: 'src/storage.ts',
-      modules: 'src/modules.ts',
-    },
-    format: ['cjs', 'esm'],
-    clean: true,
-  },
-  // ESM-only
-  {
-    ...preset,
-    entry: {
-      browser: 'src/browser.ts',
-      sandbox: 'src/sandbox/index.ts',
-      client: 'src/client/index.ts',
-    },
-    format: ['esm'],
-  },
-  {
-    ...preset,
-    entry: virtualModuleNames.reduce<Record<string, string>>(
-      (acc, moduleName) => {
-        acc[`virtual/${moduleName}`] = `src/virtual/${moduleName}.ts`;
-        return acc;
-      },
-      {},
-    ),
-    format: ['esm'],
-    splitting: false,
-    dts: false,
-    external: [...preset.external, 'wxt'],
-  },
-  // CJS-only
-  {
-    ...preset,
-    entry: {
-      cli: 'src/cli/index.ts',
-    },
-    format: ['esm'],
-    banner: {
-      // Fixes dynamic require of nodejs modules. See https://github.com/wxt-dev/wxt/issues/355
-      // https://github.com/evanw/esbuild/issues/1921#issuecomment-1152991694
-      js: "import { createRequire } from 'module';const require = createRequire(import.meta.url);",
-    },
-  },
-];
-
-await spinnerPMap(config).catch((err) => {
-  spinner.fail();
-  console.error(err);
-  process.exit(1);
-});
-
-// Copy "public" files that need shipped inside WXT
-await fs.copyFile('src/vite-builder-env.d.ts', 'dist/vite-builder-env.d.ts');
-
-spinner.clear().stop();
-
-const duration = Date.now() - startTime;
-const outFiles = await glob(`${outDir}/**`, { absolute: true });
-await printFileList(
-  consola.success,
-  `Built WXT in ${formatDuration(duration)}`,
-  outDir,
-  outFiles,
-);

packages/wxt/src/@types/modules.d.ts

@@ -49,8 +49,3 @@ declare module 'web-ext-run/util/logger' {
   }
   export const consoleStream: IConsoleStream;
 }
-
-declare module 'wxt/browser' {
-  // Overridden when types are generated per project
-  export type PublicPath = string;
-}

packages/wxt/src/__tests__/modules.test.ts

@@ -1,4 +1,4 @@
-import { fakeWxt } from '~/core/utils/testing/fake-objects';
+import { fakeWxt } from '../core/utils/testing/fake-objects';
 import { addImportPreset, addViteConfig } from '../modules';
 import { describe, it, expect } from 'vitest';
 import { createHooks } from 'hookable';

packages/wxt/src/__tests__/storage.test.ts

@@ -1,7 +1,7 @@
 import { fakeBrowser } from '@webext-core/fake-browser';
 import { describe, it, expect, beforeEach, vi, expectTypeOf } from 'vitest';
-import { browser } from '~/browser';
-import { WxtStorageItem, storage } from '~/storage';
+import { browser } from 'wxt/browser';
+import { WxtStorageItem, storage } from '../storage';
 
 /**
  * This works because fakeBrowser is synchronous, and is will finish any number of chained

packages/wxt/src/browser/chrome.ts

@@ -0,0 +1,28 @@
+/// <reference types="chrome" />
+/**
+ * EXPERIMENTAL
+ *
+ * Includes the `chrome` API and types when using `extensionApi: 'chrome'`.
+ *
+ * @module wxt/browser/chrome
+ */
+
+export interface WxtRuntime {
+  // Overriden per-project
+}
+export interface WxtI18n {
+  // Overriden per-project
+}
+
+export type Chrome = typeof chrome;
+export type WxtBrowser = Omit<Chrome, 'runtime' | 'i18n'> & {
+  runtime: WxtRuntime & Omit<Chrome['runtime'], 'getURL'>;
+  i18n: WxtI18n & Omit<Chrome['i18n'], 'getMessage'>;
+};
+
+export const browser: WxtBrowser =
+  // @ts-expect-error
+  globalThis.browser?.runtime?.id == null
+    ? globalThis.chrome
+    : // @ts-expect-error
+      globalThis.browser;

packages/wxt/src/browser/index.ts

@@ -0,0 +1,4 @@
+/**
+ * @module wxt/browser
+ */
+export * from './webextension-polyfill';

packages/wxt/src/browser/webextension-polyfill.ts

@@ -1,6 +1,9 @@
 /**
- * @module wxt/browser
+ * Includes the `browser` API and types when using `extensionApi: 'webextension-polyfill'` (the default).
+ *
+ * @module wxt/browser/webextension-polyfill
  */
+
 import originalBrowser, { Browser, Runtime, I18n } from 'webextension-polyfill';
 
 export interface AugmentedBrowser extends Browser {

packages/wxt/src/builtin-modules/index.ts

@@ -1,4 +1,4 @@
-import { WxtModule } from '~/types';
+import { WxtModule } from '../types';
 import unimport from './unimport';
 
 export const builtinModules: WxtModule<any>[] = [unimport];

packages/wxt/src/builtin-modules/unimport.ts

@@ -1,10 +1,10 @@
-import { addViteConfig, defineWxtModule } from '~/modules';
+import { addViteConfig, defineWxtModule } from '../modules';
 import type {
   EslintGlobalsPropValue,
   WxtDirFileEntry,
   WxtModule,
   WxtResolvedUnimportOptions,
-} from '~/types';
+} from '../types';
 import { type Unimport, createUnimport } from 'unimport';
 import { Plugin } from 'vite';
 import { extname } from 'node:path';
@@ -139,6 +139,7 @@ export function getEslint9ConfigEntry(
     text: `const globals = ${JSON.stringify(globals, null, 2)}
 
 export default {
+  name: "wxt/auto-imports",
   languageOptions: {
     globals,
     sourceType: "module",

packages/wxt/src/cli/__tests__/index.test.ts

@@ -1,29 +1,29 @@
 import { describe, it, vi, beforeEach, expect } from 'vitest';
-import { build } from '~/core/build';
-import { createServer } from '~/core/create-server';
-import { zip } from '~/core/zip';
-import { prepare } from '~/core/prepare';
-import { clean } from '~/core/clean';
-import { initialize } from '~/core/initialize';
+import { build } from '../../core/build';
+import { createServer } from '../../core/create-server';
+import { zip } from '../../core/zip';
+import { prepare } from '../../core/prepare';
+import { clean } from '../../core/clean';
+import { initialize } from '../../core/initialize';
 import { mock } from 'vitest-mock-extended';
 import consola from 'consola';
 
-vi.mock('~/core/build');
+vi.mock('../../core/build');
 const buildMock = vi.mocked(build);
 
-vi.mock('~/core/create-server');
+vi.mock('../../core/create-server');
 const createServerMock = vi.mocked(createServer);
 
-vi.mock('~/core/zip');
+vi.mock('../../core/zip');
 const zipMock = vi.mocked(zip);
 
-vi.mock('~/core/prepare');
+vi.mock('../../core/prepare');
 const prepareMock = vi.mocked(prepare);
 
-vi.mock('~/core/clean');
+vi.mock('../../core/clean');
 const cleanMock = vi.mocked(clean);
 
-vi.mock('~/core/initialize');
+vi.mock('../../core/initialize');
 const initializeMock = vi.mocked(initialize);
 
 consola.wrapConsole();
@@ -35,7 +35,7 @@ function mockArgv(...args: string[]) {
 }
 
 async function importCli() {
-  await import('~/cli');
+  await import('../../cli');
 }
 
 describe('CLI', () => {

packages/wxt/src/cli/cli-utils.ts

@@ -1,10 +1,10 @@
 import { CAC, Command } from 'cac';
 import consola, { LogLevels } from 'consola';
-import { filterTruthy, toArray } from '~/core/utils/arrays';
-import { printHeader } from '~/core/utils/log';
-import { formatDuration } from '~/core/utils/time';
-import { ValidationError } from '~/core/utils/validation';
-import { registerWxt } from '~/core/wxt';
+import { filterTruthy, toArray } from '../core/utils/arrays';
+import { printHeader } from '../core/utils/log';
+import { formatDuration } from '../core/utils/time';
+import { ValidationError } from '../core/utils/validation';
+import { registerWxt } from '../core/wxt';
 
 /**
  * Wrap an action handler to add a timer, error handling, and maybe enable debug mode.

packages/wxt/src/cli/commands.ts

@@ -1,5 +1,5 @@
 import cac from 'cac';
-import { build, clean, createServer, initialize, prepare, zip } from '~/core';
+import { build, clean, createServer, initialize, prepare, zip } from '../core';
 import {
   createAliasedCommand,
   getArrayFromFlags,

packages/wxt/src/cli/index.ts

@@ -1,5 +1,5 @@
 import cli from './commands';
-import { version } from '~/version';
+import { version } from '../version';
 import { isAliasedCommand } from './cli-utils';
 
 // TODO: Remove. See https://github.com/wxt-dev/wxt/issues/277

packages/wxt/src/client/app-config.ts

@@ -0,0 +1,7 @@
+// @ts-expect-error: Untyped virtual module
+import appConfig from 'virtual:app-config';
+import type { WxtAppConfig } from '../sandbox/define-app-config';
+
+export function useAppConfig(): WxtAppConfig {
+  return appConfig;
+}

packages/wxt/src/client/content-scripts/content-script-context.ts

@@ -1,6 +1,6 @@
-import { ContentScriptDefinition } from '~/types';
-import { browser } from '~/browser';
-import { logger } from '~/sandbox/utils/logger';
+import { ContentScriptDefinition } from '../../types';
+import { browser } from 'wxt/browser';
+import { logger } from '../../sandbox/utils/logger';
 import { WxtLocationChangeEvent, getUniqueEventName } from './custom-events';
 import { createLocationWatcher } from './location-watcher';
 

packages/wxt/src/client/content-scripts/custom-events.ts

@@ -1,4 +1,4 @@
-import { browser } from '~/browser';
+import { browser } from 'wxt/browser';
 
 export class WxtLocationChangeEvent extends Event {
   static EVENT_NAME = getUniqueEventName('wxt:locationchange');
@@ -22,5 +22,5 @@ export function getUniqueEventName(eventName: string): string {
       ? 'build'
       : import.meta.env.ENTRYPOINT;
 
-  return `${browser.runtime.id}:${entrypointName}:${eventName}`;
+  return `${browser?.runtime?.id}:${entrypointName}:${eventName}`;
 }

packages/wxt/src/client/content-scripts/ui/__tests__/index.test.ts

@@ -252,6 +252,24 @@ describe('Content Script UIs', () => {
           document.querySelector('#parent > div[data-wxt-integrated]'),
         ).not.toBeNull();
       });
+
+      it('should append the element using an XPath string', () => {
+        vi.stubGlobal('XPathResult', { FIRST_ORDERED_NODE_TYPE: 9 });
+        document.evaluate = vi.fn().mockReturnValue({
+          singleNodeValue: document.querySelector('#three'),
+        });
+
+        const ui = createIntegratedUi(ctx, {
+          position: 'inline',
+          onMount: appendTestApp,
+          anchor: '//p[@id="three"]',
+        });
+        ui.mount();
+
+        expect(
+          document.querySelector('#three > div[data-wxt-integrated]'),
+        ).not.toBeNull();
+      });
     });
 
     describe('Element', () => {

packages/wxt/src/client/content-scripts/ui/index.ts

@@ -1,4 +1,4 @@
-import { browser } from '~/browser';
+import { browser } from 'wxt/browser';
 import { ContentScriptContext } from '..';
 import {
   ContentScriptAnchoredOptions,
@@ -10,7 +10,7 @@ import {
   ShadowRootContentScriptUi,
   ShadowRootContentScriptUiOptions,
 } from './types';
-import { logger } from '~/sandbox/utils/logger';
+import { logger } from '../../../sandbox/utils/logger';
 import { createIsolatedElement } from '@webext-core/isolated-element';
 export * from './types';
 
@@ -199,8 +199,25 @@ function getAnchor(options: ContentScriptAnchoredOptions): Element | undefined {
 
   let resolved =
     typeof options.anchor === 'function' ? options.anchor() : options.anchor;
-  if (typeof resolved === 'string')
-    return document.querySelector<Element>(resolved) ?? undefined;
+
+  if (typeof resolved === 'string') {
+    // If the string is an XPath expression (starts with '//' or '/')
+    if (resolved.startsWith('/')) {
+      // Evaluate the XPath and return the first ordered node
+      const result = document.evaluate(
+        resolved,
+        document,
+        null,
+        XPathResult.FIRST_ORDERED_NODE_TYPE,
+        null,
+      );
+      return (result.singleNodeValue as Element) ?? undefined;
+    } else {
+      // If the string is a CSS selector, query the document and return the element
+      return document.querySelector<Element>(resolved) ?? undefined;
+    }
+  }
+
   return resolved ?? undefined;
 }
 

packages/wxt/src/client/content-scripts/ui/types.ts

@@ -194,7 +194,7 @@ export type ContentScriptPositioningOptions =
 
 export interface ContentScriptAnchoredOptions {
   /**
-   * A CSS selector, element, or function that returns one of the two. Along with `append`, the
+   * A CSS selector, XPath expression, element, or function that returns one of the three. Along with `append`, the
    * `anchor` dictates where in the page the UI will be added.
    */
   anchor?:

packages/wxt/src/client/index.ts

@@ -4,3 +4,4 @@
  * @module wxt/client
  */
 export * from './content-scripts';
+export * from './app-config';

packages/wxt/src/core/build.ts

@@ -1,4 +1,4 @@
-import { BuildOutput, InlineConfig } from '~/types';
+import { BuildOutput, InlineConfig } from '../types';
 import { internalBuild } from './utils/building';
 import { registerWxt } from './wxt';
 

packages/wxt/src/core/builders/vite/index.ts

@@ -7,20 +7,20 @@ import {
   WxtBuilderServer,
   WxtDevServer,
   WxtHooks,
-} from '~/types';
+} from '../../../types';
 import * as wxtPlugins from './plugins';
 import {
   getEntrypointBundlePath,
   isHtmlEntrypoint,
-} from '~/core/utils/entrypoints';
+} from '../../utils/entrypoints';
 import {
   VirtualEntrypointType,
   VirtualModuleId,
-} from '~/core/utils/virtual-modules';
+} from '../../utils/virtual-modules';
 import { Hookable } from 'hookable';
-import { toArray } from '~/core/utils/arrays';
-import { safeVarName } from '~/core/utils/strings';
-import { importEntrypointFile } from '~/core/utils/building';
+import { toArray } from '../../utils/arrays';
+import { safeVarName } from '../../utils/strings';
+import { importEntrypointFile } from '../../utils/building';
 import { ViteNodeServer } from 'vite-node/server';
 import { ViteNodeRunner } from 'vite-node/client';
 import { installSourcemapsSupport } from 'vite-node/source-map';
@@ -66,9 +66,10 @@ export async function createViteBuilder(
       wxtPlugins.tsconfigPaths(wxtConfig),
       wxtPlugins.noopBackground(),
       wxtPlugins.globals(wxtConfig),
-      wxtPlugins.excludeBrowserPolyfill(wxtConfig),
+      wxtPlugins.resolveExtensionApi(wxtConfig),
       wxtPlugins.defineImportMeta(),
       wxtPlugins.wxtPluginLoader(wxtConfig),
+      wxtPlugins.resolveAppConfig(wxtConfig),
     );
     if (wxtConfig.analysis.enabled) {
       config.plugins.push(wxtPlugins.bundleAnalysis(wxtConfig));
@@ -217,7 +218,7 @@ export async function createViteBuilder(
           const baseConfig = await getBaseConfig();
           const envConfig: vite.InlineConfig = {
             plugins: [
-              wxtPlugins.webextensionPolyfillMock(wxtConfig),
+              wxtPlugins.extensionApiMock(wxtConfig),
               wxtPlugins.removeEntrypointMainFunction(wxtConfig, path),
             ],
           };
@@ -237,7 +238,7 @@ export async function createViteBuilder(
           baseConfig.optimizeDeps.include = [];
           const envConfig: vite.InlineConfig = {
             plugins: [
-              wxtPlugins.webextensionPolyfillMock(wxtConfig),
+              wxtPlugins.extensionApiMock(wxtConfig),
               wxtPlugins.removeEntrypointMainFunction(wxtConfig, path),
             ],
           };

packages/wxt/src/core/builders/vite/plugins/__tests__/devHtmlPrerender.test.ts

@@ -4,8 +4,8 @@ import { pointToDevServer } from '../devHtmlPrerender';
 import {
   fakeDevServer,
   fakeResolvedConfig,
-} from '~/core/utils/testing/fake-objects';
-import { normalizePath } from '~/core/utils/paths';
+} from '../../../../utils/testing/fake-objects';
+import { normalizePath } from '../../../../utils/paths';
 import { resolve } from 'node:path';
 
 describe('Dev HTML Prerender Plugin', () => {

packages/wxt/src/core/builders/vite/plugins/bundleAnalysis.ts

@@ -1,11 +1,12 @@
 import type * as vite from 'vite';
 import { visualizer } from '@aklinker1/rollup-plugin-visualizer';
-import { ResolvedConfig } from '~/types';
+import { ResolvedConfig } from '../../../../types';
 import path from 'node:path';
 
 let increment = 0;
 
 export function bundleAnalysis(config: ResolvedConfig): vite.Plugin {
+  // @ts-expect-error: Vite version mismatch
   return visualizer({
     template: 'raw-data',
     filename: path.resolve(

packages/wxt/src/core/builders/vite/plugins/cssEntrypoints.ts

@@ -1,6 +1,6 @@
 import type * as vite from 'vite';
-import { Entrypoint, ResolvedConfig } from '~/types';
-import { getEntrypointBundlePath } from '~/core/utils/entrypoints';
+import { Entrypoint, ResolvedConfig } from '../../../../types';
+import { getEntrypointBundlePath } from '../../../utils/entrypoints';
 
 /**
  * Rename CSS entrypoint outputs to ensure a JS file is not generated, and that the CSS file is

packages/wxt/src/core/builders/vite/plugins/devHtmlPrerender.ts

@@ -1,9 +1,9 @@
 import type * as vite from 'vite';
-import { ResolvedConfig, WxtDevServer } from '~/types';
-import { getEntrypointName } from '~/core/utils/entrypoints';
+import { ResolvedConfig, WxtDevServer } from '../../../../types';
+import { getEntrypointName } from '../../../utils/entrypoints';
 import { parseHTML } from 'linkedom';
 import { dirname, relative, resolve } from 'node:path';
-import { normalizePath } from '~/core/utils/paths';
+import { normalizePath } from '../../../utils/paths';
 import { murmurHash } from 'ohash';
 
 // Stored outside the plugin to effect all instances of the devHtmlPrerender plugin.
@@ -19,7 +19,7 @@ export function devHtmlPrerender(
   const htmlReloadId = '@wxt/reload-html';
   const resolvedHtmlReloadId = resolve(
     config.wxtModuleDir,
-    'dist/virtual/reload-html.js',
+    'dist/virtual/reload-html.mjs',
   );
 
   const virtualInlineScript = 'virtual:wxt-inline-script';

packages/wxt/src/core/builders/vite/plugins/devServerGlobals.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import { ResolvedConfig, WxtDevServer } from '~/types';
+import { ResolvedConfig, WxtDevServer } from '../../../../types';
 
 /**
  * Defines global constants about the dev server. Helps scripts connect to the server's web socket.

packages/wxt/src/core/builders/vite/plugins/download.ts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
-import { ResolvedConfig } from '~/types';
-import { fetchCached } from '~/core/utils/network';
+import { ResolvedConfig } from '../../../../types';
+import { fetchCached } from '../../../utils/network';
 
 /**
  * Downloads any URL imports, like Google Analytics, into virtual modules so they are bundled with

packages/wxt/src/core/builders/vite/plugins/entrypointGroupGlobals.ts

@@ -1,6 +1,6 @@
 import type * as vite from 'vite';
-import { EntrypointGroup } from '~/types';
-import { getEntrypointGlobals } from '~/core/utils/globals';
+import { EntrypointGroup } from '../../../../types';
+import { getEntrypointGlobals } from '../../../utils/globals';
 
 /**
  * Define a set of global variables specific to an entrypoint.

packages/wxt/src/core/builders/vite/plugins/excludeBrowserPolyfill.ts

@@ -1,33 +0,0 @@
-import { ResolvedConfig } from '~/types';
-import type * as vite from 'vite';
-
-/**
- * Apply the experimental config for disabling the polyfill. It works by aliasing the
- * `webextension-polyfill` module to a virtual module and exporting the `chrome` global from the
- * virtual module.
- */
-export function excludeBrowserPolyfill(config: ResolvedConfig): vite.Plugin {
-  const virtualId = 'virtual:wxt-webextension-polyfill-disabled';
-
-  return {
-    name: 'wxt:exclude-browser-polyfill',
-    config() {
-      // Only apply the config if we're disabling the polyfill
-      if (config.experimental.includeBrowserPolyfill) return;
-
-      return {
-        resolve: {
-          alias: {
-            'webextension-polyfill': virtualId,
-          },
-        },
-      };
-    },
-    load(id) {
-      if (id === virtualId) {
-        // Use chrome instead of the polyfill when disabled.
-        return 'export default chrome';
-      }
-    },
-  };
-}

packages/wxt/src/core/builders/vite/plugins/extensionApiMock.ts

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import type * as vite from 'vite';
+import { ResolvedConfig } from '../../../../types';
+
+/**
+ * Mock `webextension-polyfill`, `wxt/browser`, and `wxt/browser/*` by inlining
+ * all dependencies that import them and adding a custom alias so that Vite
+ * resolves to a mocked version of the module.
+ *
+ * TODO: Detect non-wxt dependencies (like `@webext-core/*`) that import `webextension-polyfill` via
+ * `npm list` and inline them automatically.
+ */
+export function extensionApiMock(config: ResolvedConfig): vite.PluginOption {
+  return {
+    name: 'wxt:extension-api-mock',
+    config() {
+      const replacement = path.resolve(
+        config.wxtModuleDir,
+        'dist/virtual/mock-browser',
+      );
+      return {
+        resolve: {
+          alias: [
+            { find: 'webextension-polyfill', replacement },
+            // wxt/browser, wxt/browser/...
+            { find: /^wxt\/browser.*/, replacement },
+          ],
+        },
+        ssr: {
+          // Inline all WXT modules so vite processes them so the aliases can
+          // be resolved
+          noExternal: ['wxt'],
+        },
+      };
+    },
+  };
+}

packages/wxt/src/core/builders/vite/plugins/globals.ts

@@ -1,6 +1,6 @@
 import type * as vite from 'vite';
-import { ResolvedConfig } from '~/types';
-import { getGlobals } from '~/core/utils/globals';
+import { ResolvedConfig } from '../../../../types';
+import { getGlobals } from '../../../utils/globals';
 
 export function globals(config: ResolvedConfig): vite.PluginOption {
   return {

packages/wxt/src/core/builders/vite/plugins/index.ts

@@ -8,9 +8,10 @@ export * from './noopBackground';
 export * from './cssEntrypoints';
 export * from './bundleAnalysis';
 export * from './globals';
-export * from './webextensionPolyfillMock';
-export * from './excludeBrowserPolyfill';
+export * from './extensionApiMock';
+export * from './resolveExtensionApi';
 export * from './entrypointGroupGlobals';
 export * from './defineImportMeta';
 export * from './removeEntrypointMainFunction';
 export * from './wxtPluginLoader';
+export * from './resolveAppConfig';

packages/wxt/src/core/builders/vite/plugins/multipageMove.ts

@@ -1,9 +1,9 @@
 import type * as vite from 'vite';
-import { Entrypoint, ResolvedConfig } from '~/types';
+import { Entrypoint, ResolvedConfig } from '../../../../types';
 import { dirname, extname, resolve, join } from 'node:path';
-import { getEntrypointBundlePath } from '~/core/utils/entrypoints';
+import { getEntrypointBundlePath } from '../../../utils/entrypoints';
 import fs, { ensureDir } from 'fs-extra';
-import { normalizePath } from '~/core/utils/paths';
+import { normalizePath } from '../../../utils/paths';
 
 /**
  * Ensures the HTML files output by a multipage build are in the correct location. This does two

packages/wxt/src/core/builders/vite/plugins/noopBackground.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import { VIRTUAL_NOOP_BACKGROUND_MODULE_ID } from '~/core/utils/constants';
+import { VIRTUAL_NOOP_BACKGROUND_MODULE_ID } from '../../../utils/constants';
 
 /**
  * In dev mode, if there's not a background script listed, we need to add one so that the web socket

packages/wxt/src/core/builders/vite/plugins/removeEntrypointMainFunction.ts

@@ -1,7 +1,7 @@
-import { ResolvedConfig } from '~/types';
+import { ResolvedConfig } from '../../../../types';
 import * as vite from 'vite';
-import { normalizePath } from '~/core/utils/paths';
-import { removeMainFunctionCode } from '~/core/utils/transform';
+import { normalizePath } from '../../../utils/paths';
+import { removeMainFunctionCode } from '../../../utils/transform';
 import { resolve } from 'node:path';
 
 /**

packages/wxt/src/core/builders/vite/plugins/resolveAppConfig.ts

@@ -0,0 +1,36 @@
+import { exists } from 'fs-extra';
+import { resolve } from 'node:path';
+import type * as vite from 'vite';
+import { ResolvedConfig } from '../../../../types';
+
+/**
+ * When importing `virtual:app-config`, resolve it to the `app.config.ts` file in the project.
+ */
+export function resolveAppConfig(config: ResolvedConfig): vite.Plugin {
+  const virtualModuleId = 'virtual:app-config';
+  const resolvedVirtualModuleId = '\0' + virtualModuleId;
+  const appConfigFile = resolve(config.srcDir, 'app.config.ts');
+
+  return {
+    name: 'wxt:resolve-app-config',
+    config() {
+      return {
+        optimizeDeps: {
+          // Prevent ESBuild from attempting to resolve the virtual module
+          // while optimizing WXT.
+          exclude: [virtualModuleId],
+        },
+      };
+    },
+    async resolveId(id) {
+      if (id !== virtualModuleId) return;
+
+      return (await exists(appConfigFile))
+        ? appConfigFile
+        : resolvedVirtualModuleId;
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) return `export default {}`;
+    },
+  };
+}

packages/wxt/src/core/builders/vite/plugins/resolveExtensionApi.ts

@@ -0,0 +1,27 @@
+import { ResolvedConfig } from '../../../../types';
+import type * as vite from 'vite';
+
+/**
+ * Apply the experimental config for which extension API is used. This only
+ * effects the extension API included at RUNTIME - during development, types
+ * depend on the import.
+ *
+ * NOTE: this only works if we import `wxt/browser` instead of using the relative path.
+ */
+export function resolveExtensionApi(config: ResolvedConfig): vite.Plugin {
+  return {
+    name: 'wxt:resolve-extension-api',
+    config() {
+      // Only apply the config if we're disabling the polyfill
+      if (config.extensionApi === 'webextension-polyfill') return;
+
+      return {
+        resolve: {
+          alias: [
+            { find: /^wxt\/browser$/, replacement: 'wxt/browser/chrome' },
+          ],
+        },
+      };
+    },
+  };
+}

packages/wxt/src/core/builders/vite/plugins/resolveVirtualModules.ts

@@ -1,10 +1,10 @@
 import { Plugin } from 'vite';
-import { ResolvedConfig } from '~/types';
-import { normalizePath } from '~/core/utils/paths';
+import { ResolvedConfig } from '../../../../types';
+import { normalizePath } from '../../../utils/paths';
 import {
   VirtualModuleId,
   virtualModuleNames,
-} from '~/core/utils/virtual-modules';
+} from '../../../utils/virtual-modules';
 import fs from 'fs-extra';
 import { resolve } from 'path';
 
@@ -31,7 +31,7 @@ export function resolveVirtualModules(config: ResolvedConfig): Plugin[] {
 
         const inputPath = id.replace(resolvedVirtualId, '');
         const template = await fs.readFile(
-          resolve(config.wxtModuleDir, `dist/virtual/${name}.js`),
+          resolve(config.wxtModuleDir, `dist/virtual/${name}.mjs`),
           'utf-8',
         );
         return template.replace(`virtual:user-${name}`, inputPath);

packages/wxt/src/core/builders/vite/plugins/tsconfigPaths.ts

@@ -1,4 +1,4 @@
-import { ResolvedConfig } from '~/types';
+import { ResolvedConfig } from '../../../../types';
 import type * as vite from 'vite';
 
 export function tsconfigPaths(config: ResolvedConfig): vite.Plugin {

packages/wxt/src/core/builders/vite/plugins/webextensionPolyfillMock.ts

@@ -1,41 +0,0 @@
-import path from 'node:path';
-import type * as vite from 'vite';
-import { ResolvedConfig } from '~/types';
-
-/**
- * Mock `webextension-polyfill` by inlining all dependencies that import it and adding a custom
- * alias so that Vite resolves to a mocked version of the module.
- *
- * There are two ways to mark a module as inline:
- * 1. Use partial file paths ("wxt/dist/browser.js") in the `test.server.deps.inline` option.
- * 2. Use module names ("wxt" or "@webext-core/messaging") in the `ssr.noExternalize` option.
- *
- * This plugin uses the second approach since it's a little more intuative to understand.
- *
- * TODO: Detect non-wxt dependencies (like `@webext-core/*`) that import `webextension-polyfill` via
- * `npm list` and inline them automatically.
- */
-export function webextensionPolyfillMock(
-  config: ResolvedConfig,
-): vite.PluginOption {
-  return {
-    name: 'wxt:testing-inline-deps',
-    config() {
-      return {
-        resolve: {
-          alias: {
-            // Alias to use a mocked version of the polyfill
-            'webextension-polyfill': path.resolve(
-              config.wxtModuleDir,
-              'dist/virtual/mock-browser',
-            ),
-          },
-        },
-        ssr: {
-          // Inline all WXT modules
-          noExternal: ['wxt'],
-        },
-      };
-    },
-  };
-}

packages/wxt/src/core/builders/vite/plugins/wxtPluginLoader.ts

@@ -1,7 +1,7 @@
 import { parseHTML } from 'linkedom';
 import type * as vite from 'vite';
-import { normalizePath } from '~/core/utils/paths';
-import { ResolvedConfig } from '~/types';
+import { normalizePath } from '../../../utils/paths';
+import { ResolvedConfig } from '../../../../types';
 
 /**
  * Resolve and load plugins for each entrypoint. This handles both JS entrypoints via the `virtual:wxt-plugins` import, and HTML files by adding `virtual:wxt-html-plugins` to the document's `<head>`

packages/wxt/src/core/clean.ts

@@ -2,7 +2,7 @@ import path from 'node:path';
 import glob from 'fast-glob';
 import fs from 'fs-extra';
 import pc from 'picocolors';
-import { InlineConfig } from '~/types';
+import { InlineConfig } from '../types';
 import { registerWxt, wxt } from './wxt';
 
 /**

packages/wxt/src/core/create-server.ts

@@ -4,22 +4,19 @@ import {
   InlineConfig,
   ServerInfo,
   WxtDevServer,
-} from '~/types';
-import {
-  getEntrypointBundlePath,
-  isHtmlEntrypoint,
-} from '~/core/utils/entrypoints';
+} from '../types';
+import { getEntrypointBundlePath, isHtmlEntrypoint } from './utils/entrypoints';
 import {
   getContentScriptCssFiles,
   getContentScriptsCssMap,
-} from '~/core/utils/manifest';
+} from './utils/manifest';
 import {
   internalBuild,
   detectDevChanges,
   rebuild,
   findEntrypoints,
-} from '~/core/utils/building';
-import { createExtensionRunner } from '~/core/runners';
+} from './utils/building';
+import { createExtensionRunner } from './runners';
 import { Mutex } from 'async-mutex';
 import pc from 'picocolors';
 import { relative } from 'node:path';

packages/wxt/src/core/define-config.ts

@@ -1,4 +1,4 @@
-import { UserConfig } from '~/types';
+import { UserConfig } from '../types';
 
 export function defineConfig(config: UserConfig): UserConfig {
   return config;

packages/wxt/src/core/define-runner-config.ts

@@ -1,4 +1,4 @@
-import { ExtensionRunnerConfig } from '~/types';
+import { ExtensionRunnerConfig } from '../types';
 
 export function defineRunnerConfig(
   config: ExtensionRunnerConfig,

packages/wxt/src/core/package-managers/index.ts

@@ -8,7 +8,7 @@ import {
   PackageManager,
   PackageManagerName,
 } from 'nypm';
-import { WxtPackageManager } from '~/types';
+import { WxtPackageManager } from '../../types';
 import { bun } from './bun';
 import { WxtPackageManagerImpl } from './types';
 import { yarn } from './yarn';

packages/wxt/src/core/package-managers/npm.ts

@@ -1,4 +1,4 @@
-import { Dependency } from '~/types';
+import { Dependency } from '../../types';
 import { WxtPackageManagerImpl } from './types';
 import path from 'node:path';
 import { ensureDir } from 'fs-extra';

packages/wxt/src/core/package-managers/types.ts

@@ -1,4 +1,4 @@
-import { WxtPackageManager } from '~/types';
+import { WxtPackageManager } from '../../types';
 
 export type WxtPackageManagerImpl = Pick<
   WxtPackageManager,

packages/wxt/src/core/package-managers/yarn.ts

@@ -1,4 +1,4 @@
-import { Dependency } from '~/types';
+import { Dependency } from '../../types';
 import { WxtPackageManagerImpl } from './types';
 import { dedupeDependencies, npm } from './npm';
 

packages/wxt/src/core/prepare.ts

@@ -1,5 +1,5 @@
-import { InlineConfig } from '~/types';
-import { findEntrypoints, generateTypesDir } from '~/core/utils/building';
+import { InlineConfig } from '../types';
+import { findEntrypoints, generateTypesDir } from './utils/building';
 import { registerWxt, wxt } from './wxt';
 
 export async function prepare(config: InlineConfig) {

packages/wxt/src/core/runners/__tests__/index.test.ts

@@ -1,13 +1,13 @@
 import { describe, expect, it, vi } from 'vitest';
 import { createExtensionRunner } from '..';
-import { setFakeWxt } from '~/core/utils/testing/fake-objects';
+import { setFakeWxt } from '../../utils/testing/fake-objects';
 import { mock } from 'vitest-mock-extended';
 import { createSafariRunner } from '../safari';
 import { createWslRunner } from '../wsl';
 import { createManualRunner } from '../manual';
 import { isWsl } from '../../utils/wsl';
 import { createWebExtRunner } from '../web-ext';
-import { ExtensionRunner } from '~/types';
+import { ExtensionRunner } from '../../../types';
 
 vi.mock('../../utils/wsl');
 const isWslMock = vi.mocked(isWsl);

packages/wxt/src/core/runners/index.ts

@@ -1,9 +1,9 @@
-import { ExtensionRunner } from '~/types';
+import { ExtensionRunner } from '../../types';
 import { createWslRunner } from './wsl';
 import { createWebExtRunner } from './web-ext';
 import { createSafariRunner } from './safari';
 import { createManualRunner } from './manual';
-import { isWsl } from '~/core/utils/wsl';
+import { isWsl } from '../utils/wsl';
 import { wxt } from '../wxt';
 
 export async function createExtensionRunner(): Promise<ExtensionRunner> {

packages/wxt/src/core/runners/manual.ts

@@ -1,4 +1,4 @@
-import { ExtensionRunner } from '~/types';
+import { ExtensionRunner } from '../../types';
 import { relative } from 'node:path';
 import { wxt } from '../wxt';
 

packages/wxt/src/core/runners/safari.ts

@@ -1,4 +1,4 @@
-import { ExtensionRunner } from '~/types';
+import { ExtensionRunner } from '../../types';
 import { relative } from 'node:path';
 import { wxt } from '../wxt';
 

packages/wxt/src/core/runners/web-ext.ts

@@ -1,5 +1,5 @@
 import type { WebExtRunInstance } from 'web-ext-run';
-import { ExtensionRunner } from '~/types';
+import { ExtensionRunner } from '../../types';
 import { formatDuration } from '../utils/time';
 import defu from 'defu';
 import { wxt } from '../wxt';
@@ -59,6 +59,9 @@ export function createWebExtRunner(): ExtensionRunner {
         target:
           wxt.config.browser === 'firefox' ? 'firefox-desktop' : 'chromium',
         sourceDir: wxt.config.outDir,
+        // Don't add a "Reload Manager" extension alongside dev extension, WXT
+        // already handles reloads intenrally.
+        noReloadManagerExtension: true,
         // WXT handles reloads, so disable auto-reload behaviors in web-ext
         noReload: true,
         noInput: true,

packages/wxt/src/core/runners/wsl.ts

@@ -1,4 +1,4 @@
-import { ExtensionRunner } from '~/types';
+import { ExtensionRunner } from '../../types';
 import { relative } from 'node:path';
 import { wxt } from '../wxt';