chore(release): v0.6.0

This closes #119

CHANGELOG.md

@@ -1,5 +1,65 @@
 # Changelog
 
+## v0.6.0
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.6...v0.6.0)
+
+### 🚀 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))
+
+### 🩹 Fixes
+
+- Use the same mode for each build step ([1f6a931](https://github.com/wxt-dev/wxt/commit/1f6a931))
+- Disable dev logs in production ([3f260ee](https://github.com/wxt-dev/wxt/commit/3f260ee))
+
+#### ⚠️ Breaking Changes
+
+- ⚠️  Require a function for `vite` configuration ([#121](https://github.com/wxt-dev/wxt/pull/121))
+
+### ❤️ Contributors
+
+- Aaron Klinker <aaronklinker1@gmail.com>
+- Aaron <aaronklinker1@gmail.com>
+
+## v0.5.6
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.5...v0.5.6)
+
+### 🚀 Enhancements
+
+- Add `ContentScriptContext` util for stopping invalidated content scripts ([#120](https://github.com/wxt-dev/wxt/pull/120))
+
+### ❤️ Contributors
+
+- Aaron Klinker ([@aklinker1](https://github.com/aklinker1))
+
+## v0.5.5
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.4...v0.5.5)
+
+### 🩹 Fixes
+
+- Automatically replace vite's `process.env.NODE_ENV` output in lib mode with the mode ([92039b8](https://github.com/wxt-dev/wxt/commit/92039b8))
+
+### ❤️ Contributors
+
+- Aaron Klinker ([@aklinker1](https://github.com/aklinker1))
+
+## v0.5.4
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.3...v0.5.4)
+
+### 🩹 Fixes
+
+- Recognize `background/index.ts` as an entrypoint ([419fab8](https://github.com/wxt-dev/wxt/commit/419fab8))
+- Don't warn about deep entrypoint subdirectories not being recognized ([87e8df9](https://github.com/wxt-dev/wxt/commit/87e8df9))
+
+### ❤️ Contributors
+
+- Aaron Klinker ([@aklinker1](https://github.com/aklinker1))
+
 ## v0.5.3
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.2...v0.5.3)
@@ -14,8 +74,7 @@
 
 ### ❤️ Contributors
 
-- Aaron <aaronklinker1@gmail.com>
-- Aaron Klinker <aaronklinker1@gmail.com>
+- Aaron Klinker ([@aklinker1](https://github.com/aklinker1))
 
 ## v0.5.2
 
@@ -27,7 +86,7 @@
 
 ### ❤️ Contributors
 
-- Aaron <aaronklinker1@gmail.com>
+- Aaron Klinker ([@aklinker1](https://github.com/aklinker1))
 
 ## v0.5.1
 
@@ -44,8 +103,7 @@
 
 ### ❤️ Contributors
 
-- Aaron <aaronklinker1@gmail.com>
-- Aaron Klinker <aaronklinker1@gmail.com>
+- Aaron Klinker ([@aklinker1](https://github.com/aklinker1))
 
 ## v0.5.0
 

demo/src/entrypoints/background.ts

@@ -19,4 +19,6 @@ export default defineBackground(() => {
   browser.i18n.getMessage('hello', 'Aaron');
   browser.i18n.getMessage('bye', ['Aaron']);
   browser.i18n.getMessage('@@extension_id');
+
+  console.log('WXT MODE:', import.meta.env.MODE);
 });

demo/src/entrypoints/options/main.ts

@@ -3,3 +3,5 @@ import 'url:https://code.jquery.com/jquery-3.7.1.slim.min.js';
 console.log(browser.runtime.id);
 logId();
 console.log(2);
+
+console.log('WXT MODE:', import.meta.env.MODE);

demo/src/entrypoints/overlay.content/index.ts

@@ -2,9 +2,17 @@ import '../../common/style.css';
 
 export default defineContentScript({
   matches: ['*://*/*'],
-  async main() {
+  async main(ctx) {
     console.log(browser.runtime.id);
     logId();
+
+    console.log('WXT MODE:', import.meta.env.MODE);
+
+    const n = (Math.random() * 100).toFixed(1);
+    ctx.setInterval(() => {
+      console.log(n, browser.runtime.id);
+    }, 1e3);
+
     mountContentScriptUi();
   },
 });

docs/.vitepress/config.ts

@@ -11,6 +11,17 @@ export default defineConfig({
   description: 'Next gen framework for developing web extensions',
   lastUpdated: true,
 
+  head: [
+    [
+      "script",
+      {
+        async: "",
+        "data-website-id": "c1840c18-a12c-4a45-a848-55ae85ef7915",
+        src: "https://umami.aklinker1.io/script.js",
+      },
+    ],
+  ],
+
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     logo: '/logo.svg',

docs/guide/background.md

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

docs/guide/content-scripts.md

@@ -34,7 +34,7 @@ export default defineContentScript({
   include: undefined | string[],
   exclude: undefined | string[],
 
-  main() {
+  main(ctx) {
     // Executed when content script is loaded
   },
 });
@@ -63,7 +63,7 @@ import './style.css';
 
 export default defineContentScript({
   matches: ['*://google.com/*', '*://duckduckgo.com/*'],
-  main() {
+  main(ctx) {
     // ...
   },
 });
@@ -83,3 +83,40 @@ Any styles imported in your content script will be added to that content script'
   ]
 }
 ```
+
+## Context
+
+Old content scripts are not automatically stopped when an extension updates and restarts. 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. Since it's not connected to the latest version of your extension, the browser decides to throw an error.
+
+WXT provides a utility for managing this process: `ContentScriptContext`. An instance of this class is provided to you automatically inside the `main` function of your content script.
+
+```ts
+export default defineContentScript({
+  // ...
+  main(ctx: ContentScriptContext) {
+    // Add custom listeners for stopping work
+    ctx.onInvalidated(() => {
+      // ...
+    });
+
+    // Stop fetch requests
+    fetch('...url', { signal: ctx.signal });
+
+    // Timeout utilities
+    ctx.setTimeout(() => {
+      // ...
+    }, 5e3);
+    ctx.setInterval(() => {
+      // ...
+    }, 60e3);
+  },
+});
+```
+
+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.
+
+:::tip
+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.
+:::

e2e/tests/auto-imports.test.ts

@@ -16,6 +16,7 @@ describe('Auto Imports', () => {
           // Generated by wxt
           export {}
           declare global {
+            const ContentScriptContext: typeof import('wxt/client')['ContentScriptContext']
             const browser: typeof import('wxt/browser')['browser']
             const defineBackground: typeof import('wxt/client')['defineBackground']
             const defineConfig: typeof import('wxt')['defineConfig']

e2e/tests/output-structure.test.ts

@@ -43,7 +43,12 @@ describe('Output Directory Structure', () => {
 
     await project.build();
 
-    expect(await project.serializeOutput()).toMatchInlineSnapshot(`
+    expect(
+      await project.serializeOutput([
+        '.output/chrome-mv3/content-scripts/one.js',
+        '.output/chrome-mv3/content-scripts/two.js',
+      ]),
+    ).toMatchInlineSnapshot(`
       ".output/chrome-mv3/assets/one.css
       ----------------------------------------
       body{color:#00f}
@@ -56,13 +61,11 @@ describe('Output Directory Structure', () => {
       ================================================================================
       .output/chrome-mv3/content-scripts/one.js
       ----------------------------------------
-      (function(){\\"use strict\\";function i(n){return n}const s=\\"\\",o={matches:[\\"*://*/*\\"],main:()=>{}};function t(n,...e){if(typeof e[0]==\\"string\\"){const c=e.shift();n(\`[wxt] \${c}\`,...e)}else n(\\"[wxt]\\",...e)}var r={debug:(...n)=>t(console.debug,...n),log:(...n)=>t(console.log,...n),warn:(...n)=>t(console.warn,...n),error:(...n)=>t(console.error,...n)};(async()=>{try{await o.main()}catch(n){r.error(\\"The content script crashed on startup!\\",n)}})()})();
-
+      <contents-ignored>
       ================================================================================
       .output/chrome-mv3/content-scripts/two.js
       ----------------------------------------
-      (function(){\\"use strict\\";function i(n){return n}const s=\\"\\",o={matches:[\\"*://*/*\\"],main:()=>{}};function t(n,...e){if(typeof e[0]==\\"string\\"){const c=e.shift();n(\`[wxt] \${c}\`,...e)}else n(\\"[wxt]\\",...e)}var r={debug:(...n)=>t(console.debug,...n),log:(...n)=>t(console.log,...n),warn:(...n)=>t(console.warn,...n),error:(...n)=>t(console.error,...n)};(async()=>{try{await o.main()}catch(n){r.error(\\"The content script crashed on startup!\\",n)}})()})();
-
+      <contents-ignored>
       ================================================================================
       .output/chrome-mv3/manifest.json
       ----------------------------------------
@@ -82,11 +85,14 @@ describe('Output Directory Structure', () => {
 
     await project.build();
 
-    expect(await project.serializeOutput()).toMatchInlineSnapshot(`
+    expect(
+      await project.serializeOutput([
+        '.output/chrome-mv3/content-scripts/overlay-one.js',
+      ]),
+    ).toMatchInlineSnapshot(`
       ".output/chrome-mv3/content-scripts/overlay-one.js
       ----------------------------------------
-      (function(){\\"use strict\\";function i(n){return n}const o={matches:[\\"*://*/*\\"],main:()=>{}};function t(n,...e){if(typeof e[0]==\\"string\\"){const c=e.shift();n(\`[wxt] \${c}\`,...e)}else n(\\"[wxt]\\",...e)}var r={debug:(...n)=>t(console.debug,...n),log:(...n)=>t(console.log,...n),warn:(...n)=>t(console.warn,...n),error:(...n)=>t(console.error,...n)};(async()=>{try{await o.main()}catch(n){r.error(\\"The content script crashed on startup!\\",n)}})()})();
-
+      <contents-ignored>
       ================================================================================
       .output/chrome-mv3/manifest.json
       ----------------------------------------

e2e/tests/typescript-project.test.ts

@@ -22,6 +22,7 @@ describe('TypeScript Project', () => {
         const __IS_EDGE__: boolean;
         const __IS_OPERA__: boolean;
         const __COMMAND__: \\"build\\" | \\"serve\\";
+        const __ENTRYPOINT__: string;
       }
       "
     `);

e2e/utils.ts

@@ -80,9 +80,12 @@ export class TestProject {
   /**
    * Read all the files from the test project's `.output` directory and combine them into a string
    * that can be used in a snapshot.
+   *
+   * Optionally, provide a list of filenames whose content is not printed (because it's inconsistent
+   * or not relevant to a test).
    */
-  serializeOutput(): Promise<string> {
-    return this.serializeDir('.output');
+  serializeOutput(ignoreContentsOfFilenames?: string[]): Promise<string> {
+    return this.serializeDir('.output', ignoreContentsOfFilenames);
   }
 
   /**
@@ -95,7 +98,16 @@ export class TestProject {
     );
   }
 
-  private async serializeDir(dir: string): Promise<string> {
+  /**
+   * Deeply print the filename and contents of all files in a directory.
+   *
+   * Optionally, provide a list of filenames whose content is not printed (because it's inconsistent
+   * or not relevant to a test).
+   */
+  private async serializeDir(
+    dir: string,
+    ignoreContentsOfFilenames?: string[],
+  ): Promise<string> {
     const outputFiles = await glob('**/*', {
       cwd: resolve(this.root, dir),
       ignore: ['**/node_modules', '**/.output'],
@@ -104,19 +116,24 @@ export class TestProject {
     const fileContents = [];
     for (const file of outputFiles) {
       const path = resolve(this.root, dir, file);
-      fileContents.push(await this.serializeFile(path));
+      const isContentIgnored = !!ignoreContentsOfFilenames?.find(
+        (ignoredFile) => normalizePath(path).endsWith(ignoredFile),
+      );
+      fileContents.push(await this.serializeFile(path, isContentIgnored));
     }
     return fileContents.join(`\n${''.padEnd(80, '=')}\n`);
   }
 
   /**
    * @param path An abosolute path to a file or a path relative to the root.
+   * @param ignoreContents An optional boolean that, when true, causes this function to not print
+   *                       the file contents.
    */
-  async serializeFile(path: string): Promise<string> {
+  async serializeFile(path: string, ignoreContents?: boolean): Promise<string> {
     const absolutePath = resolve(this.root, path);
     return [
       normalizePath(relative(this.root, absolutePath)),
-      await fs.readFile(absolutePath),
+      ignoreContents ? '<contents-ignored>' : await fs.readFile(absolutePath),
     ].join(`\n${''.padEnd(40, '-')}\n`);
   }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18.16.0",

src/client/index.ts

@@ -1,3 +1,4 @@
 export * from './defineContentScript';
 export * from './defineBackground';
 export * from './mountContentScriptUi';
+export * from './utils/ContentScriptContext';

src/client/utils/ContentScriptContext.ts

@@ -0,0 +1,139 @@
+import { browser } from '../browser';
+import { logger } from './logger';
+
+/**
+ * Extends [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController).
+ * Used to detect and stop content script code when the script is invalidated.
+ *
+ * It also provides several utilities like `ctx.setTimeout` and `ctx.setInterval` that should be used in
+ * content scripts instead of `window.setTimeout` or `window.setInterval`.
+ */
+export class ContentScriptContext extends AbortController {
+  static SCRIPT_STARTED_MESSAGE_TYPE = 'wxt:content-script-started';
+
+  #isTopFrame = window.self === window.top;
+
+  constructor(private readonly contentScriptName: string) {
+    super();
+
+    if (this.#isTopFrame) {
+      this.#stopOldScripts();
+    }
+    this.setTimeout(() => {
+      // Run on next tick so the listener it adds isn't triggered by stopOldScript
+      this.#listenForNewerScripts();
+    });
+  }
+
+  get isInvalid(): boolean {
+    if (browser.runtime.id == null) {
+      this.notifyInvalidated(); // Sets `signal.aborted` to true
+    }
+    return this.signal.aborted;
+  }
+
+  get isValid(): boolean {
+    return !this.isInvalid;
+  }
+
+  /**
+   * Add a listener that is called when the content script's context is invalidated.
+   *
+   * @returns A function to remove the listener.
+   *
+   * @example
+   * browser.runtime.onMessage.addListener(cb);
+   * const removeInvalidatedListener = ctx.onInvalidated(() => {
+   *   browser.runtime.onMessage.removeListener(cb);
+   * })
+   * // ...
+   * removeInvalidatedListener();
+   */
+  onInvalidated(cb: () => void): () => void {
+    this.signal.addEventListener('abort', cb);
+    return () => this.signal.removeEventListener('abort', cb);
+  }
+
+  /**
+   * Wrapper around `window.setInterval` that automatically clears the interval when invalidated.
+   */
+  setInterval(handler: () => void, timeout?: number): number {
+    const id = setInterval(() => {
+      if (this.isValid) handler();
+    }, timeout) as unknown as number;
+    this.onInvalidated(() => clearInterval(id));
+    return id;
+  }
+
+  /**
+   * Wrapper around `window.setTimeout` that automatically clears the interval when invalidated.
+   */
+  setTimeout(handler: () => void, timeout?: number): number {
+    const id = setTimeout(() => {
+      if (this.isValid) handler();
+    }, timeout) as unknown as number;
+    this.onInvalidated(() => clearTimeout(id));
+    return id;
+  }
+
+  /**
+   * Wrapper around `window.requestAnimationFrame` that automatically cancels the request when
+   * invalidated.
+   */
+  requestAnimationFrame(callback: FrameRequestCallback): number {
+    const id = requestAnimationFrame((...args) => {
+      if (this.isValid) callback(...args);
+    });
+
+    this.onInvalidated(() => cancelAnimationFrame(id));
+    return id;
+  }
+
+  /**
+   * Wrapper around `window.requestIdleCallback` that automatically cancels the request when
+   * invalidated.
+   */
+  requestIdleCallback(
+    callback: IdleRequestCallback,
+    options?: IdleRequestOptions,
+  ): number {
+    const id = requestIdleCallback((...args) => {
+      if (!this.signal.aborted) callback(...args);
+    }, options);
+
+    this.onInvalidated(() => cancelIdleCallback(id));
+    return id;
+  }
+
+  /**
+   * Abort the abort controller and execute all `onInvalidated` listeners.
+   */
+  notifyInvalidated() {
+    this.abort('Content script context invalidated');
+    logger.debug(
+      `Content script "${this.contentScriptName}" context invalidated`,
+    );
+  }
+
+  #stopOldScripts() {
+    // Use postMessage so it get's sent to all the frames of the page.
+    window.postMessage({
+      event: ContentScriptContext.SCRIPT_STARTED_MESSAGE_TYPE,
+      contentScriptName: this.contentScriptName,
+    });
+  }
+
+  #listenForNewerScripts() {
+    const cb = (event: MessageEvent) => {
+      if (
+        event.data?.type === ContentScriptContext.SCRIPT_STARTED_MESSAGE_TYPE &&
+        event.data?.contentScriptName === this.contentScriptName
+      ) {
+        this.notifyInvalidated();
+      }
+    };
+
+    addEventListener('message', cb);
+    this.onInvalidated(() => removeEventListener('message', cb));
+  }
+}

src/client/utils/logger.ts

@@ -1,4 +1,6 @@
 function print(method: (...args: any[]) => void, ...args: any[]) {
+  if (import.meta.env.MODE === 'production') return;
+
   if (typeof args[0] === 'string') {
     const message = args.shift();
     method(`[wxt] ${message}`, ...args);

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

@@ -1,9 +1,12 @@
 import definition from 'virtual:user-content-script';
 import { logger } from '../utils/logger';
+import { ContentScriptContext } from '../utils/ContentScriptContext';
 
 (async () => {
   try {
-    await definition.main();
+    const ctx = new ContentScriptContext(__ENTRYPOINT__);
+
+    await definition.main(ctx);
   } catch (err) {
     logger.error('The content script crashed on startup!', err);
   }

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

@@ -21,3 +21,4 @@ declare const __DEV_SERVER_PROTOCOL__: string;
 declare const __DEV_SERVER_HOSTNAME__: string;
 declare const __DEV_SERVER_PORT__: string;
 declare const __MANIFEST_VERSION__: 2 | 3;
+declare const __ENTRYPOINT__: string;

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

@@ -214,6 +214,15 @@ describe('findEntrypoints', () => {
         outputDir: config.outDir,
       },
     ],
+    [
+      'background/index.ts',
+      {
+        type: 'background',
+        name: 'background',
+        inputPath: resolve(config.entrypointsDir, 'background/index.ts'),
+        outputDir: config.outDir,
+      },
+    ],
   ])(
     'should find and load background entrypoint config from %s',
     async (path, expected) => {

src/core/build/buildEntrypoints.ts

@@ -12,6 +12,7 @@ import { getEntrypointBundlePath } from '../utils/entrypoints';
 import fs from 'fs-extra';
 import { dirname, resolve } from 'path';
 import { getPublicFiles } from '../utils/public';
+import { getEntrypointGlobals } from '../utils/globals';
 
 export async function buildEntrypoints(
   groups: EntrypointGroup[],
@@ -78,10 +79,17 @@ async function buildSingleEntrypoint(
         },
       },
     },
+    define: {
+      // See https://github.com/aklinker1/vite-plugin-web-extension/issues/96
+      'process.env.NODE_ENV': JSON.stringify(config.mode),
+    },
   };
+  for (const global of getEntrypointGlobals(config, entrypoint.name)) {
+    libMode.define![global.name] = JSON.stringify(global.value);
+  }
   const entryConfig = vite.mergeConfig(
     libMode,
-    config.vite,
+    await config.vite(config.env),
   ) as vite.InlineConfig;
 
   const result = await vite.build(entryConfig);
@@ -116,11 +124,15 @@ async function buildMultipleEntrypoints(
         },
       },
     },
+    define: {},
   };
+  for (const global of getEntrypointGlobals(config, 'html')) {
+    multiPage.define![global.name] = JSON.stringify(global.value);
+  }
 
   const entryConfig = vite.mergeConfig(
     multiPage,
-    config.vite,
+    await config.vite(config.env),
   ) as vite.UserConfig;
 
   const result = await vite.build(entryConfig);

src/core/build/findEntrypoints.ts

@@ -350,6 +350,7 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
   'devtools/index.html': 'devtools',
 
   'background.ts': 'background',
+  'background/index.ts': 'background',
   [VIRTUAL_NOOP_BACKGROUND_MODULE_ID]: 'background',
 
   'content.ts?(x)': 'content-script',
@@ -374,8 +375,8 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
   [`*.${CSS_EXTENSIONS_PATTERN}`]: 'unlisted-style',
   [`*/index.${CSS_EXTENSIONS_PATTERN}`]: 'unlisted-style',
 
-  // Don't warn about any files in subdirectories, like CSS or JS entrypoints for HTML files
-  '*/*': 'ignored',
+  // Don't warn about any files in subdirectories, like CSS or JS entrypoints for HTML files or tests
+  '*/**': 'ignored',
 };
 
 const CONTENT_SCRIPT_OUT_DIR = 'content-scripts';

src/core/build/generateTypesDir.ts

@@ -4,7 +4,7 @@ import fs from 'fs-extra';
 import { relative, resolve } from 'path';
 import { getEntrypointBundlePath } from '../utils/entrypoints';
 import { getUnimportOptions } from '../utils/auto-imports';
-import { getGlobals } from '../utils/globals';
+import { getEntrypointGlobals, getGlobals } from '../utils/globals';
 import { getPublicFiles } from '../utils/public';
 import { normalizePath } from '../utils/paths';
 import path from 'node:path';
@@ -157,7 +157,7 @@ async function writeGlobalsDeclarationFile(
   config: InternalConfig,
 ): Promise<string> {
   const filePath = resolve(config.typesDir, 'globals.d.ts');
-  const globals = getGlobals(config);
+  const globals = [...getGlobals(config), ...getEntrypointGlobals(config, '')];
   await writeFileIfDifferent(
     filePath,
     [

src/core/server.ts

@@ -37,7 +37,7 @@ export async function setupServer(
   const runner = createWebExtRunner();
 
   const viteServer = await vite.createServer(
-    vite.mergeConfig(serverInfo, config.vite),
+    vite.mergeConfig(serverInfo, await config.vite(config.env)),
   );
 
   const start = async () => {

src/core/types/external.ts

@@ -3,6 +3,7 @@ import { Manifest, Scripting } from 'webextension-polyfill';
 import { UnimportOptions } from 'unimport';
 import { EntrypointGroup } from '.';
 import { LogLevel } from 'consola';
+import { ContentScriptContext } from '../../client/utils/ContentScriptContext';
 
 export interface InlineConfig {
   /**
@@ -83,13 +84,16 @@ export interface InlineConfig {
    */
   logger?: Logger;
   /**
-   * Custom Vite options, see <https://vitejs.dev/config/shared-options.html>.
+   * Return custom Vite options from a function. See
+   * <https://vitejs.dev/config/shared-options.html>.
    *
-   * [`root`](#root), [`configFile`](#configfile), and [`mode`](#mode) should be set in WXT's config.
+   * [`root`](#root), [`configFile`](#configfile), and [`mode`](#mode) should be set in WXT's config
+   * instead of Vite's.
+   *
+   * This is a function because any vite plugins added need to be recreated for each individual
+   * build step, incase they have internal state causing them to fail when reused.
    */
-  vite?:
-    | WxtViteConfig
-    | ((env: ConfigEnv) => WxtViteConfig | Promise<WxtViteConfig>);
+  vite?: (env: ConfigEnv) => WxtViteConfig | Promise<WxtViteConfig>;
   /**
    * Customize the `manifest.json` output. Can be an object, promise, or function that returns an
    * object or promise.
@@ -369,7 +373,7 @@ export interface ContentScriptDefinition extends ExcludableEntrypoint {
   /**
    * Main function executed when the content script is loaded.
    */
-  main(): void | Promise<void>;
+  main(ctx: ContentScriptContext): void | Promise<void>;
 }
 
 export interface BackgroundScriptDefintition extends ExcludableEntrypoint {

src/core/types/internal.ts

@@ -7,6 +7,7 @@ import {
   TargetManifestVersion,
   UserManifest,
   ExtensionRunnerConfig,
+  ConfigEnv,
 } from './external';
 import { UnimportOptions } from 'unimport';
 import { ResolvedConfig } from 'c12';
@@ -25,9 +26,10 @@ export interface InternalConfig {
   command: 'build' | 'serve';
   browser: TargetBrowser;
   manifestVersion: TargetManifestVersion;
+  env: ConfigEnv;
   logger: Logger;
   imports: false | Partial<UnimportOptions>;
-  vite: vite.InlineConfig;
+  vite: (env: ConfigEnv) => Promise<vite.InlineConfig> | vite.InlineConfig;
   manifest: UserManifest;
   fsCache: FsCache;
   server?: WxtDevServer;

src/core/utils/getInternalConfig.ts

@@ -83,6 +83,7 @@ export async function getInternalConfig(
     command,
     debug,
     entrypointsDir,
+    env,
     fsCache: createFsCache(wxtDir),
     imports: mergedConfig.imports ?? {},
     logger,
@@ -96,16 +97,13 @@ export async function getInternalConfig(
     runnerConfig,
     srcDir,
     typesDir,
-    vite: {}, // Real value added after this object is initialized.
+    vite: () => ({}), // Real value added after this object is initialized.
     wxtDir,
     zip: resolveInternalZipConfig(root, mergedConfig),
   };
 
-  finalConfig.vite = await resolveInternalViteConfig(
-    env,
-    mergedConfig,
-    finalConfig,
-  );
+  finalConfig.vite = (env) =>
+    resolveInternalViteConfig(env, mergedConfig, finalConfig);
 
   return finalConfig;
 }
@@ -143,9 +141,9 @@ function mergeInlineConfig(
     return vite.mergeConfig(user, inline);
   };
   const viteConfig = async (env: ConfigEnv): Promise<WxtViteConfig> => {
-    const user = await resolveViteConfig(env, userConfig.vite);
-    const inline = await resolveViteConfig(env, inlineConfig.vite);
-    return vite.mergeConfig(user, inline);
+    const user = await userConfig.vite?.(env);
+    const inline = await inlineConfig.vite?.(env);
+    return vite.mergeConfig(user ?? {}, inline ?? {});
   };
   const runner: InlineConfig['runner'] = vite.mergeConfig(
     userConfig.runner ?? {},
@@ -175,13 +173,6 @@ function mergeInlineConfig(
   };
 }
 
-async function resolveViteConfig(
-  env: ConfigEnv,
-  vite: InlineConfig['vite'],
-): Promise<WxtViteConfig> {
-  return await (typeof vite === 'function' ? vite(env) : vite ?? {});
-}
-
 function resolveInternalZipConfig(
   root: string,
   mergedConfig: InlineConfig,
@@ -211,13 +202,13 @@ async function resolveInternalViteConfig(
   mergedConfig: InlineConfig,
   finalConfig: InternalConfig,
 ) {
-  const internalVite: vite.InlineConfig = await resolveViteConfig(
-    env,
-    mergedConfig.vite,
-  );
+  const internalVite: vite.InlineConfig =
+    (await mergedConfig.vite?.(env)) ?? {};
+
   internalVite.root = finalConfig.root;
   internalVite.configFile = false;
   internalVite.logLevel = 'warn';
+  internalVite.mode = env.mode;
 
   internalVite.build ??= {};
   internalVite.build.outDir = finalConfig.outDir;

src/core/utils/globals.ts

@@ -46,3 +46,16 @@ export function getGlobals(
     },
   ];
 }
+
+export function getEntrypointGlobals(
+  config: InternalConfig,
+  entrypointName: string,
+) {
+  return [
+    {
+      name: '__ENTRYPOINT__',
+      value: entrypointName,
+      type: `string`,
+    },
+  ];
+}

src/index.ts

@@ -41,7 +41,7 @@ export async function createServer(
     return getInternalConfig(
       {
         ...config,
-        vite: serverInfo.viteServerConfig,
+        vite: () => serverInfo.viteServerConfig,
       },
       'serve',
     );

src/testing/fake-objects.ts

@@ -198,34 +198,42 @@ export function fakeArray<T>(createItem: () => T, count = 3): T[] {
   return array;
 }
 
-export const fakeInternalConfig = fakeObjectCreator<InternalConfig>(() => ({
-  browser: faker.helpers.arrayElement(['chrome', 'firefox']),
-  command: faker.helpers.arrayElement(['build', 'serve']),
-  entrypointsDir: fakeDir(),
-  fsCache: mock<FsCache>(),
-  imports: {},
-  logger: mock(),
-  manifest: fakeManifest(),
-  manifestVersion: faker.helpers.arrayElement([2, 3]),
-  mode: faker.helpers.arrayElement(['development', 'production']),
-  outBaseDir: fakeDir(),
-  outDir: fakeDir(),
-  publicDir: fakeDir(),
-  root: fakeDir(),
-  runnerConfig: {
-    config: {},
-  },
-  debug: faker.datatype.boolean(),
-  srcDir: fakeDir(),
-  typesDir: fakeDir(),
-  vite: {},
-  wxtDir: fakeDir(),
-  server: mock<WxtDevServer>(),
-  zip: {
-    artifactTemplate: '{{name}}-{{version}}.zip',
-    ignoredSources: [],
-    sourcesRoot: fakeDir(),
-    sourcesTemplate: '{{name}}-sources.zip',
-    name: faker.person.firstName().toLowerCase(),
-  },
-}));
+export const fakeInternalConfig = fakeObjectCreator<InternalConfig>(() => {
+  const browser = faker.helpers.arrayElement(['chrome', 'firefox']);
+  const command = faker.helpers.arrayElement(['build', 'serve'] as const);
+  const manifestVersion = faker.helpers.arrayElement([2, 3] as const);
+  const mode = faker.helpers.arrayElement(['development', 'production']);
+
+  return {
+    browser,
+    command,
+    entrypointsDir: fakeDir(),
+    env: { browser, command, manifestVersion, mode },
+    fsCache: mock<FsCache>(),
+    imports: {},
+    logger: mock(),
+    manifest: fakeManifest(),
+    manifestVersion,
+    mode,
+    outBaseDir: fakeDir(),
+    outDir: fakeDir(),
+    publicDir: fakeDir(),
+    root: fakeDir(),
+    runnerConfig: {
+      config: {},
+    },
+    debug: faker.datatype.boolean(),
+    srcDir: fakeDir(),
+    typesDir: fakeDir(),
+    vite: () => ({}),
+    wxtDir: fakeDir(),
+    server: mock<WxtDevServer>(),
+    zip: {
+      artifactTemplate: '{{name}}-{{version}}.zip',
+      ignoredSources: [],
+      sourcesRoot: fakeDir(),
+      sourcesTemplate: '{{name}}-sources.zip',
+      name: faker.person.firstName().toLowerCase(),
+    },
+  };
+});

templates/react/wxt.config.ts

@@ -3,7 +3,7 @@ import react from '@vitejs/plugin-react';
 
 // See https://wxt.dev/config.html
 export default defineConfig({
-  vite: {
+  vite: () => ({
     plugins: [react()],
-  },
+  }),
 });

templates/solid/wxt.config.ts

@@ -3,10 +3,10 @@ import Solid from 'vite-plugin-solid';
 
 // See https://wxt.dev/config.html
 export default defineConfig({
-  vite: {
+  vite: () => ({
     build: {
       target: 'esnext',
     },
     plugins: [Solid()],
-  },
+  }),
 });

templates/svelte/wxt.config.ts

@@ -4,7 +4,7 @@ import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 // See https://wxt.dev/config.html
 export default defineConfig({
   srcDir: 'src',
-  vite: {
+  vite: () => ({
     plugins: [
       svelte({
         // Using a svelte.config.js file causes a segmentation fault when importing the file
@@ -12,5 +12,5 @@ export default defineConfig({
         preprocess: [vitePreprocess()],
       }),
     ],
-  },
+  }),
 });

templates/vue/wxt.config.ts

@@ -3,7 +3,7 @@ import vue from '@vitejs/plugin-vue';
 
 // See https://wxt.dev/config.html
 export default defineConfig({
-  vite: {
+  vite: () => ({
     plugins: [vue()],
-  },
+  }),
 });