chore(release): v0.18.1

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/sync-releases.yml

@@ -20,3 +20,4 @@ jobs:
           node-version: 18
           cache: pnpm
       - run: pnpm sync-releases all --token ${{ secrets.GITHUB_TOKEN }}
+        working-directory: packages/wxt

.github/workflows/validate.yml

@@ -13,19 +13,15 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: pnpm check
-  validate-demo:
+  build-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:
@@ -57,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

@@ -22,6 +22,10 @@ const chromeExtensionIds = [
   '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' },
           ],

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,189 +1,48 @@
 {
-  "name": "wxt",
+  "private": true,
   "type": "module",
-  "version": "0.17.12",
-  "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",
-    "check": "run-s -c check:*",
-    "check:default": "check",
-    "check:tsc-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",
     "docs:dev": "pnpm -s docs:gen && vitepress dev docs",
     "docs:build": "pnpm -s docs:gen && vitepress build docs",
-    "docs:preview": "pnpm -s docs:gen && vitepress preview docs",
-    "sync-releases": "pnpx changelogen@latest gh release"
-  },
-  "dependencies": {
-    "@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"
+    "docs:preview": "pnpm -s docs:gen && vitepress preview docs"
   },
   "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",
     "@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"
   },
   "lint-staged": {
     "*": "prettier --ignore-unknown --write"
   },
-  "changelog": {
-    "excludeAuthors": [
-      "aaronklinker1@gmail.com"
-    ]
-  },
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

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/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

@@ -18,4 +18,7 @@ export default defineConfig({
   analysis: {
     open: true,
   },
+  experimental: {
+    viteRuntime: true,
+  },
 });

packages/wxt/CHANGELOG.md

@@ -1,5 +1,75 @@
 # Changelog
 
+## v0.18.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.18.0...v0.18.1)
+
+### 🩹 Fixes
+
+- `_background` is not defined ([#649](https://github.com/wxt-dev/wxt/pull/649))
+
+### 🏡 Chore
+
+- Add root README back ([ec3dd52](https://github.com/wxt-dev/wxt/commit/ec3dd52))
+
+### 🤖 CI
+
+- Fix sync releases workflow ([dc5b55b](https://github.com/wxt-dev/wxt/commit/dc5b55b))
+
+## 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))
+
+  Out of an abundance of caution, I've marked this as a breaking change because permission generation has changed. **_If you list `host_permissions` in your `wxt.config.ts`'s manifest and have released your extension_**, double check that your `permissions` and `host_permissions` have not changed for all browsers you target in your `.output/*/manifest.json` files. Permission changes can cause the extension to be disabled on update, and can cause a drop in users, so be sure to double check for differences compared to the previous manifest version.
+
+### ❤️ Contributors
+
+- Alegal200 ([@alegal200](https://github.com/alegal200))
+- Yacine-bens ([@yacine-bens](http://github.com/yacine-bens))
+- Ayden ([@AydenGen](https://github.com/AydenGen))
+- Wuzequanyouzi ([@wuzequanyouzi](http://github.com/wuzequanyouzi))
+- Can Rau ([@CanRau](http://github.com/CanRau))
+- 日高 凌 ([@ryohidaka](http://github.com/ryohidaka))
+- Bas Van Zanten ([@Bas950](http://github.com/Bas950))
+- ThinkStu ([@Bistutu](http://github.com/Bistutu))
+
 ## v0.17.12
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.17.11...v0.17.12)
@@ -259,11 +329,11 @@
 
 ### 🚀 Enhancements
 
-- **storage:** ⚠️  Improved support for default values on storage items ([#477](https://github.com/wxt-dev/wxt/pull/477))
+- **storage:** ⚠️ Improved support for default values on storage items ([#477](https://github.com/wxt-dev/wxt/pull/477))
 
 ### 🩹 Fixes
 
-- **storage:** ⚠️  Only run migrations when the extension is updated ([#478](https://github.com/wxt-dev/wxt/pull/478))
+- **storage:** ⚠️ Only run migrations when the extension is updated ([#478](https://github.com/wxt-dev/wxt/pull/478))
 - Improve dev mode for content scripts registered at runtime ([#474](https://github.com/wxt-dev/wxt/pull/474))
 
 ### 📖 Documentation
@@ -291,12 +361,13 @@ const item = storage.defineItem<number | null>("local:count", {
 })
 ```
 
-The `defaultValue` property is now required if passing in the second options argument. 
+The `defaultValue` property is now required if passing in the second options argument.
 
 If you exclude the second options argument, it will default to being nullable, as before.
 
 ```ts
-const item: WxtStorageItem<number | null> = storage.defineItem<number>("local:count");
+const item: WxtStorageItem<number | null> =
+  storage.defineItem<number>('local:count');
 const value: number | null = await item.getValue();
 ```
 
@@ -306,13 +377,13 @@ For storage items that are not nullable, the `watch` callback types has improved
 
 ```ts
 // >=0.17
-const item = storage.defineItem<number>("local:count", { defaultValue: 0 });
+const item = storage.defineItem<number>('local:count', { defaultValue: 0 });
 item.watch((newValue: number | null, oldValue: number | null) => {
   // ...
 });
 
 // >=0.17
-const item = storage.defineItem<number>("local:count", { defaultValue: 0 });
+const item = storage.defineItem<number>('local:count', { defaultValue: 0 });
 item.watch((newValue: number, oldValue: number) => {
   // ...
 });
@@ -542,7 +613,7 @@ item.migrate();
 
 ### 🚀 Enhancements
 
-- ⚠️  ESM background support ([#398](https://github.com/wxt-dev/wxt/pull/398))
+- ⚠️ ESM background support ([#398](https://github.com/wxt-dev/wxt/pull/398))
 
 ### 📖 Documentation
 
@@ -559,23 +630,23 @@ item.migrate();
 In [#398](https://github.com/wxt-dev/wxt/pull/398), HTML pages' JS entrypoints in the output directory have been moved. Unless you're doing some kind of post-build work referencing files, you don't have to make any changes.
 
 - Before:
-   ```
-   .output/
-     <target>/
-       chunks/
-         some-shared-chunk-<hash>.js
-         popup-<hash>.js
-       popup.html
-   ```
+  ```
+  .output/
+    <target>/
+      chunks/
+        some-shared-chunk-<hash>.js
+        popup-<hash>.js
+      popup.html
+  ```
 - After:
-   ```
-   .output/
-     <target>/
-       chunks/
-         some-shared-chunk-<hash>.js
-       popup.html
-       popup.js
-   ```
+  ```
+  .output/
+    <target>/
+      chunks/
+        some-shared-chunk-<hash>.js
+      popup.html
+      popup.js
+  ```
 
 This effects all HTML files, not just the Popup. The hash has been removed, and it's been moved to the root of the build target folder, not inside the `chunks/` directory. Moving files like this has not historically increased review times or triggered in-depth reviews when submitting updates to the stores.
 
@@ -641,12 +712,12 @@ This effects all HTML files, not just the Popup. The hash has been removed, and
 
 ### 🚀 Enhancements
 
-- **zip:** ⚠️  Add `includeSources` and rename `ignoredSources` to `excludeSources` ([#378](https://github.com/wxt-dev/wxt/pull/378))
+- **zip:** ⚠️ Add `includeSources` and rename `ignoredSources` to `excludeSources` ([#378](https://github.com/wxt-dev/wxt/pull/378))
 
 ### 🩹 Fixes
 
 - Generate missing sourcemap in `wxt:unimport` plugin ([#381](https://github.com/wxt-dev/wxt/pull/381))
-- ⚠️  Move browser constants to `import.meta.env` ([#380](https://github.com/wxt-dev/wxt/pull/380))
+- ⚠️ Move browser constants to `import.meta.env` ([#380](https://github.com/wxt-dev/wxt/pull/380))
 - Enable inline sourcemaps by default during development ([#382](https://github.com/wxt-dev/wxt/pull/382))
 
 ### 📖 Documentation
@@ -796,7 +867,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 ### 🚀 Enhancements
 
-- ⚠️  Refactor content script UI functions and add helper for "integrated" UIs ([#333](https://github.com/wxt-dev/wxt/pull/333))
+- ⚠️ Refactor content script UI functions and add helper for "integrated" UIs ([#333](https://github.com/wxt-dev/wxt/pull/333))
 
 #### ⚠️ Breaking Changes
 
@@ -805,7 +876,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 - `createContentScriptUi({ ... })` &rarr; `createShadowRootUi({ ... })`
 - `createContentScriptIframe({ ... })` &rarr; `createIframeUi({ ... })`
 - `type: "inline" | "overlay" | "modal"` has been changed to `position: "inline" | "overlay" | "modal"`
-- `onRemove` is now called ***before*** the UI is removed from the DOM, previously it was called after the UI was removed
+- `onRemove` is now called **_before_** the UI is removed from the DOM, previously it was called after the UI was removed
 - `mount` option has been renamed to `onMount`, to better match the related option, `onRemove`.
 
 ## v0.13.5
@@ -901,7 +972,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 ### 🚀 Enhancements
 
-- ⚠️  New `wxt/storage` APIs ([#300](https://github.com/wxt-dev/wxt/pull/300))
+- ⚠️ New `wxt/storage` APIs ([#300](https://github.com/wxt-dev/wxt/pull/300))
 
 #### ⚠️ Breaking Changes
 
@@ -958,7 +1029,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 ### 🚀 Enhancements
 
-- ⚠️  Add support for "main world" content scripts ([#284](https://github.com/wxt-dev/wxt/pull/284))
+- ⚠️ Add support for "main world" content scripts ([#284](https://github.com/wxt-dev/wxt/pull/284))
 
 ### 🩹 Fixes
 
@@ -980,10 +1051,10 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 - If you use auto-imports, no changes are required.
 - If you have disabled auto-imports, you'll need to manually update your import statements:
-   ```diff
-   - import { defineBackground, defineContentScript } from 'wxt/client';
-   + import { defineBackground, defineContentScript } from 'wxt/sandbox';
-   ```
+  ```diff
+  - import { defineBackground, defineContentScript } from 'wxt/client';
+  + import { defineBackground, defineContentScript } from 'wxt/sandbox';
+  ```
 
 ## v0.11.2
 
@@ -1021,7 +1092,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 ### 🚀 Enhancements
 
-- ⚠️  Vite 5 support ([#261](https://github.com/wxt-dev/wxt/pull/261))
+- ⚠️ Vite 5 support ([#261](https://github.com/wxt-dev/wxt/pull/261))
 
 ### 📖 Documentation
 
@@ -1113,7 +1184,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 ### 🚀 Enhancements
 
 - List `bun` as an experimental option in `wxt init` ([#233](https://github.com/wxt-dev/wxt/pull/233))
-- ⚠️  Allow plural directory and only png's for manifest icons ([#237](https://github.com/wxt-dev/wxt/pull/237))
+- ⚠️ Allow plural directory and only png's for manifest icons ([#237](https://github.com/wxt-dev/wxt/pull/237))
 - Add `wxt/storage` API ([#234](https://github.com/wxt-dev/wxt/pull/234))
 
 ### 🩹 Fixes
@@ -1185,7 +1256,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 ### 🩹 Fixes
 
-- ⚠️  Remove `lib` from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209))
+- ⚠️ Remove `lib` from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209))
 
 ### 📖 Documentation
 
@@ -1198,15 +1269,15 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 #### ⚠️ Breaking Changes
 
-- ⚠️  Removed [`"WebWorker"` types](https://www.typescriptlang.org/tsconfig/lib.html) from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209)). These types are useful for MV3 projects using a service worker. To add them back to your project, add the following to your project's TSConfig:
-   ```diff
-   {
-     "extends": "./.wxt/tsconfig.json",
-   + "compilerOptions": {
-   +   "lib": ["ESNext", "DOM", "WebWorker"]
-   + }
-   }
-   ```
+- ⚠️ Removed [`"WebWorker"` types](https://www.typescriptlang.org/tsconfig/lib.html) from `.wxt/tsconfig.json` ([#209](https://github.com/wxt-dev/wxt/pull/209)). These types are useful for MV3 projects using a service worker. To add them back to your project, add the following to your project's TSConfig:
+  ```diff
+  {
+    "extends": "./.wxt/tsconfig.json",
+  + "compilerOptions": {
+  +   "lib": ["ESNext", "DOM", "WebWorker"]
+  + }
+  }
+  ```
 
 ### ❤️ Contributors
 
@@ -1320,7 +1391,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 ### 🚀 Enhancements
 
-- ⚠️  Use `defineUnlistedScript` to define unlisted scripts ([#167](https://github.com/wxt-dev/wxt/pull/167))
+- ⚠️ Use `defineUnlistedScript` to define unlisted scripts ([#167](https://github.com/wxt-dev/wxt/pull/167))
 
 ### 📖 Documentation
 
@@ -1328,12 +1399,12 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 ### 🌊 Types
 
-- ⚠️  Rename `BackgroundScriptDefintition` to `BackgroundDefinition` ([446f265](https://github.com/wxt-dev/wxt/commit/446f265))
+- ⚠️ Rename `BackgroundScriptDefintition` to `BackgroundDefinition` ([446f265](https://github.com/wxt-dev/wxt/commit/446f265))
 
 #### ⚠️ Breaking Changes
 
-- ⚠️  Unlisted scripts must now `export default defineUnlistedScript(...)` ([#167](https://github.com/wxt-dev/wxt/pull/167))
-- ⚠️  Rename `BackgroundScriptDefintition` to `BackgroundDefinition` ([446f265](https://github.com/wxt-dev/wxt/commit/446f265))
+- ⚠️ Unlisted scripts must now `export default defineUnlistedScript(...)` ([#167](https://github.com/wxt-dev/wxt/pull/167))
+- ⚠️ Rename `BackgroundScriptDefintition` to `BackgroundDefinition` ([446f265](https://github.com/wxt-dev/wxt/commit/446f265))
 
 ### ❤️ Contributors
 
@@ -1426,7 +1497,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 ### 🩹 Fixes
 
 - Validate transformed manifest correctly ([4b2012c](https://github.com/wxt-dev/wxt/commit/4b2012c))
-- ⚠️  Output content script CSS to `content-scripts/<name>.css` ([#140](https://github.com/wxt-dev/wxt/pull/140))
+- ⚠️ Output content script CSS to `content-scripts/<name>.css` ([#140](https://github.com/wxt-dev/wxt/pull/140))
 - Reorder typescript paths to give priority to `@` and `~` over `@@` and `~~` ([#142](https://github.com/wxt-dev/wxt/pull/142))
 
 ### 🏡 Chore
@@ -1524,7 +1595,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 ### 🚀 Enhancements
 
 - Export `ContentScriptContext` from `wxt/client` ([1f448d1](https://github.com/wxt-dev/wxt/commit/1f448d1))
-- ⚠️  Require a function for `vite` configuration ([#121](https://github.com/wxt-dev/wxt/pull/121))
+- ⚠️ Require a function for `vite` configuration ([#121](https://github.com/wxt-dev/wxt/pull/121))
 
 ### 🩹 Fixes
 
@@ -1533,7 +1604,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 #### ⚠️ Breaking Changes
 
-- ⚠️  The `vite` config option must now be a function. If you were using an object before, change it from `vite: { ... }` to `vite: () => ({ ... })`. ([#121](https://github.com/wxt-dev/wxt/pull/121))
+- ⚠️ The `vite` config option must now be a function. If you were using an object before, change it from `vite: { ... }` to `vite: () => ({ ... })`. ([#121](https://github.com/wxt-dev/wxt/pull/121))
 
 ## v0.5.6
 
@@ -1600,7 +1671,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 ### 🩹 Fixes
 
 - **types:** Don't write to files if nothing changes ([#107](https://github.com/wxt-dev/wxt/pull/107))
-- ⚠️  Change default `publicDir` to `<srcDir>/public` ([5f15f9c](https://github.com/wxt-dev/wxt/commit/5f15f9c))
+- ⚠️ Change default `publicDir` to `<srcDir>/public` ([5f15f9c](https://github.com/wxt-dev/wxt/commit/5f15f9c))
 
 ### 📖 Documentation
 
@@ -1620,7 +1691,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 #### ⚠️ Breaking Changes
 
-- ⚠️  Change default `publicDir` to `<srcDir>/public` ([5f15f9c](https://github.com/wxt-dev/wxt/commit/5f15f9c))
+- ⚠️ Change default `publicDir` to `<srcDir>/public` ([5f15f9c](https://github.com/wxt-dev/wxt/commit/5f15f9c))
 
 ## v0.4.1
 
@@ -1648,7 +1719,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 - Allow adding custom content scripts ([b428a62](https://github.com/wxt-dev/wxt/commit/b428a62))
 - Don't overwrite `wxt.config.ts` content scripts, append entrypoints to it ([5f5f1d9](https://github.com/wxt-dev/wxt/commit/5f5f1d9))
-- ⚠️  Use relative path aliases inside `.wxt/tsconfig.json` ([#102](https://github.com/wxt-dev/wxt/pull/102))
+- ⚠️ Use relative path aliases inside `.wxt/tsconfig.json` ([#102](https://github.com/wxt-dev/wxt/pull/102))
 
 ### 📖 Documentation
 
@@ -1681,7 +1752,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 #### ⚠️ Breaking Changes
 
-- ⚠️  Use relative path aliases inside `.wxt/tsconfig.json` ([#102](https://github.com/wxt-dev/wxt/pull/102))
+- ⚠️ Use relative path aliases inside `.wxt/tsconfig.json` ([#102](https://github.com/wxt-dev/wxt/pull/102))
 
 ## v0.3.2
 
@@ -1753,8 +1824,8 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 ### 🚀 Enhancements
 
-- ⚠️  Add type safety to `browser.runtime.getURL` ([58a84ec](https://github.com/wxt-dev/wxt/commit/58a84ec))
-- ⚠️  Change default `publicDir` to `<rootDir>/public` ([19c0948](https://github.com/wxt-dev/wxt/commit/19c0948))
+- ⚠️ Add type safety to `browser.runtime.getURL` ([58a84ec](https://github.com/wxt-dev/wxt/commit/58a84ec))
+- ⚠️ Change default `publicDir` to `<rootDir>/public` ([19c0948](https://github.com/wxt-dev/wxt/commit/19c0948))
 - Windows support ([#50](https://github.com/wxt-dev/wxt/pull/50))
 
 ### 🩹 Fixes
@@ -1773,10 +1844,10 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 - Improve checks against `demo/` extension ([9cc464f](https://github.com/wxt-dev/wxt/commit/9cc464f))
 
-#### ⚠️  Breaking Changes
+#### ⚠️ Breaking Changes
 
-- ⚠️  Add type safety to `browser.runtime.getURL` ([58a84ec](https://github.com/wxt-dev/wxt/commit/58a84ec))
-- ⚠️  Change default `publicDir` to `<rootDir>/public` ([19c0948](https://github.com/wxt-dev/wxt/commit/19c0948))
+- ⚠️ Add type safety to `browser.runtime.getURL` ([58a84ec](https://github.com/wxt-dev/wxt/commit/58a84ec))
+- ⚠️ Change default `publicDir` to `<rootDir>/public` ([19c0948](https://github.com/wxt-dev/wxt/commit/19c0948))
 
 ## v0.2.5
 

packages/wxt/README.md

@@ -0,0 +1,70 @@
+<h1 align="center">
+  <img style="vertical-align:middle" width="44" src="./docs/public/hero-logo.svg" alt="WXT Logo">
+  <span>WXT</span>
+</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/v/wxt?labelColor=black&color=%234fa048"></a>
+  <span> </span>
+  <a href="https://www.npmjs.com/package/wxt" target="_blank"><img alt="npm" src="https://img.shields.io/npm/dm/wxt?labelColor=black&color=%234fa048"></a>
+  <span> </span>
+  <a href="https://github.com/wxt-dev/wxt/blob/main/LICENSE" target="_blank"><img alt="NPM" src="https://img.shields.io/npm/l/wxt?labelColor=black&color=%234fa048"></a>
+  <span> </span>
+  <a href="https://codecov.io/github/wxt-dev/wxt" target="_blank"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/wxt-dev/wxt?labelColor=black&color=%234fa048"></a>
+</p>
+
+<p align="center">
+  <span>Next-gen framework for developing web extensions.</span>
+  <br/>
+  <span>⚡</span>
+  <br/>
+  <q><i>It's like Nuxt, but for Chrome Extensions</i></q>
+</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>
+  &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://discord.gg/ZFsZqGery9" target="_blank">Discord</a>
+</p>
+
+![Example CLI Output](./docs/assets/cli-output.png)
+
+## Demo
+
+https://github.com/wxt-dev/wxt/assets/10101283/4d678939-1bdb-495c-9c36-3aa281d84c94
+
+## Quick Start
+
+Bootstrap a new project:
+
+```sh
+pnpm dlx wxt@latest init <project-name>
+```
+
+Or see the [installation guide](https://wxt.dev/guide/installation.html) to get started with WXT.
+
+## Features
+
+- 🌐 Supports all browsers
+- ✅ Supports both MV2 and MV3
+- ⚡ Dev mode with HMR & fast reload
+- 📂 File based entrypoints
+- 🚔 TypeScript
+- 🦾 Auto-imports
+- 🤖 Automated publishing
+- 🎨 Frontend framework agnostic: works with Vue, React, Svelte, etc
+- 🖍️ Quickly bootstrap a new project
+- 📏 Bundle analysis
+- ⬇️ Download and bundle remote URL imports
+
+## Contributors
+
+<a href="https://github.com/wxt-dev/wxt/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=wxt-dev/wxt" />
+</a>

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 };
@@ -294,9 +294,10 @@ describe('Output Directory Structure', () => {
           warn: (...args) => print(console.warn, ...args),
           error: (...args) => print(console.error, ...args)
         };
+        var result;
         try {
-          const res = definition.main();
-          if (res instanceof Promise) {
+          result = definition.main();
+          if (result instanceof Promise) {
             console.warn(
               "The background's main() function return a promise, but it must be synchronous"
             );
@@ -352,7 +353,7 @@ describe('Output Directory Structure', () => {
       .toMatchInlineSnapshot(`
         ".output/chrome-mv3/background.js
         ----------------------------------------
-        (function() {
+        var _background = function() {
           "use strict";
           function defineBackground(arg) {
             if (typeof arg === "function")
@@ -362,11 +363,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;
@@ -377,9 +380,10 @@ describe('Output Directory Structure', () => {
             warn: (...args) => print(console.warn, ...args),
             error: (...args) => print(console.error, ...args)
           };
+          var result;
           try {
-            const res = definition.main();
-            if (res instanceof Promise) {
+            result = definition.main();
+            if (result instanceof Promise) {
               console.warn(
                 "The background's main() function return a promise, but it must be synchronous"
               );
@@ -388,7 +392,10 @@ describe('Output Directory Structure', () => {
             logger.error("The background crashed on startup!");
             throw err;
           }
-        })();
+          var background_entrypoint_default = result;
+          return background_entrypoint_default;
+        }();
+        _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/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,157 @@
+{
+  "name": "wxt",
+  "type": "module",
+  "version": "0.18.1",
+  "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",
+    "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.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"
+  },
+  "changelog": {
+    "excludeAuthors": [
+      "aaronklinker1@gmail.com"
+    ]
+  }
+}

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,
           });
@@ -448,7 +448,7 @@ describe('Content Script UIs', () => {
         const expected = Symbol();
 
         const ui = await createShadowRootUi(new ContentScriptContext('test'), {
-          name: 'test',
+          name: 'test-component',
           position: 'inline',
           onMount: () => expected,
         });

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

@@ -19,6 +19,7 @@ import {
 } 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(
   wxtConfig: ResolvedConfig,
@@ -31,9 +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 config: vite.InlineConfig = await wxtConfig.vite({
-      ...wxtConfig.env,
-    });
+    const config: vite.InlineConfig = await wxtConfig.vite(wxtConfig.env);
 
     config.root = wxtConfig.root;
     config.configFile = false;
@@ -89,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: {
@@ -196,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);

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

@@ -13,3 +13,4 @@ export * from './webextensionPolyfillMock';
 export * from './excludeBrowserPolyfill';
 export * from './entrypointGroupGlobals';
 export * from './defineImportMeta';
+export * from './removeEntrypointMainFunction';