chore(release): v0.18.0

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

.github/workflows/release.yml

@@ -25,11 +25,14 @@ jobs:
           pnpx changelogen@latest --release
           git push
           git push --tags
+        working-directory: packages/wxt
 
       - name: NPM
         run: |
           echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
           pnpm publish
+        working-directory: packages/wxt
 
       - name: GitHub Release
         run: pnpx changelogen@latest gh release --token ${{ secrets.GITHUB_TOKEN }}
+        working-directory: packages/wxt

.github/workflows/validate.yml

@@ -7,37 +7,21 @@ on:
       - main
 
 jobs:
-  formatting:
+  checks:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: pnpm format:check
-  lint:
+      - run: pnpm check
+  build-demo:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: pnpm lint
-  type-check:
-    runs-on: ubuntu-22.04
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup
-      - run: pnpm compile
-  validate-demo:
-    runs-on: ubuntu-22.04
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ./.github/actions/setup
-      - run: pnpm tsc --noEmit
-        working-directory: demo
       - run: pnpm build:all
-        working-directory: demo
+        working-directory: packages/wxt-demo
       - run: pnpm wxt zip
-        working-directory: demo
-      - run: pnpm vitest run
-        working-directory: demo
+        working-directory: packages/wxt-demo
   tests:
     runs-on: ubuntu-22.04
     steps:
@@ -69,9 +53,10 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: pnpm pack
+        working-directory: packages/wxt
       - run: npm i
         working-directory: templates/${{ matrix.template }}
-      - run: npm i -D ../../wxt-*.tgz
+      - run: npm i -D ../../packages/wxt/wxt-*.tgz
         working-directory: templates/${{ matrix.template }}
       - run: pnpm compile
         if: matrix.template != 'svelte'

.npmrc

@@ -1 +0,0 @@
-ignore-workspace-root-check=true

demo/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "demo",
-  "version": "1.0.0",
-  "description": "Demo extension for WXT",
-  "type": "module",
-  "scripts": {
-    "dev": "pnpm -w build && wxt",
-    "build": "pnpm -w build && wxt build",
-    "build:all": "pnpm -w build && run-s -s 'build:all:*'",
-    "build:all:chrome-mv3": "wxt build",
-    "build:all:chrome-mv2": "wxt build --mv2",
-    "build:all:firefox-mv3": "wxt build -b firefox --mv3",
-    "build:all:firefox-mv2": "wxt build -b firefox",
-    "test": "pnpm -w build && vitest",
-    "zip": "pnpm -w build && wxt zip",
-    "compile": "pnpm -w build && tsc --noEmit",
-    "postinstall": "pnpm -w build && wxt prepare"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "vitest": "^1.2.2"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.34",
-    "@types/react-dom": "^18.2.14",
-    "sass": "^1.69.5",
-    "wxt": "workspace:*"
-  }
-}

docs/.vitepress/components/UsingWxtSection.vue

@@ -21,6 +21,11 @@ const chromeExtensionIds = [
   'aiakblgmlabokilgljkglggnpflljdgp', // Markdown Sticky Notes
   'nomnkbngkijpffepcgbbofhcnafpkiep', // DocVersionRedirector
   'ceicccfeikoipigeghddpocceifjelph', // Plex Skipper
+  'aelkipgppclpfimeamgmlonimflbhlgf', // GitHub Custom Notifier
+  'djnlaiohfaaifbibleebjggkghlmcpcj', // Fluent Read
+  'nhclljcpfmmaiojbhhnkpjcfmacfcian', // Facebook Video Controls
+  'mblkhbaakhbhiimkbcnmeciblfhmafna', // ElemSnap - Quick capture of webpage elements and conversion to images,
+  'oajalfneblkfiejoadecnmodfpnaeblh', // MS Edge TTS (Text to Speech)
 ];
 
 const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);

docs/.vitepress/config.ts

@@ -95,6 +95,7 @@ export default defineConfig({
             { text: 'Vite', link: '/guide/vite.md' },
             { text: 'Remote Code', link: '/guide/remote-code.md' },
             { text: 'Publishing', link: '/guide/publishing.md' },
+            { text: 'Handling Updates', link: '/guide/handling-updates.md' },
             { text: 'Development', link: '/guide/development.md' },
             { text: 'Testing', link: '/guide/testing.md' },
           ],
@@ -146,6 +147,9 @@ export default defineConfig({
       ],
     },
 
-    socialLinks: [{ icon: 'github', link: 'https://github.com/wxt-dev/wxt' }],
+    socialLinks: [
+      { icon: 'discord', link: 'https://discord.gg/ZFsZqGery9' },
+      { icon: 'github', link: 'https://github.com/wxt-dev/wxt' },
+    ],
   },
 });

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

@@ -6,7 +6,7 @@ import { execaCommand } from 'execa';
 
 let hasGenerated = false;
 
-const cliDir = resolve('src/cli/commands');
+const cliDir = resolve('packages/wxt/src/cli/commands');
 const cliDirGlob = resolve(cliDir, '**');
 const cliTemplatePath = resolve('docs/.vitepress/plugins/cli.tpl.md');
 const cliPath = resolve('docs/api/cli.md');
@@ -23,7 +23,9 @@ export function generateCliDocs() {
   const generateDocs = async () => {
     consola.info(`Generating ${relative(process.cwd(), cliPath)}`);
     try {
-      const res = await execaCommand('pnpm -s wxt --help');
+      const res = await execaCommand('pnpm -s wxt --help', {
+        cwd: 'packages/wxt',
+      });
       const dev = splitInfo(res.stdout);
       const lines: Array<string | string[]> = [
         `## \`wxt\``,
@@ -34,7 +36,9 @@ export function generateCliDocs() {
 
       const commands = await Promise.allSettled(
         extractCommands(dev.info).map(async (command) => {
-          const res = await execaCommand(`pnpm -s wxt ${command} --help`);
+          const res = await execaCommand(`pnpm -s wxt ${command} --help`, {
+            cwd: 'packages/wxt',
+          });
           const { rest: docs } = splitInfo(res.stdout);
           return [`## \`wxt ${command}\``, '```sh', docs, '```'];
         }),

docs/entrypoints/content-scripts.md

@@ -40,7 +40,7 @@ export default defineContentScript({
   // Configure how/when content script will be registered
   registration: undefined | "manifest" | "runtime",
 
-  main(ctx) {
+  main(ctx: ContentScriptContext) {
     // Executed when content script is loaded
   },
 });
@@ -50,52 +50,6 @@ export default defineContentScript({
 
 When defining multiple content scripts, content script entrypoints that have the same set of options will be merged into a single `content_script` item in the manifest.
 
-## Context
-
-Old content scripts are not automatically stopped when an extension updates and reloads. Often, this leads to "Invalidated context" errors in production when a content script from an old version of your extension tries to use a web extension API (ie, the `browser` or `chrome` globals).
-
-WXT provides a utility for handling this process: `ContentScriptContext`. An instance of this class is provided to you automatically inside the `main` function of your content script.
-
-When your extension updates or is uninstalled, the context will become invalidated, and will trigger any `ctx.onInvalidated` listeners you add:
-
-```ts
-export default defineContentScript({
-  // ...
-  main(ctx: ContentScriptContext) {
-    // Add custom listeners for stopping work
-    ctx.onInvalidated(() => {
-      // ...
-    });
-
-    // Timeout utilities that are automatically cleared when invalidated
-    ctx.setTimeout(() => {
-      // ...
-    }, 5e3);
-    ctx.setInterval(() => {
-      // ...
-    }, 60e3);
-
-    // Or add event listeners that get removed when invalidated
-    ctx.addEventListener(document, 'visibilitychange', (event) => {
-      // ...
-    });
-
-    // You can also stop fetch requests
-    fetch('...url', { signal: ctx.signal });
-  },
-});
-```
-
-The class extends [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) and provides other utilities for stopping a content script's logic once it becomes invalidated.
-
-:::warning
-When working with content scripts, **you should always use the `ctx` object to stop any async or future work.**
-
-This prevents old content scripts from interfering with new content scripts, and prevents error messages from the console in production.
-
-If you're using a framework like React, Vue, Svelte, etc., make sure you're unmounting your UI properly in the `onRemove` option of [`createShadowRootUi`](https://wxt.dev/guide/content-script-ui.html#shadow-root).
-:::
-
 ## CSS
 
 To include CSS with your content script, import the CSS file at the top of your entrypoint.

docs/guide/assets.md

@@ -63,7 +63,7 @@ Files in the assets directory will be processed by Vite. They are imported in yo
     <!-- ... -->
   </head>
   <body>
-    <img src="~/illustration.svg" />
+    <img src="~/assets/illustration.svg" />
     <!-- ... -->
   </body>
 </html>

docs/guide/development.md

@@ -89,7 +89,7 @@ import { defineRunnerConfig } from 'wxt';
 export default defineRunnerConfig({
   startUrls: ['https://google.com', 'https://duckduckgo.com'],
   chromiumProfile: '/path/to/profile/to/use',
-  chromiumArgs: ['--window-size=400x300'],
+  chromiumArgs: ['--window-size=400,300'],
 });
 ```
 

docs/guide/entrypoints.md

@@ -89,7 +89,7 @@ For a full list of entrypoints and each of their options, see the [`/entrypoints
 
 ### Side Effects
 
-You cannot use imported variables outside the `main` function is JS entrypoints. This includes options, as shown below:
+You cannot use imported variables outside the `main` function in JS entrypoints. This includes options, as shown below:
 
 ```ts
 // entrypoints/content.ts

docs/guide/extension-apis.md

@@ -39,9 +39,9 @@ Then we can use `browser.storage` to save the install date to local storage.
 ```ts
 // background.ts
 export default defineBackground(() => {
-  browser.runtime.onInstall.addEventListener(({ reason }) => {
+  browser.runtime.onInstalled.addListener(({ reason }) => {
     if (reason === 'install') {
-      browser.storage.local.setItem({ installDate: Date.now() });
+      browser.storage.local.set({ installDate: Date.now() });
     }
   });
 });

docs/guide/handling-updates.md

@@ -0,0 +1,116 @@
+# Handling Extension Updates
+
+When releasing an update to your extension, there's a couple of things you need to keep in mind:
+
+[[toc]]
+
+## Content Script Cleanup
+
+Old content scripts are not automatically stopped when an extension updates and reloads. Often, this leads to "Invalidated context" errors in production when a content script from an old version of your extension tries to use a web extension API (ie, the `browser` or `chrome` globals).
+
+WXT provides a utility for handling this process: `ContentScriptContext`. An instance of this class is provided to you automatically inside the `main` function of each content script.
+
+When your extension updates or reloads, the context will become invalidated, and will trigger any `ctx.onInvalidated` listeners you add:
+
+```ts
+export default defineContentScript({
+  main(ctx) {
+    ctx.onInvalidated(() => {
+      // Do something
+    });
+  },
+)
+```
+
+The `ctx` also provides other convenient APIs for stopping your content script without manually calling `onInvalidated` to add a listener:
+
+1. Setting timers:
+   ```ts
+   ctx.setTimeout(() => { ... }, ...);
+   ctx.setInterval(() => { ... }, ...);
+   ctx.requestAnimationFrame(() => { ... });
+   ```
+1. Adding DOM events:
+   ```ts
+   ctx.addEventListener(window, "mousemove", (event) => { ... });
+   ```
+1. Implements [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) for canceling standard APIs:
+   ```ts
+   fetch('...', {
+     signal: ctx.signal,
+   });
+   ```
+
+Other WXT APIs require a `ctx` object so they can clean themselves up. For example, [`createIntegratedUi`](/guide/content-script-ui#integrated), [`createShadowRootUi`](/guide/content-script-ui#shadow-root), and [`createIframeUi`](/guide/content-script-ui#iframe) automatically unmount and stop a UI when the script is invalidated.
+
+:::warning
+When working with content scripts, **you should always use the `ctx` object to stop any async or future work.**
+
+This prevents old content scripts from interfering with new content scripts, and prevents error messages from being logged to the console in production.
+:::
+
+## Testing Permission Changes
+
+When `permissions`/`host_permissions` change during an update, depending on what exactly changed, Chrome will disable your extension until the user accepts the new permissions.
+
+It is possible to test this before you release an update, but it's not a simple process:
+
+1. Get 2 ZIPs of your extension, both generated by `wxt zip`. The first contains a previous version of your extension, the second contains the latest version. Make sure the second ZIP's version is higher than the first's.
+2. Unzip the two ZIP files somewhere next to each other that's easy to locate.
+3. In Chrome, open `chrome://extensions` and make sure developer mode is enabled
+4. Pack the first extension into a CRX, generating a new private key:
+   1. Click "Pack Extension" in the top left
+   2. For "Extension root directory", enter the path to the first extracted zip directory. The directory should contain a `manifest.json` file
+   3. Leave "Private key file" blank
+   4. Click "Pack Extension". This will generate a `.crx` and `.pem` file
+5. Pack the second extension into a CRX, reusing the private key generated by the previous step
+   1. Click "Pack Extension" in the top left
+   2. For "Extension root directory", enter the path to the second extracted zip directory.
+   3. For "Private key file", enter the path to the generated `.pem` private key file
+   4. Click "Pack Extension". This will generate a second `.crx` file.
+6. Install the first CRX file by dragging and dropping it onto the `chrome://extensions` page
+7. Install the second CRX file by dragging and dropping it onthe the `chrome://extensions` page
+
+If a new permission must be accepted, you'll be prompted to accept it after dropping the second CRX file onto the page.
+
+:::Info Note
+Note: Chrome no longer allows self-signed CRX extensions to run, but that's OK for this test case. We're still prompted to accept new permissions, even if we can't interact with the installed extension.
+
+To validate this, you can create a third ZIP file with a rare permission like `geolocation` in the manifest, that's guarenteed to reprompt permissions when added.
+:::
+
+## Update Event
+
+You can setup a callback that runs after your extension updates like so:
+
+```ts
+browser.runtime.onInstalled.addEventListener(({ reason }) => {
+  if (reason === 'update') {
+    // Do something
+  }
+});
+```
+
+If the logic is simple, write a unit test to cover this logic. If you feel the need to manually test this callback, you can either:
+
+1. In dev mode, remove the `if` statement and reload the extension from `chrome://extensions`
+2. Build two ZIPs with the same runtime ID and actually update the extension
+
+The first approach is very straightforward. The second is more complicated...
+
+Here are the steps:
+
+So the steps:
+
+1. Checkout an old commit.
+2. [Add a `key`](https://developer.chrome.com/docs/extensions/reference/manifest/key#keep-consistent-id) to the `manifest` in your `wxt.config.ts`.
+3. Run `wxt zip` to create the first ZIP.
+4. Stash or reset changes and checkout your latest code.
+5. Add back the same `key` to your manifest.
+6. Make sure the extension's version is higher than the first zip. It can be any version that's higher, since you won't be releasing this version.
+7. Run `wxt zip` to create the second ZIP.
+8. In a fresh chrome profile, go to `chrome://extensions`, enable dev mode, and drag and drop the first zip onto the page to install it.
+9. In the extension, play around and setup your test case.
+10. Back on `chrome://extensions`, drag and drop your second zip onto the page.
+
+If you setup the `key` correctly, it will cause the extension to act like it was updated instead of installing a second version of your extension.

docs/guide/manifest.md

@@ -11,7 +11,7 @@ The manifest.json is generated at build-time based on files in the `entrypoints/
 While entrypoints are generated and added to the manifest at build-time, you can customize or add to your `manifest.json` in the config file.
 
 ```ts
-// wxt.config.tsentrypoint of your extension
+// wxt.config.ts entrypoint of your extension
 import { defineConfig } from 'wxt';
 
 export default defineConfig({
@@ -69,7 +69,7 @@ public/
 
 Icon files need to match the following regex to be automatically included in the manifest. Most design software can output icons in one of these formats
 
-<<< @/../src/core/utils/manifest.ts#snippet
+<<< @/../packages/wxt/src/core/utils/manifest.ts#snippet
 
 If you prefer to use filenames in a different format, you can add the icons manually in your `wxt.config.ts` file:
 

docs/guide/storage.md

@@ -10,6 +10,21 @@ WXT provides a simplified API to replace the `browser.storage.*` APIs. Use the `
 import { storage } from 'wxt/storage';
 ```
 
+:::warning
+To use the `wxt/storage` API, the `"storage"` permission must be added to the manifest:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  manifest: {
+    permissions: ['storage'],
+  },
+});
+```
+
+More info on permissions [here](/guide/manifest#permissions).
+:::
+
 [[toc]]
 
 ## Basic Usage
@@ -117,7 +132,7 @@ Now, instead of using the `storage` variable, you can use the helper functions o
 await showChangelogOnUpdate.getValue();
 await showChangelogOnUpdate.setValue(false);
 await showChangelogOnUpdate.removeValue();
-const unwatch = showChangelogOnUpdate.watch(() => {
+const unwatch = showChangelogOnUpdate.watch((newValue) => {
   // ...
 });
 ```

docs/typedoc.json

@@ -1,12 +1,7 @@
 {
-  "entryPoints": [
-    "../src",
-    "../src/client",
-    "../src/browser.ts",
-    "../src/sandbox",
-    "../src/storage.ts",
-    "../src/testing"
-  ],
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPointStrategy": "packages",
+  "entryPoints": ["../packages/wxt"],
   "plugin": ["typedoc-plugin-markdown", "typedoc-vitepress-theme"],
   "out": "./api",
   "githubPages": false,

e2e/tests/manifest-content.test.ts

@@ -1,33 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { TestProject } from '../utils';
-
-describe('Manifest Content', () => {
-  it.each([
-    { browser: undefined, outDir: 'chrome-mv3', expected: undefined },
-    { browser: 'chrome', outDir: 'chrome-mv3', expected: undefined },
-    { browser: 'firefox', outDir: 'firefox-mv2', expected: true },
-    { browser: 'safari', outDir: 'safari-mv2', expected: false },
-  ])(
-    'should respect the per-browser entrypoint option with %j',
-    async ({ browser, expected, outDir }) => {
-      const project = new TestProject();
-
-      project.addFile(
-        'entrypoints/background.ts',
-        `export default defineBackground({
-          persistent: {
-            firefox: true,
-            safari: false,
-          },
-          main: () => {},
-        })`,
-      );
-      await project.build({ browser });
-
-      const safariManifest = await project.getOutputManifest(
-        `.output/${outDir}/manifest.json`,
-      );
-      expect(safariManifest.background.persistent).toBe(expected);
-    },
-  );
-});

package.json

@@ -1,102 +1,15 @@
 {
-  "name": "wxt",
+  "private": true,
   "type": "module",
-  "version": "0.17.8",
-  "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",
     "pnpm": ">=8"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/wxt-dev/wxt"
-  },
-  "homepage": "https://wxt.dev",
-  "keywords": [
-    "vite",
-    "chrome",
-    "web",
-    "extension",
-    "browser",
-    "bundler",
-    "framework"
-  ],
-  "author": {
-    "name": "Aaron Klinker",
-    "email": "aaronklinker1+wxt@gmail.com"
-  },
-  "license": "MIT",
-  "files": [
-    "bin",
-    "dist"
-  ],
-  "bin": {
-    "wxt": "./bin/wxt.mjs",
-    "wxt-publish-extension": "./bin/wxt-publish-extension.cjs"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "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"
-      }
-    },
-    "./client": {
-      "types": "./dist/client.d.ts",
-      "import": "./dist/client.js"
-    },
-    "./sandbox": {
-      "types": "./dist/sandbox.d.ts",
-      "import": "./dist/sandbox.js"
-    },
-    "./browser": {
-      "types": "./dist/browser.d.ts",
-      "import": "./dist/browser.js"
-    },
-    "./testing": {
-      "import": {
-        "types": "./dist/testing.d.ts",
-        "default": "./dist/testing.js"
-      },
-      "require": {
-        "types": "./dist/testing.d.cts",
-        "default": "./dist/testing.cjs"
-      }
-    },
-    "./storage": {
-      "import": {
-        "types": "./dist/storage.d.ts",
-        "default": "./dist/storage.js"
-      },
-      "require": {
-        "types": "./dist/storage.d.cts",
-        "default": "./dist/storage.cjs"
-      }
-    },
-    "./vite-builder-env": {
-      "types": "./dist/vite-builder-env.d.ts"
-    }
-  },
+  "packageManager": "pnpm@8.6.3",
   "scripts": {
-    "wxt": "tsx src/cli/index.ts",
-    "build": "tsx scripts/build.ts",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "lint": "run-p -c -s lint:*",
-    "lint:eslint": "echo 'ESLint: TODO'",
-    "lint:package": "publint",
-    "compile": "run-s -c compile:*",
-    "compile:wxt": "tsc --noEmit",
-    "compile:virtual": "tsc --noEmit -p src/virtual",
+    "check": "check && pnpm -r run check",
     "test": "vitest",
-    "test:coverage": "vitest run --coverage.enabled \"--coverage.include=src/**\" \"--coverage.exclude=src/core/utils/testing/**\" \"--coverage.exclude=**/*.d.ts\"",
+    "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/**\"",
     "prepare": "simple-git-hooks",
     "prepublish": "pnpm -s build",
     "docs:gen": "typedoc --options docs/typedoc.json",
@@ -105,78 +18,26 @@
     "docs:preview": "pnpm -s docs:gen && vitepress preview docs",
     "sync-releases": "pnpx changelogen@latest gh release"
   },
-  "dependencies": {
-    "@aklinker1/rollup-plugin-visualizer": "5.12.0",
-    "@types/webextension-polyfill": "^0.10.5",
-    "@webext-core/fake-browser": "^1.3.1",
-    "@webext-core/isolated-element": "^1.1.1",
-    "@webext-core/match-patterns": "^1.0.3",
-    "async-mutex": "^0.4.0",
-    "c12": "^1.5.1",
-    "cac": "^6.7.14",
-    "chokidar": "^3.5.3",
-    "ci-info": "^4.0.0",
-    "consola": "^3.2.3",
-    "defu": "^6.1.3",
-    "dequal": "^2.0.3",
-    "esbuild": "^0.19.5",
-    "fast-glob": "^3.3.1",
-    "filesize": "^10.0.8",
-    "fs-extra": "^11.1.1",
-    "get-port": "^7.0.0",
-    "giget": "^1.1.3",
-    "hookable": "^5.5.3",
-    "is-wsl": "^3.0.0",
-    "jiti": "^1.21.0",
-    "json5": "^2.2.3",
-    "jszip": "^3.10.1",
-    "linkedom": "^0.16.1",
-    "minimatch": "^9.0.3",
-    "natural-compare": "^1.4.0",
-    "normalize-path": "^3.0.0",
-    "nypm": "^0.3.6",
-    "open": "^10.1.0",
-    "ora": "^7.0.1",
-    "picocolors": "^1.0.0",
-    "prompts": "^2.4.2",
-    "publish-browser-extension": "^2.1.3",
-    "unimport": "^3.4.0",
-    "vite": "^5.1.3",
-    "web-ext-run": "^0.2.0",
-    "webextension-polyfill": "^0.10.0"
-  },
   "devDependencies": {
-    "@faker-js/faker": "^8.3.1",
-    "@types/fs-extra": "^11.0.4",
-    "@types/lodash.merge": "^4.6.9",
-    "@types/natural-compare": "^1.4.3",
-    "@types/node": "^20.10.3",
-    "@types/normalize-path": "^3.0.2",
-    "@types/prompts": "^2.4.9",
+    "@aklinker1/check": "^1.1.1",
     "@vitest/coverage-v8": "^1.0.1",
+    "consola": "^3.2.3",
     "execa": "^8.0.1",
-    "extract-zip": "^2.0.1",
-    "happy-dom": "^13.3.8",
     "lint-staged": "^15.2.0",
-    "lodash.merge": "^4.6.2",
     "npm-run-all": "^4.1.5",
-    "p-map": "^7.0.0",
     "prettier": "^3.1.0",
-    "publint": "^0.2.6",
     "simple-git-hooks": "^2.9.0",
-    "tsup": "^8.0.1",
-    "tsx": "^4.6.2",
     "typedoc": "^0.25.4",
     "typedoc-plugin-markdown": "4.0.0-next.23",
     "typedoc-vitepress-theme": "1.0.0-next.3",
     "typescript": "^5.3.2",
     "vitepress": "1.0.0-rc.34",
-    "vitest": "^1.2.2",
+    "vitest": "^1.5.3",
     "vitest-mock-extended": "^1.3.1",
     "vitest-plugin-random-seed": "^1.0.2",
-    "vue": "^3.3.10"
+    "vue": "^3.3.10",
+    "wxt": "workspace:*"
   },
-  "packageManager": "pnpm@8.6.3",
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
   },

packages/wxt-demo/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "wxt-demo",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm build:deps && wxt",
+    "build:deps": "pnpm --filter wxt build",
+    "build": "pnpm build:deps && wxt build",
+    "build:all": "pnpm build:deps && run-s -s 'build:all:*'",
+    "build:all:chrome-mv3": "wxt build",
+    "build:all:chrome-mv2": "wxt build --mv2",
+    "build:all:firefox-mv3": "wxt build -b firefox --mv3",
+    "build:all:firefox-mv2": "wxt build -b firefox",
+    "test": "pnpm build:deps && vitest",
+    "zip": "pnpm build:deps && wxt zip",
+    "check": "pnpm build:deps && check",
+    "postinstall": "pnpm build:deps && wxt prepare"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.2",
+    "wxt": "workspace:*"
+  }
+}

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

@@ -1,4 +1,4 @@
-import messages from 'public/_locales/en/messages.json';
+import messages from '~/public/_locales/en/messages.json';
 
 export default defineBackground({
   // type: 'module',

packages/wxt-demo/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["../tsconfig.base.json", "./.wxt/tsconfig.json"],
+  "extends": ["../../tsconfig.base.json", "./.wxt/tsconfig.json"],
   "compilerOptions": {
     "allowImportingTsExtensions": true,
     "jsx": "react-jsx"

packages/wxt-demo/vitest.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vitest/config';
+import { defineProject } from 'vitest/config';
 import { WxtVitest } from 'wxt/testing';
 
-export default defineConfig({
+export default defineProject({
   test: {
     mockReset: true,
     restoreMocks: true,

packages/wxt-demo/wxt.config.ts

@@ -12,10 +12,13 @@ export default defineConfig({
       },
     ],
   },
-  alias: {
-    public: 'src/public',
-  },
   zip: {
     downloadPackages: ['sass'],
   },
+  analysis: {
+    open: true,
+  },
+  experimental: {
+    viteRuntime: true,
+  },
 });

packages/wxt/CHANGELOG.md

@@ -1,5 +1,141 @@
 # Changelog
 
+## v0.18.0
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.12...v0.18.0)
+
+### 🚀 Enhancements
+
+- Add zip compression settings ([#605](https://github.com/wxt-dev/wxt/pull/605))
+- Support returning values from scripts executed with the scripting API ([#624](https://github.com/wxt-dev/wxt/pull/624))
+- **experimental:** Load entrypoint options with Vite Runtime API ([#648](https://github.com/wxt-dev/wxt/pull/648))
+
+### 🩹 Fixes
+
+- ⚠️  Automatically move `host_permissions` to `permissions` for MV2 ([#626](https://github.com/wxt-dev/wxt/pull/626))
+- **dep:** Upgrade `@webext-core/isolated-element` to v1.1.2 ([#625](https://github.com/wxt-dev/wxt/pull/625))
+
+### 📖 Documentation
+
+- Add Fluent Read to homepage ([#600](https://github.com/wxt-dev/wxt/pull/600))
+- Fix typo on example for wxt.config.ts. ([#609](https://github.com/wxt-dev/wxt/pull/609))
+- Tix typo in `entrypoints.md` ([#614](https://github.com/wxt-dev/wxt/pull/614))
+- Add Facebook Video Controls to homepage ([#615](https://github.com/wxt-dev/wxt/pull/615))
+- Fix typo in assets page ([a94d673](https://github.com/wxt-dev/wxt/commit/a94d673))
+- Add ElemSnap to homepage ([#621](https://github.com/wxt-dev/wxt/pull/621))
+- Update content script registration JSDoc ([e47519f](https://github.com/wxt-dev/wxt/commit/e47519f))
+- Add docs about handling updates ([acb7554](https://github.com/wxt-dev/wxt/commit/acb7554))
+- Add MS Edge TTS to homepage ([#647](https://github.com/wxt-dev/wxt/pull/647))
+- Document required permission for storage API ([#632](https://github.com/wxt-dev/wxt/pull/632))
+
+### 🏡 Chore
+
+- Update vue template config ([#607](https://github.com/wxt-dev/wxt/pull/607))
+- **deps-dev:** Bump lint-staged from 15.2.1 to 15.2.2 ([#637](https://github.com/wxt-dev/wxt/pull/637))
+- **deps-dev:** Bump publint from 0.2.6 to 0.2.7 ([#639](https://github.com/wxt-dev/wxt/pull/639))
+- **deps-dev:** Bump simple-git-hooks from 2.9.0 to 2.11.1 ([#640](https://github.com/wxt-dev/wxt/pull/640))
+- Refactor repo to a standard monorepo ([#646](https://github.com/wxt-dev/wxt/pull/646))
+- Fix formatting after monorepo refactor ([6ca3767](https://github.com/wxt-dev/wxt/commit/6ca3767))
+
+#### ⚠️ Breaking Changes
+
+- ⚠️  Automatically move `host_permissions` to `permissions` for MV2 ([#626](https://github.com/wxt-dev/wxt/pull/626))
+
+### ❤️ Contributors
+
+- Aaron <aaronklinker1@gmail.com>
+- Alegal200 <alex.gallez11@gmail.com>
+- Yacine-bens ([@yacine-bens](http://github.com/yacine-bens))
+- Ayden <itxcc420@gmail.com>
+- Wuzequanyouzi ([@wuzequanyouzi](http://github.com/wuzequanyouzi))
+- Can Rau ([@CanRau](http://github.com/CanRau))
+- 日高 凌 ([@ryohidaka](http://github.com/ryohidaka))
+- Bas Van Zanten <bas.van.zanten007@gmail.com>
+- ThinkStu ([@Bistutu](http://github.com/Bistutu))
+
+## v0.17.12
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.11...v0.17.12)
+
+### 🚀 Enhancements
+
+- Add hooks for extending vite config ([#599](https://github.com/wxt-dev/wxt/pull/599))
+
+### 🩹 Fixes
+
+- **content-script-ui:** Properly assign and unassign mounted value ([#598](https://github.com/wxt-dev/wxt/pull/598))
+
+### 📖 Documentation
+
+- Add discord server link ([#593](https://github.com/wxt-dev/wxt/pull/593))
+
+### 🏡 Chore
+
+- Remove unnecssary 'Omit' types ([db57c8e](https://github.com/wxt-dev/wxt/commit/db57c8e))
+- **deps-dev:** Bump @aklinker1/check from 1.1.1 to 1.2.0 ([#588](https://github.com/wxt-dev/wxt/pull/588))
+- **deps-dev:** Bump vue from 3.3.10 to 3.4.21 ([#589](https://github.com/wxt-dev/wxt/pull/589))
+- **deps-dev:** Bump sass from 1.69.5 to 1.72.0 ([#591](https://github.com/wxt-dev/wxt/pull/591))
+
+## v0.17.11
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.10...v0.17.11)
+
+### 🩹 Fixes
+
+- Resolve absolute paths from the public directory properly ([#583](https://github.com/wxt-dev/wxt/pull/583))
+
+### 📖 Documentation
+
+- Fix `zip.includeSources` example ([16fc584](https://github.com/wxt-dev/wxt/commit/16fc584))
+- Add "GitHub Custom Notifier" to homepage ([#580](https://github.com/wxt-dev/wxt/pull/580))
+
+### 🏡 Chore
+
+- Simplify virtual module setup ([#581](https://github.com/wxt-dev/wxt/pull/581))
+- Add some array utils ([#582](https://github.com/wxt-dev/wxt/pull/582))
+- Extract helper function ([d3b14af](https://github.com/wxt-dev/wxt/commit/d3b14af))
+
+### ❤️ Contributors
+
+- Qiwei Yang ([@qiweiii](http://github.com/qiweiii))
+
+## v0.17.10
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.9...v0.17.10)
+
+### 🚀 Enhancements
+
+- Add `dev.server.port` config ([#577](https://github.com/wxt-dev/wxt/pull/577))
+
+### 🏡 Chore
+
+- Use `@aklinker1/check` to simplify checks setup ([#550](https://github.com/wxt-dev/wxt/pull/550))
+- Refactor order of config resolution ([#578](https://github.com/wxt-dev/wxt/pull/578))
+
+### ❤️ Contributors
+
+- Zizheng Tai ([@zizhengtai](http://github.com/zizhengtai))
+
+## v0.17.9
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.8...v0.17.9)
+
+### 🚀 Enhancements
+
+- Add `{{mode}}` Template Variable ([#566](https://github.com/wxt-dev/wxt/pull/566))
+
+### 🩹 Fixes
+
+- Don't override `wxt.config.ts` options when CLI flags are not passed ([#567](https://github.com/wxt-dev/wxt/pull/567))
+
+### 🏡 Chore
+
+- Merge user config using `defu` ([#568](https://github.com/wxt-dev/wxt/pull/568))
+
+### ❤️ Contributors
+
+- Guillaume ([@GuiEpi](http://github.com/GuiEpi))
+
 ## v0.17.8
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.7...v0.17.8)

packages/wxt/README.md

@@ -29,6 +29,8 @@
   <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://discord.gg/ZFsZqGery9" target="_blank">Discord</a>
 </p>
 
 ![Example CLI Output](./docs/assets/cli-output.png)

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

@@ -9,16 +9,21 @@ const hooks: WxtHooks = {
   'build:manifestGenerated': vi.fn(),
   'entrypoints:resolved': vi.fn(),
   'entrypoints:grouped': vi.fn(),
+  'vite:build:extendConfig': vi.fn(),
+  'vite:devServer:extendConfig': vi.fn(),
 };
 
-function expectHooksToBeCalled(called: Record<keyof WxtHooks, boolean>) {
+function expectHooksToBeCalled(
+  called: Record<keyof WxtHooks, boolean | number>,
+) {
   Object.keys(hooks).forEach((key) => {
     const hookName = key as keyof WxtHooks;
-    const times = called[hookName] ? 1 : 0;
+    const value = called[hookName];
+    const times = typeof value === 'number' ? value : value ? 1 : 0;
     expect(
       hooks[hookName],
       `Expected "${hookName}" to be called ${times} time(s)`,
-    ).toBeCalledTimes(called[hookName] ? 1 : 0);
+    ).toBeCalledTimes(times);
   });
 }
 
@@ -40,6 +45,8 @@ describe('Hooks', () => {
       'build:manifestGenerated': false,
       'entrypoints:grouped': false,
       'entrypoints:resolved': true,
+      'vite:build:extendConfig': false,
+      'vite:devServer:extendConfig': false,
     });
   });
 
@@ -56,6 +63,8 @@ describe('Hooks', () => {
       'build:manifestGenerated': true,
       'entrypoints:grouped': true,
       'entrypoints:resolved': true,
+      'vite:build:extendConfig': 1,
+      'vite:devServer:extendConfig': false,
     });
   });
 
@@ -72,6 +81,8 @@ describe('Hooks', () => {
       'build:manifestGenerated': true,
       'entrypoints:grouped': true,
       'entrypoints:resolved': true,
+      'vite:build:extendConfig': 1,
+      'vite:devServer:extendConfig': false,
     });
   });
 
@@ -94,6 +105,8 @@ describe('Hooks', () => {
       'build:manifestGenerated': true,
       'entrypoints:grouped': true,
       'entrypoints:resolved': true,
+      'vite:build:extendConfig': 2,
+      'vite:devServer:extendConfig': 1,
     });
   });
 });

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

@@ -3,6 +3,7 @@ import { TestProject } 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 () => {
@@ -11,6 +12,7 @@ describe('Init command', () => {
     await execaCommand(`pnpm -s wxt init ${project.root} -t vue --pm npm`, {
       env: { ...process.env, CI: 'true' },
       stdio: 'ignore',
+      cwd: WXT_PACKAGE_DIR,
     });
     const files = await glob('**/*', {
       cwd: project.root,
@@ -46,13 +48,14 @@ describe('Init command', () => {
 
   it('should throw an error if the directory is not empty', async () => {
     const project = new TestProject();
-    await mkdir(project.root);
+    await mkdir(project.root, { recursive: true });
     await writeJson(project.resolvePath('package.json'), {});
 
     await expect(() =>
       execaCommand(`pnpm -s wxt init ${project.root} -t vue --pm npm`, {
         env: { ...process.env, CI: 'true' },
         stdio: 'ignore',
+        cwd: WXT_PACKAGE_DIR,
       }),
     ).rejects.toThrowError('Command failed with exit code 1:');
   });

packages/wxt/e2e/tests/manifest-content.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { TestProject } from '../utils';
+
+describe.each([true, false])(
+  'Manifest Content (Vite runtime? %s)',
+  (viteRuntime) => {
+    it.each([
+      { browser: undefined, outDir: 'chrome-mv3', expected: undefined },
+      { browser: 'chrome', outDir: 'chrome-mv3', expected: undefined },
+      { browser: 'firefox', outDir: 'firefox-mv2', expected: true },
+      { browser: 'safari', outDir: 'safari-mv2', expected: false },
+    ])(
+      'should respect the per-browser entrypoint option with %j',
+      async ({ browser, expected, outDir }) => {
+        const project = new TestProject();
+
+        project.addFile(
+          'entrypoints/background.ts',
+          `export default defineBackground({
+          persistent: {
+            firefox: true,
+            safari: false,
+          },
+          main: () => {},
+        })`,
+        );
+        await project.build({ browser, experimental: { viteRuntime } });
+
+        const safariManifest = await project.getOutputManifest(
+          `.output/${outDir}/manifest.json`,
+        );
+        expect(safariManifest.background.persistent).toBe(expected);
+      },
+    );
+  },
+);

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

@@ -272,7 +272,7 @@ describe('Output Directory Structure', () => {
       .toMatchInlineSnapshot(`
         ".output/chrome-mv3/background.js
         ----------------------------------------
-        import { l as logHello } from "./chunks/log-bezs0tt4.js";
+        import { l as logHello } from "./chunks/log-BsZv2eRn.js";
         function defineBackground(arg) {
           if (typeof arg === "function")
             return { main: arg };
@@ -362,11 +362,13 @@ describe('Output Directory Structure', () => {
           function logHello(name) {
             console.log(\`Hello \${name}!\`);
           }
+          _background;
           const definition = defineBackground({
             main() {
               logHello("background");
             }
           });
+          _background;
           chrome;
           function print(method, ...args) {
             return;
@@ -389,6 +391,7 @@ describe('Output Directory Structure', () => {
             throw err;
           }
         })();
+        _background;
         "
       `);
   });

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

@@ -119,7 +119,7 @@ describe('User Config', () => {
     project.addFile(
       'test.config.ts',
       `import { defineConfig } from 'wxt';
-      
+
       export default defineConfig({
         outDir: ".custom-output",
         srcDir: "src",

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

@@ -71,4 +71,29 @@ describe('Zipping', () => {
       }"
     `);
   });
+
+  it('should correctly apply template variables for zip file names based on provided config', async () => {
+    const project = new TestProject({
+      name: 'test',
+      version: '1.0.0',
+    });
+    project.addFile(
+      'entrypoints/background.ts',
+      'export default defineBackground(() => {});',
+    );
+    const artifactZip = '.output/test-1.0.0-firefox-development.zip';
+    const sourcesZip = '.output/test-1.0.0-development-sources.zip';
+
+    await project.zip({
+      browser: 'firefox',
+      mode: 'development',
+      zip: {
+        artifactTemplate: '{{name}}-{{version}}-{{browser}}-{{mode}}.zip',
+        sourcesTemplate: '{{name}}-{{version}}-{{mode}}-sources.zip',
+      },
+    });
+
+    expect(await project.fileExists(artifactZip)).toBe(true);
+    expect(await project.fileExists(sourcesZip)).toBe(true);
+  });
 });

packages/wxt/e2e/utils.ts

@@ -1,5 +1,5 @@
-import { dirname, join, relative, resolve } from 'path';
-import fs from 'fs-extra';
+import { dirname, relative, resolve } from 'path';
+import fs, { mkdir } from 'fs-extra';
 import glob from 'fast-glob';
 import { execaCommand } from 'execa';
 import {
@@ -13,6 +13,13 @@ import {
 import { normalizePath } from '../src/core/utils/paths';
 import merge from 'lodash.merge';
 
+// Run "pnpm wxt" to use the "wxt" dev script, not the "wxt" binary from the
+// wxt package. This uses the TS files instead of the compiled JS package
+// files.
+export const WXT_PACKAGE_DIR = resolve(__dirname, '..');
+
+export const E2E_DIR = resolve(WXT_PACKAGE_DIR, 'e2e');
+
 export class TestProject {
   files: Array<[string, string]> = [];
   config: UserConfig | undefined;
@@ -23,7 +30,7 @@ export class TestProject {
     // file is cached and cannot be different between each test. Instead, we add a random ID to the
     // end to make each test's path unique.
     const id = Math.random().toString(32).substring(3);
-    this.root = join('e2e/dist', id);
+    this.root = resolve(E2E_DIR, 'dist', id);
     this.files.push([
       'package.json',
       JSON.stringify(
@@ -113,6 +120,9 @@ export class TestProject {
     await execaCommand('pnpm --ignore-workspace i --ignore-scripts', {
       cwd: this.root,
     });
+    await mkdir(resolve(this.root, 'public'), { recursive: true }).catch(
+      () => {},
+    );
   }
 
   /**
@@ -131,9 +141,7 @@ export class TestProject {
    * that can be used in a snapshot.
    */
   serializeWxtDir(): Promise<string> {
-    return this.serializeDir(
-      resolve(this.config?.srcDir ?? this.root, '.wxt/types'),
-    );
+    return this.serializeDir(resolve(this.root, '.wxt/types'));
   }
 
   /**

packages/wxt/package.json

@@ -0,0 +1,152 @@
+{
+  "name": "wxt",
+  "type": "module",
+  "version": "0.18.0",
+  "description": "Next gen framework for developing web extensions",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wxt-dev/wxt"
+  },
+  "homepage": "https://wxt.dev",
+  "keywords": [
+    "vite",
+    "chrome",
+    "web",
+    "extension",
+    "browser",
+    "bundler",
+    "framework"
+  ],
+  "author": {
+    "name": "Aaron Klinker",
+    "email": "aaronklinker1+wxt@gmail.com"
+  },
+  "license": "MIT",
+  "files": [
+    "bin",
+    "dist"
+  ],
+  "bin": {
+    "wxt": "./bin/wxt.mjs",
+    "wxt-publish-extension": "./bin/wxt-publish-extension.cjs"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "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"
+      }
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js"
+    },
+    "./sandbox": {
+      "types": "./dist/sandbox.d.ts",
+      "import": "./dist/sandbox.js"
+    },
+    "./browser": {
+      "types": "./dist/browser.d.ts",
+      "import": "./dist/browser.js"
+    },
+    "./testing": {
+      "import": {
+        "types": "./dist/testing.d.ts",
+        "default": "./dist/testing.js"
+      },
+      "require": {
+        "types": "./dist/testing.d.cts",
+        "default": "./dist/testing.cjs"
+      }
+    },
+    "./storage": {
+      "import": {
+        "types": "./dist/storage.d.ts",
+        "default": "./dist/storage.js"
+      },
+      "require": {
+        "types": "./dist/storage.d.cts",
+        "default": "./dist/storage.cjs"
+      }
+    },
+    "./vite-builder-env": {
+      "types": "./dist/vite-builder-env.d.ts"
+    }
+  },
+  "scripts": {
+    "wxt": "tsx src/cli/index.ts",
+    "build": "tsx scripts/build.ts",
+    "check": "run-s -c check:*",
+    "check:default": "check",
+    "check:tsc-virtual": "tsc --noEmit -p src/virtual",
+    "test": "vitest",
+    "test:e2e": "vitest -r e2e",
+    "test:e2e:2": "vitest --config e2e/vitest.config.ts"
+  },
+  "dependencies": {
+    "@aklinker1/rollup-plugin-visualizer": "5.12.0",
+    "@types/webextension-polyfill": "^0.10.5",
+    "@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.0",
+    "c12": "^1.5.1",
+    "cac": "^6.7.14",
+    "chokidar": "^3.5.3",
+    "ci-info": "^4.0.0",
+    "defu": "^6.1.3",
+    "dequal": "^2.0.3",
+    "esbuild": "^0.19.5",
+    "fast-glob": "^3.3.1",
+    "filesize": "^10.0.8",
+    "fs-extra": "^11.1.1",
+    "get-port": "^7.0.0",
+    "giget": "^1.1.3",
+    "hookable": "^5.5.3",
+    "is-wsl": "^3.0.0",
+    "jiti": "^1.21.0",
+    "json5": "^2.2.3",
+    "jszip": "^3.10.1",
+    "linkedom": "^0.16.1",
+    "magicast": "^0.3.4",
+    "minimatch": "^9.0.3",
+    "natural-compare": "^1.4.0",
+    "normalize-path": "^3.0.0",
+    "nypm": "^0.3.6",
+    "open": "^10.1.0",
+    "ora": "^7.0.1",
+    "picocolors": "^1.0.0",
+    "prompts": "^2.4.2",
+    "publish-browser-extension": "^2.1.3",
+    "unimport": "^3.4.0",
+    "vite": "^5.2.8",
+    "web-ext-run": "^0.2.0",
+    "webextension-polyfill": "^0.10.0"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.1.1",
+    "@faker-js/faker": "^8.3.1",
+    "@types/fs-extra": "^11.0.4",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/natural-compare": "^1.4.3",
+    "@types/node": "^20.10.3",
+    "@types/normalize-path": "^3.0.2",
+    "@types/prompts": "^2.4.9",
+    "execa": "^8.0.1",
+    "extract-zip": "^2.0.1",
+    "happy-dom": "^13.3.8",
+    "lodash.merge": "^4.6.2",
+    "p-map": "^7.0.0",
+    "publint": "^0.2.6",
+    "tsup": "^8.0.1",
+    "tsx": "^4.6.2",
+    "typescript": "^5.3.2"
+  }
+}

packages/wxt/scripts/build.ts

@@ -8,6 +8,10 @@ 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();
@@ -20,12 +24,7 @@ const preset = {
   dts: true,
   silent: true,
   sourcemap: false,
-  external: [
-    'virtual:user-unlisted-script',
-    'virtual:user-content-script-isolated-world',
-    'virtual:user-content-script-main-world',
-    'virtual:user-background',
-  ],
+  external: virtualEntrypointModuleNames.map((name) => `virtual:user-${name}`),
 } satisfies tsup.Options;
 
 function spinnerPMap(configs: tsup.Options[]) {
@@ -74,17 +73,13 @@ const config: tsup.Options[] = [
   },
   {
     ...preset,
-    entry: {
-      'virtual/background-entrypoint': 'src/virtual/background-entrypoint.ts',
-      'virtual/content-script-isolated-world-entrypoint':
-        'src/virtual/content-script-isolated-world-entrypoint.ts',
-      'virtual/content-script-main-world-entrypoint':
-        'src/virtual/content-script-main-world-entrypoint.ts',
-      'virtual/mock-browser': 'src/virtual/mock-browser.ts',
-      'virtual/reload-html': 'src/virtual/reload-html.ts',
-      'virtual/unlisted-script-entrypoint':
-        'src/virtual/unlisted-script-entrypoint.ts',
-    },
+    entry: virtualModuleNames.reduce<Record<string, string>>(
+      (acc, moduleName) => {
+        acc[`virtual/${moduleName}`] = `src/virtual/${moduleName}.ts`;
+        return acc;
+      },
+      {},
+    ),
     format: ['esm'],
     splitting: false,
     dts: false,

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

@@ -116,6 +116,20 @@ describe('CLI', () => {
       });
     });
 
+    it('should respect passing --port', async () => {
+      const expectedPort = 3100;
+      mockArgv('--port', String(expectedPort));
+      await importCli();
+
+      expect(createServerMock).toBeCalledWith({
+        dev: {
+          server: {
+            port: expectedPort,
+          },
+        },
+      });
+    });
+
     it('should respect passing --debug', async () => {
       mockArgv('--debug');
       await importCli();

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

@@ -1,5 +1,6 @@
 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';
@@ -56,8 +57,8 @@ export function getArrayFromFlags<T>(
   flags: any,
   name: string,
 ): T[] | undefined {
-  const array = [flags[name]].flat() as Array<T | undefined>;
-  const result = array.filter((item) => item != null) as T[];
+  const array = toArray<T | undefined>(flags[name]);
+  const result = filterTruthy(array);
   return result.length ? result : undefined;
 }
 

packages/wxt/src/cli/commands.ts

@@ -16,6 +16,7 @@ cli
   .option('-c, --config <file>', 'use specified config file')
   .option('-m, --mode <mode>', 'set env mode')
   .option('-b, --browser <browser>', 'specify a browser')
+  .option('-p, --port <port>', 'specify a port for the dev server')
   .option(
     '-e, --filter-entrypoint <entrypoint>',
     'only build specific entrypoints',
@@ -35,6 +36,14 @@ cli
         configFile: flags.config,
         debug: flags.debug,
         filterEntrypoints: getArrayFromFlags(flags, 'filterEntrypoint'),
+        dev:
+          flags.port == null
+            ? undefined
+            : {
+                server: {
+                  port: parseInt(flags.port),
+                },
+              },
       });
       await server.start();
       return { isOngoing: true };

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

@@ -72,7 +72,7 @@ describe('Content Script UIs', () => {
       it('should load a shadow root to the page', async () => {
         const ui = await createShadowRootUi(ctx, {
           position: 'inline',
-          name: 'test',
+          name: 'test-component',
           onMount(uiContainer) {
             appendTestApp(uiContainer);
           },
@@ -80,7 +80,7 @@ describe('Content Script UIs', () => {
         ui.mount();
 
         expect(
-          document.querySelector('test[data-wxt-shadow-root]'),
+          document.querySelector('test-component[data-wxt-shadow-root]'),
         ).not.toBeNull();
         expect(ui.shadow.querySelector('app')).not.toBeNull();
       });
@@ -94,7 +94,7 @@ describe('Content Script UIs', () => {
         async (input, expected) => {
           const ui = await createShadowRootUi(ctx, {
             position: 'inline',
-            name: 'test',
+            name: 'test-component',
             mode: input,
             onMount: appendTestApp,
           });
@@ -404,4 +404,62 @@ describe('Content Script UIs', () => {
       });
     });
   });
+
+  describe('mounted value', () => {
+    describe('integrated', () => {
+      it('should set the mounted value based on the onMounted return value', () => {
+        const expected = Symbol();
+
+        const ui = createIntegratedUi(new ContentScriptContext('test'), {
+          position: 'inline',
+          onMount: () => expected,
+        });
+        expect(ui.mounted).toBeUndefined();
+
+        ui.mount();
+        expect(ui.mounted).toBe(expected);
+
+        ui.remove();
+        expect(ui.mounted).toBeUndefined();
+      });
+    });
+
+    describe('iframe', () => {
+      it('should set the mounted value based on the onMounted return value', async () => {
+        const expected = Symbol();
+
+        const ui = createIframeUi(new ContentScriptContext('test'), {
+          page: '',
+          position: 'inline',
+          onMount: () => expected,
+        });
+        expect(ui.mounted).toBeUndefined();
+
+        ui.mount();
+        expect(ui.mounted).toBe(expected);
+
+        ui.remove();
+        expect(ui.mounted).toBeUndefined();
+      });
+    });
+
+    describe('shadow-root', () => {
+      it('should set the mounted value based on the onMounted return value', async () => {
+        const expected = Symbol();
+
+        const ui = await createShadowRootUi(new ContentScriptContext('test'), {
+          name: 'test-component',
+          position: 'inline',
+          onMount: () => expected,
+        });
+        expect(ui.mounted).toBeUndefined();
+
+        ui.mount();
+        expect(ui.mounted).toBe(expected);
+
+        ui.remove();
+        expect(ui.mounted).toBeUndefined();
+      });
+    });
+  });
 });

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

@@ -35,12 +35,15 @@ export function createIntegratedUi<TMounted>(
   const remove = () => {
     options.onRemove?.(mounted);
     wrapper.remove();
+    mounted = undefined;
   };
 
   ctx.onInvalidated(remove);
 
   return {
-    mounted,
+    get mounted() {
+      return mounted;
+    },
     wrapper,
     mount,
     remove,
@@ -71,12 +74,15 @@ export function createIframeUi<TMounted>(
   const remove = () => {
     options.onRemove?.(mounted);
     wrapper.remove();
+    mounted = undefined;
   };
 
   ctx.onInvalidated(remove);
 
   return {
-    mounted,
+    get mounted() {
+      return mounted;
+    },
     iframe,
     wrapper,
     mount,
@@ -116,7 +122,7 @@ export async function createShadowRootUi<TMounted>(
   });
   shadowHost.setAttribute('data-wxt-shadow-root', '');
 
-  let mounted: TMounted;
+  let mounted: TMounted | undefined;
 
   const mount = () => {
     // Add shadow root element to DOM
@@ -134,6 +140,8 @@ export async function createShadowRootUi<TMounted>(
     // Remove children from uiContainer
     while (uiContainer.lastChild)
       uiContainer.removeChild(uiContainer.lastChild);
+    // Clear mounted value
+    mounted = undefined;
   };
 
   ctx.onInvalidated(remove);
@@ -144,7 +152,9 @@ export async function createShadowRootUi<TMounted>(
     uiContainer,
     mount,
     remove,
-    mounted: mounted!,
+    get mounted() {
+      return mounted;
+    },
   };
 }
 

packages/wxt/src/core/builders/vite/__tests__/fixtures/module.ts

@@ -0,0 +1,12 @@
+import { a } from './test';
+
+function defineSomething<T>(config: T): T {
+  return config;
+}
+
+export default defineSomething({
+  option: 'some value',
+  main: () => {
+    console.log('main', a);
+  },
+});

packages/wxt/src/core/builders/vite/__tests__/fixtures/test.ts

@@ -0,0 +1,2 @@
+console.log('Side-effect in test.ts');
+export const a = 'a';

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

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import { createViteBuilder } from '../index';
+import { fakeResolvedConfig } from '~/core/utils/testing/fake-objects';
+import { createHooks } from 'hookable';
+
+describe('Vite Builder', () => {
+  describe('importEntrypoint', () => {
+    it('should import entrypoints, removing runtime values (like the main function)', async () => {
+      const {
+        default: { main: _, ...expected },
+      } = await import('./fixtures/module');
+      const builder = await createViteBuilder(
+        fakeResolvedConfig({ root: __dirname }),
+        createHooks(),
+      );
+      const actual = await builder.importEntrypoint<{ default: any }>(
+        './fixtures/module.ts',
+      );
+      expect(actual).toEqual(expected);
+    });
+  });
+});

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

@@ -2,23 +2,29 @@ import type * as vite from 'vite';
 import {
   BuildStepOutput,
   Entrypoint,
-  InlineConfig,
   ResolvedConfig,
-  UserConfig,
-  VirtualEntrypointType,
   WxtBuilder,
   WxtBuilderServer,
+  WxtDevServer,
+  WxtHooks,
 } from '~/types';
 import * as wxtPlugins from './plugins';
 import {
   getEntrypointBundlePath,
   isHtmlEntrypoint,
 } from '~/core/utils/entrypoints';
+import {
+  VirtualEntrypointType,
+  VirtualModuleId,
+} from '~/core/utils/virtual-modules';
+import { Hookable } from 'hookable';
+import { toArray } from '~/core/utils/arrays';
+import { safeVarName } from '~/core/utils/strings';
 
 export async function createViteBuilder(
-  inlineConfig: InlineConfig,
-  userConfig: UserConfig,
-  wxtConfig: Omit<ResolvedConfig, 'builder'>,
+  wxtConfig: ResolvedConfig,
+  hooks: Hookable<WxtHooks>,
+  server?: WxtDevServer,
 ): Promise<WxtBuilder> {
   const vite = await import('vite');
 
@@ -26,14 +32,7 @@ export async function createViteBuilder(
    * Returns the base vite config shared by all builds based on the inline and user config.
    */
   const getBaseConfig = async () => {
-    const resolvedInlineConfig =
-      (await inlineConfig.vite?.(wxtConfig.env)) ?? {};
-    const resolvedUserConfig = (await userConfig.vite?.(wxtConfig.env)) ?? {};
-
-    const config: vite.InlineConfig = vite.mergeConfig(
-      resolvedUserConfig,
-      resolvedInlineConfig,
-    );
+    const config: vite.InlineConfig = await wxtConfig.vite(wxtConfig.env);
 
     config.root = wxtConfig.root;
     config.configFile = false;
@@ -41,6 +40,8 @@ export async function createViteBuilder(
     config.mode = wxtConfig.mode;
 
     config.build ??= {};
+    config.publicDir = wxtConfig.publicDir;
+    config.build.copyPublicDir = false;
     config.build.outDir = wxtConfig.outDir;
     config.build.emptyOutDir = false;
     // Disable minification for the dev command
@@ -55,13 +56,10 @@ export async function createViteBuilder(
     config.plugins ??= [];
     config.plugins.push(
       wxtPlugins.download(wxtConfig),
-      wxtPlugins.devHtmlPrerender(wxtConfig),
+      wxtPlugins.devHtmlPrerender(wxtConfig, server),
       wxtPlugins.unimport(wxtConfig),
-      wxtPlugins.virtualEntrypoint('background', wxtConfig),
-      wxtPlugins.virtualEntrypoint('content-script-isolated-world', wxtConfig),
-      wxtPlugins.virtualEntrypoint('content-script-main-world', wxtConfig),
-      wxtPlugins.virtualEntrypoint('unlisted-script', wxtConfig),
-      wxtPlugins.devServerGlobals(wxtConfig),
+      wxtPlugins.resolveVirtualModules(wxtConfig),
+      wxtPlugins.devServerGlobals(wxtConfig, server),
       wxtPlugins.tsconfigPaths(wxtConfig),
       wxtPlugins.noopBackground(),
       wxtPlugins.globals(wxtConfig),
@@ -90,14 +88,22 @@ export async function createViteBuilder(
       plugins.push(wxtPlugins.cssEntrypoints(entrypoint, wxtConfig));
     }
 
+    const iifeReturnValueName = safeVarName(entrypoint.name);
     const libMode: vite.UserConfig = {
       mode: wxtConfig.mode,
       plugins,
+      esbuild: {
+        // Add a footer with the returned value so it can return values to `scripting.executeScript`
+        // Footer is added apart of esbuild to make sure it's not minified. It
+        // get's removed if added to `build.rollupOptions.output.footer`
+        // See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/executeScript#return_value
+        footer: iifeReturnValueName + ';',
+      },
       build: {
         lib: {
           entry,
           formats: ['iife'],
-          name: '_',
+          name: iifeReturnValueName,
           fileName: entrypoint.name,
         },
         rollupOptions: {
@@ -197,6 +203,22 @@ export async function createViteBuilder(
   return {
     name: 'Vite',
     version: vite.version,
+    async importEntrypoint(url) {
+      const baseConfig = await getBaseConfig();
+      const envConfig: vite.InlineConfig = {
+        plugins: [
+          wxtPlugins.webextensionPolyfillMock(wxtConfig),
+          wxtPlugins.removeEntrypointMainFunction(wxtConfig, url),
+        ],
+      };
+      const config = vite.mergeConfig(baseConfig, envConfig);
+      const server = await vite.createServer(config);
+      await server.listen();
+      const runtime = await vite.createViteRuntime(server, { hmr: false });
+      const module = await runtime.executeUrl(url);
+      await server.close();
+      return module.default;
+    },
     async build(group) {
       let entryConfig;
       if (Array.isArray(group)) entryConfig = getMultiPageConfig(group);
@@ -205,6 +227,11 @@ export async function createViteBuilder(
       else entryConfig = getLibModeConfig(group);
 
       const buildConfig = vite.mergeConfig(await getBaseConfig(), entryConfig);
+      await hooks.callHook(
+        'vite:build:extendConfig',
+        toArray(group),
+        buildConfig,
+      );
       const result = await vite.build(buildConfig);
       return {
         entrypoints: group,
@@ -221,9 +248,9 @@ export async function createViteBuilder(
         },
       };
       const baseConfig = await getBaseConfig();
-      const viteServer = await vite.createServer(
-        vite.mergeConfig(baseConfig, serverConfig),
-      );
+      const finalConfig = vite.mergeConfig(baseConfig, serverConfig);
+      await hooks.callHook('vite:devServer:extendConfig', finalConfig);
+      const viteServer = await vite.createServer(finalConfig);
 
       const server: WxtBuilderServer = {
         async listen() {
@@ -277,7 +304,10 @@ function getRollupEntry(entrypoint: Entrypoint): string {
           : 'content-script-isolated-world';
       break;
   }
-  return virtualEntrypointType
-    ? `virtual:wxt-${virtualEntrypointType}?${entrypoint.inputPath}`
-    : entrypoint.inputPath;
+
+  if (virtualEntrypointType) {
+    const moduleId: VirtualModuleId = `virtual:wxt-${virtualEntrypointType}-entrypoint`;
+    return `${moduleId}?${entrypoint.inputPath}`;
+  }
+  return entrypoint.inputPath;
 }

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

@@ -5,9 +5,7 @@ import path from 'node:path';
 
 let increment = 0;
 
-export function bundleAnalysis(
-  config: Omit<ResolvedConfig, 'builder'>,
-): vite.Plugin {
+export function bundleAnalysis(config: ResolvedConfig): vite.Plugin {
   return visualizer({
     template: 'raw-data',
     filename: path.resolve(

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

@@ -14,7 +14,7 @@ import { getEntrypointBundlePath } from '~/core/utils/entrypoints';
  */
 export function cssEntrypoints(
   entrypoint: Entrypoint,
-  config: Omit<ResolvedConfig, 'builder'>,
+  config: ResolvedConfig,
 ): vite.Plugin {
   return {
     name: 'wxt:css-entrypoint',

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

@@ -12,7 +12,8 @@ let reactRefreshPreamble = '';
  * Pre-renders the HTML entrypoints when building the extension to connect to the dev server.
  */
 export function devHtmlPrerender(
-  config: Omit<ResolvedConfig, 'builder'>,
+  config: ResolvedConfig,
+  server: WxtDevServer | undefined,
 ): vite.PluginOption {
   const htmlReloadId = '@wxt/reload-html';
   const resolvedHtmlReloadId = resolve(
@@ -38,7 +39,6 @@ export function devHtmlPrerender(
       // 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 ||
@@ -68,7 +68,6 @@ export function devHtmlPrerender(
 
       // 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}`;
@@ -134,7 +133,7 @@ export function devHtmlPrerender(
 }
 
 export function pointToDevServer(
-  config: Omit<ResolvedConfig, 'builder'>,
+  config: ResolvedConfig,
   server: WxtDevServer,
   id: string,
   document: Document,

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

@@ -1,22 +1,23 @@
 import { Plugin } from 'vite';
-import { ResolvedConfig } from '~/types';
+import { ResolvedConfig, WxtDevServer } from '~/types';
 
 /**
  * Defines global constants about the dev server. Helps scripts connect to the server's web socket.
  */
 export function devServerGlobals(
-  config: Omit<ResolvedConfig, 'builder'>,
+  config: ResolvedConfig,
+  server: WxtDevServer | undefined,
 ): Plugin {
   return {
     name: 'wxt:dev-server-globals',
     config() {
-      if (config.server == null || config.command == 'build') return;
+      if (server == null || config.command == 'build') return;
 
       return {
         define: {
           __DEV_SERVER_PROTOCOL__: JSON.stringify('ws:'),
-          __DEV_SERVER_HOSTNAME__: JSON.stringify(config.server.hostname),
-          __DEV_SERVER_PORT__: JSON.stringify(config.server.port),
+          __DEV_SERVER_HOSTNAME__: JSON.stringify(server.hostname),
+          __DEV_SERVER_PORT__: JSON.stringify(server.port),
         },
       };
     },

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

@@ -9,7 +9,7 @@ import { fetchCached } from '~/core/utils/network';
  * @example
  * import "url:https://google-tagmanager.com/gtag?id=XYZ";
  */
-export function download(config: Omit<ResolvedConfig, 'builder'>): Plugin {
+export function download(config: ResolvedConfig): Plugin {
   return {
     name: 'wxt:download',
     resolveId(id) {

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

@@ -6,9 +6,7 @@ import type * as vite from 'vite';
  * `webextension-polyfill` module to a virtual module and exporting the `chrome` global from the
  * virtual module.
  */
-export function excludeBrowserPolyfill(
-  config: Omit<ResolvedConfig, 'builder'>,
-): vite.Plugin {
+export function excludeBrowserPolyfill(config: ResolvedConfig): vite.Plugin {
   const virtualId = 'virtual:wxt-webextension-polyfill-disabled';
 
   return {

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

@@ -2,9 +2,7 @@ import type * as vite from 'vite';
 import { ResolvedConfig } from '~/types';
 import { getGlobals } from '~/core/utils/globals';
 
-export function globals(
-  config: Omit<ResolvedConfig, 'builder'>,
-): vite.PluginOption {
+export function globals(config: ResolvedConfig): vite.PluginOption {
   return {
     name: 'wxt:globals',
     config() {

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

@@ -3,7 +3,7 @@ export * from './devServerGlobals';
 export * from './download';
 export * from './multipageMove';
 export * from './unimport';
-export * from './virtualEntrypoint';
+export * from './resolveVirtualModules';
 export * from './tsconfigPaths';
 export * from './noopBackground';
 export * from './cssEntrypoints';
@@ -13,3 +13,4 @@ export * from './webextensionPolyfillMock';
 export * from './excludeBrowserPolyfill';
 export * from './entrypointGroupGlobals';
 export * from './defineImportMeta';
+export * from './removeEntrypointMainFunction';

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

@@ -20,7 +20,7 @@ import { normalizePath } from '~/core/utils/paths';
  */
 export function multipageMove(
   entrypoints: Entrypoint[],
-  config: Omit<ResolvedConfig, 'builder'>,
+  config: ResolvedConfig,
 ): vite.Plugin {
   return {
     name: 'wxt:multipage-move',