ci: Add new modules as release targets

.github/workflows/release.yml

@@ -8,6 +8,10 @@ on:
         type: choice
         options:
           - wxt
+          - module-react
+          - module-vue
+          - module-svelte
+          - module-solid
 
 jobs:
   validate:

.github/workflows/sync-releases.yml

@@ -8,6 +8,10 @@ on:
         type: choice
         options:
           - wxt
+          - module-react
+          - module-vue
+          - module-svelte
+          - module-solid
 
 jobs:
   sync:

.github/workflows/validate.yml

@@ -13,6 +13,12 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - run: pnpm check
+  builds:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
+      - run: pnpm -r --sequential build
   build-demo:
     runs-on: ubuntu-22.04
     steps:

CONTRIBUTING.md

@@ -112,3 +112,20 @@ cp -r templates/vanilla templates/<new-template-name>
 ```
 
 That's it. Once your template is merged, it will be available inside `wxt init` immediately. You don't need to release a new version of WXT to release a new template.
+
+## Releasing Updates
+
+Releases are done with GitHub actions:
+
+- Use the [Release workflow](https://github.com/wxt-dev/wxt/actions/workflows/release.yml) to release a single package in the monorepo. This automatically detects the version change with conventional commits, builds and uploads the package to NPM, and creates a GitHub release.
+- Use the [Sync Releases workflow](https://github.com/wxt-dev/wxt/actions/workflows/sync-releases.yml) to sync the GitHub releases with changes to the changelog. To change a release, update the `CHANGELOG.md` file and run the workflow. It will sync the releases of a single package in the monorepo.
+
+## Upgrading Dependencies
+
+Use [`taze`](https://www.npmjs.com/package/taze) to upgrade dependencies throughout the entire monorepo.
+
+```ts
+pnpm dlx taze -r
+```
+
+Configuration is in [`taze.config.ts`](./taze.config.ts).

package.json

@@ -5,9 +5,9 @@
     "node": ">=18.20.3",
     "pnpm": "^8.6.3"
   },
-  "packageManager": "pnpm@8.6.3",
+  "packageManager": "pnpm@8.15.8",
   "scripts": {
-    "check": "check && pnpm -r run check",
+    "check": "check && pnpm -r --sequential run check",
     "test": "vitest",
     "test:coverage": "vitest run --coverage.enabled \"--coverage.include=packages/wxt/src/**\" \"--coverage.exclude=packages/wxt/src/core/utils/testing/**\" \"--coverage.exclude=**/*.d.ts\" \"--coverage.exclude=**/fixtures/**\"",
     "prepare": "simple-git-hooks",
@@ -19,30 +19,30 @@
     "build-deps": "pnpm tsx scripts/build-deps.ts"
   },
   "devDependencies": {
-    "@aklinker1/check": "^1.1.1",
+    "@aklinker1/check": "^1.3.1",
     "@types/fs-extra": "^11.0.4",
-    "@vitest/coverage-v8": "^1.0.1",
+    "@vitest/coverage-v8": "^1.6.0",
     "changelogen": "^0.5.5",
     "consola": "^3.2.3",
     "dependency-graph": "^1.0.0",
-    "execa": "^9.1.0",
-    "fast-glob": "^3.3.1",
-    "fs-extra": "^11.1.1",
+    "execa": "^9.2.0",
+    "fast-glob": "^3.3.2",
+    "fs-extra": "^11.2.0",
     "hasha": "^6.0.0",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.7",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.0",
-    "simple-git-hooks": "^2.9.0",
-    "tsx": "^4.11.2",
+    "prettier": "^3.3.2",
+    "simple-git-hooks": "^2.11.1",
+    "tsx": "^4.15.4",
     "typedoc": "^0.25.4",
     "typedoc-plugin-markdown": "4.0.0-next.23",
     "typedoc-vitepress-theme": "1.0.0-next.3",
     "typescript": "^5.4.5",
-    "vitepress": "^1.2.2",
-    "vitest": "^1.5.3",
+    "vitepress": "^1.2.3",
+    "vitest": "^1.6.0",
     "vitest-mock-extended": "^1.3.1",
-    "vitest-plugin-random-seed": "^1.0.2",
-    "vue": "^3.3.10",
+    "vitest-plugin-random-seed": "^1.1.0",
+    "vue": "^3.4.27",
     "wxt": "workspace:*",
     "yaml": "^2.4.5"
   },

packages/module-react/README.md

@@ -0,0 +1,32 @@
+# `@wxt-dev/module-react`
+
+Enables the use of [React](https://react.dev/) in your web extension, in HTML pages and content scripts.
+
+This plugin makes a few changes:
+
+1. Adds `@vitejs/plugin-react` to vite
+2. Adds the [`react` preset](https://github.com/unjs/unimport/blob/main/src/presets/react.ts) to auto-imports
+
+## Usage
+
+```sh
+pnpm i react react-dom
+pnpm i -D @wxt-dev/module-react
+```
+
+Then add the module to your config:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  // Required
+  modules: ['@wxt-dev/module-react'],
+
+  // Optional: Pass options to the module:
+  react: {
+    vite: {
+      // ...
+    },
+  },
+});
+```

packages/module-react/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@wxt-dev/module-react",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm -s build-deps && unbuild",
+    "check": "pnpm -s build-deps && check",
+    "build-deps": "pnpm -ws build-deps @wxt-dev/module-react"
+  },
+  "peerDependencies": {
+    "wxt": ">=0.18.5"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.1"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.3.1",
+    "publint": "^0.2.8",
+    "typescript": "^5.4.5",
+    "unbuild": "^2.0.0",
+    "wxt": "workspace:*"
+  }
+}

packages/module-react/src/index.ts

@@ -0,0 +1,27 @@
+import 'wxt';
+import { addImportPreset, addViteConfig, defineWxtModule } from 'wxt/modules';
+import react, { Options as PluginOptions } from '@vitejs/plugin-react';
+
+export default defineWxtModule<ReactModuleOptions>({
+  name: '@wxt-dev/module-react',
+  configKey: 'react',
+  setup(wxt, options) {
+    const { vite } = options ?? {};
+
+    addViteConfig(wxt, () => ({
+      plugins: [react(vite)],
+    }));
+
+    addImportPreset(wxt, 'react');
+  },
+});
+
+export interface ReactModuleOptions {
+  vite?: PluginOptions;
+}
+
+declare module 'wxt' {
+  export interface InlineConfig {
+    react?: ReactModuleOptions;
+  }
+}

packages/module-react/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "exclude": ["node_modules/**", "dist/**"]
+}

packages/module-solid/README.md

@@ -0,0 +1,32 @@
+# `@wxt-dev/module-solid`
+
+Enables the use of [SolidJS](https://www.solidjs.com/) in your web extension, in HTML pages and content scripts.
+
+This plugin makes a few changes:
+
+1. Adds `vite-plugin-solid` to vite
+2. Adds the [`solid-js` preset](https://github.com/unjs/unimport/blob/main/src/presets/solid.ts) to auto-imports
+
+## Usage
+
+```sh
+pnpm i solid-js
+pnpm i -D @wxt-dev/module-solid
+```
+
+Then add the module to your config:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  // Required
+  modules: ['@wxt-dev/module-solid'],
+
+  // Optional: Pass options to the module:
+  solid: {
+    vite: {
+      // ...
+    },
+  },
+});
+```

packages/module-solid/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@wxt-dev/module-solid",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm -s build-deps && unbuild",
+    "check": "pnpm -s build-deps && check",
+    "build-deps": "pnpm -ws build-deps @wxt-dev/module-solid"
+  },
+  "peerDependencies": {
+    "wxt": ">=0.18.5"
+  },
+  "dependencies": {
+    "vite-plugin-solid": "^2.10.2"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.3.1",
+    "publint": "^0.2.8",
+    "typescript": "^5.4.5",
+    "unbuild": "^2.0.0",
+    "wxt": "workspace:*"
+  }
+}

packages/module-solid/src/index.ts

@@ -0,0 +1,27 @@
+import 'wxt';
+import { addImportPreset, addViteConfig, defineWxtModule } from 'wxt/modules';
+import solid, { Options as PluginOptions } from 'vite-plugin-solid';
+
+export default defineWxtModule<SolidModuleOptions>({
+  name: '@wxt-dev/module-solid',
+  configKey: 'solid',
+  setup(wxt, options) {
+    const { vite } = options ?? {};
+
+    addViteConfig(wxt, () => ({
+      plugins: [solid(vite)],
+    }));
+
+    addImportPreset(wxt, 'solid-js');
+  },
+});
+
+export interface SolidModuleOptions {
+  vite?: PluginOptions;
+}
+
+declare module 'wxt' {
+  export interface InlineConfig {
+    solid?: SolidModuleOptions;
+  }
+}

packages/module-solid/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "exclude": ["node_modules/**", "dist/**"]
+}

packages/module-svelte/README.md

@@ -0,0 +1,32 @@
+# `@wxt-dev/module-svelte`
+
+Enables the use of [Svelte](https://svelte.dev/) in your web extension, in HTML pages and content scripts.
+
+This plugin makes a few changes:
+
+1. Adds `@sveltejs/vite-plugin-svelte` to vite
+2. Adds the [`svelte` preset](https://github.com/unjs/unimport/blob/main/src/presets/vue.ts) to auto-imports
+
+## Usage
+
+```sh
+pnpm i svelte
+pnpm i -D @wxt-dev/module-svelte
+```
+
+Then add the module to your config:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  // Required
+  modules: ['@wxt-dev/module-svelte'],
+
+  // Optional: Pass options to the module:
+  svelte: {
+    vite: {
+      // ...
+    },
+  },
+});
+```

packages/module-svelte/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@wxt-dev/module-svelte",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm -s build-deps && unbuild",
+    "check": "pnpm -s build-deps && check",
+    "build-deps": "pnpm -ws build-deps @wxt-dev/module-svelte"
+  },
+  "peerDependencies": {
+    "wxt": ">=0.18.5"
+  },
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.1"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.3.1",
+    "publint": "^0.2.8",
+    "typescript": "^5.4.5",
+    "unbuild": "^2.0.0",
+    "wxt": "workspace:*"
+  }
+}

packages/module-svelte/src/index.ts

@@ -0,0 +1,38 @@
+import 'wxt';
+import { addImportPreset, addViteConfig, defineWxtModule } from 'wxt/modules';
+import {
+  svelte,
+  vitePreprocess,
+  Options as PluginOptions,
+} from '@sveltejs/vite-plugin-svelte';
+
+export default defineWxtModule<SvelteModuleOptions>({
+  name: '@wxt-dev/module-svelte',
+  configKey: 'svelte',
+  setup(wxt, options) {
+    const { vite } = options ?? {};
+
+    addViteConfig(wxt, () => ({
+      plugins: [
+        svelte({
+          // Using a svelte.config.js file causes a segmentation fault when importing the file
+          configFile: false,
+          preprocess: [vitePreprocess()],
+          ...vite,
+        }),
+      ],
+    }));
+
+    addImportPreset(wxt, 'svelte');
+  },
+});
+
+export interface SvelteModuleOptions {
+  vite?: Partial<PluginOptions>;
+}
+
+declare module 'wxt' {
+  export interface InlineConfig {
+    svelte?: SvelteModuleOptions;
+  }
+}

packages/module-svelte/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "exclude": ["node_modules/**", "dist/**"]
+}

packages/module-vue/README.md

@@ -0,0 +1,36 @@
+# `@wxt-dev/module-vue`
+
+Enables the use of [Vue](https://vuejs.org/) in your web extension, in HTML pages and content scripts.
+
+This plugin makes a few changes:
+
+1. Adds `@vitejs/plugin-vue` to vite config
+2. Adds the [`vue` preset](https://github.com/unjs/unimport/blob/main/src/presets/vue.ts) to auto-imports
+3. Applies sourcemap fix to prevent HMR errors during development
+4. Enable auto-imports in `.vue` files
+
+## Usage
+
+```sh
+pnpm i vue
+pnpm i -D @wxt-dev/module-vue
+```
+
+Then add the module to your config:
+
+```ts
+// wxt.config.ts
+export default defineConfig({
+  // Required
+  modules: ['@wxt-dev/module-vue'],
+
+  // Optional: Pass options to the module:
+  vue: {
+    vite: {
+      script: {
+        propsDestructure: true,
+      },
+    },
+  },
+});
+```

packages/module-vue/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@wxt-dev/module-vue",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm -s build-deps && unbuild",
+    "check": "pnpm -s build-deps && check",
+    "build-deps": "pnpm -ws build-deps @wxt-dev/module-vue"
+  },
+  "peerDependencies": {
+    "wxt": ">=0.18.5"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^5.0.5"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.3.1",
+    "publint": "^0.2.8",
+    "typescript": "^5.4.5",
+    "unbuild": "^2.0.0",
+    "wxt": "workspace:*"
+  }
+}

packages/module-vue/src/index.ts

@@ -0,0 +1,47 @@
+import 'wxt';
+import { addImportPreset, addViteConfig, defineWxtModule } from 'wxt/modules';
+import vue, { Options as ViteOptions } from '@vitejs/plugin-vue';
+
+export default defineWxtModule<VueModuleOptions>({
+  name: '@wxt-dev/module-vue',
+  configKey: 'vue',
+  setup(wxt, options) {
+    const { vite } = options ?? {};
+
+    // Add plugin & set sourcemap option
+    addViteConfig(wxt, ({ command }) => ({
+      // @ts-ignore: Ignore vite version issues
+      plugins: [vue(vite)],
+      build: {
+        // Fixes known issue: https://github.com/wxt-dev/wxt/pull/607
+        sourcemap: false,
+      },
+    }));
+
+    // Enable auto-imports in template files
+    wxt.hooks.hook('ready', (wxt) => {
+      if (!wxt.config.imports) return;
+
+      wxt.config.imports.addons ??= {};
+      if (!Array.isArray(wxt.config.imports.addons)) {
+        wxt.config.imports.addons.vueTemplate = true;
+      } else {
+        wxt.logger.warn(
+          'Could not enable auto-imports in vue templates when using and array for imports.addons',
+        );
+      }
+    });
+
+    addImportPreset(wxt, 'vue');
+  },
+});
+
+export interface VueModuleOptions {
+  vite?: ViteOptions;
+}
+
+declare module 'wxt' {
+  export interface InlineConfig {
+    vue?: VueModuleOptions;
+  }
+}

packages/module-vue/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "exclude": ["node_modules/**", "dist/**"]
+}

packages/wxt-demo/package.json

@@ -18,13 +18,13 @@
     "build-deps": "pnpm -sw build-deps wxt-demo"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.34",
-    "@types/react-dom": "^18.2.14",
-    "sass": "^1.69.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "sass": "^1.77.5",
     "typescript": "^5.4.5",
     "wxt": "workspace:*"
   }

packages/wxt-demo/vitest.config.ts

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

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

@@ -280,8 +280,7 @@ describe('Output Directory Structure', () => {
         ----------------------------------------
         import { l as logHello, i as initPlugins } from "./chunks/_virtual_wxt-plugins-OjKtWpmY.js";
         function defineBackground(arg) {
-          if (typeof arg === "function")
-            return { main: arg };
+          if (typeof arg === "function") return { main: arg };
           return arg;
         }
         const definition = defineBackground({
@@ -363,8 +362,7 @@ describe('Output Directory Structure', () => {
         var _background = function() {
           "use strict";
           function defineBackground(arg) {
-            if (typeof arg === "function")
-              return { main: arg };
+            if (typeof arg === "function") return { main: arg };
             return arg;
           }
           function logHello(name) {

packages/wxt/package.json

@@ -102,61 +102,62 @@
   },
   "dependencies": {
     "@aklinker1/rollup-plugin-visualizer": "5.12.0",
-    "@types/webextension-polyfill": "^0.10.5",
+    "@types/webextension-polyfill": "^0.10.7",
     "@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",
+    "async-mutex": "^0.4.1",
+    "c12": "^1.11.1",
     "cac": "^6.7.14",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "ci-info": "^4.0.0",
-    "defu": "^6.1.3",
+    "defu": "^6.1.4",
     "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",
+    "esbuild": "^0.19.12",
+    "fast-glob": "^3.3.2",
+    "filesize": "^10.1.2",
+    "fs-extra": "^11.2.0",
+    "get-port": "^7.1.0",
+    "giget": "^1.2.3",
     "hookable": "^5.5.3",
-    "is-wsl": "^3.0.0",
-    "jiti": "^1.21.0",
+    "is-wsl": "^3.1.0",
+    "jiti": "^1.21.6",
     "json5": "^2.2.3",
     "jszip": "^3.10.1",
-    "linkedom": "^0.18.2",
+    "linkedom": "^0.18.3",
     "magicast": "^0.3.4",
-    "minimatch": "^9.0.3",
+    "minimatch": "^9.0.4",
     "natural-compare": "^1.4.0",
     "normalize-path": "^3.0.0",
     "nypm": "^0.3.8",
+    "ohash": "^1.1.3",
     "open": "^10.1.0",
     "ora": "^7.0.1",
-    "picocolors": "^1.0.0",
+    "picocolors": "^1.0.1",
     "prompts": "^2.4.2",
     "publish-browser-extension": "^2.1.3",
-    "unimport": "^3.4.0",
-    "vite": "^5.2.8",
+    "unimport": "^3.7.2",
+    "vite": "^5.3.0",
     "web-ext-run": "^0.2.0",
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
-    "@aklinker1/check": "^1.1.1",
-    "@faker-js/faker": "^8.3.1",
+    "@aklinker1/check": "^1.3.1",
+    "@faker-js/faker": "^8.4.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/node": "^20.14.2",
     "@types/normalize-path": "^3.0.2",
     "@types/prompts": "^2.4.9",
-    "execa": "^9.1.0",
+    "execa": "^9.2.0",
     "extract-zip": "^2.0.1",
-    "happy-dom": "^13.3.8",
+    "happy-dom": "^13.10.1",
     "lodash.merge": "^4.6.2",
-    "p-map": "^7.0.0",
-    "publint": "^0.2.6",
-    "tsup": "^8.0.1",
-    "tsx": "^4.11.2",
+    "p-map": "^7.0.2",
+    "publint": "^0.2.8",
+    "tsup": "^8.1.0",
+    "tsx": "^4.15.4",
     "typescript": "^5.4.5"
   }
 }

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

@@ -4,9 +4,10 @@ import { getEntrypointName } from '~/core/utils/entrypoints';
 import { parseHTML } from 'linkedom';
 import { dirname, relative, resolve } from 'node:path';
 import { normalizePath } from '~/core/utils/paths';
+import { murmurHash } from 'ohash';
 
-// Cache the preamble script for all devHtmlPrerender plugins, not just one
-let reactRefreshPreamble = '';
+// Stored outside the plugin to effect all instances of the devHtmlPrerender plugin.
+const inlineScriptContents: Record<number, string> = {};
 
 /**
  * Pre-renders the HTML entrypoints when building the extension to connect to the dev server.
@@ -20,8 +21,9 @@ export function devHtmlPrerender(
     config.wxtModuleDir,
     'dist/virtual/reload-html.js',
   );
-  const virtualReactRefreshId = '@wxt/virtual-react-refresh';
-  const resolvedVirtualReactRefreshId = '\0' + virtualReactRefreshId;
+
+  const virtualInlineScript = 'virtual:wxt-inline-script';
+  const resolvedVirtualInlineScript = '\0' + virtualInlineScript;
 
   return [
     {
@@ -76,22 +78,22 @@ export function devHtmlPrerender(
         const serverHtml = await server.transformHtml(url, html, originalUrl);
         const { document } = parseHTML(serverHtml);
 
-        // React pages include a preamble as an unsafe-inline type="module" script to enable fast refresh, as shown here:
-        // https://github.com/wxt-dev/wxt/issues/157#issuecomment-1756497616
-        // Since unsafe-inline scripts are blocked by MV3 CSPs, we need to virtualize it.
-        const reactRefreshScript = Array.from(
-          document.querySelectorAll('script[type=module]'),
-        ).find((script) => script.innerHTML.includes('@react-refresh'));
-        if (reactRefreshScript) {
-          // Save preamble to serve from server
-          reactRefreshPreamble = reactRefreshScript.innerHTML;
+        // Replace inline script with virtual module served via dev server.
+        // Extension CSP blocks inline scripts, so that's why we're pulling them
+        // out.
+        const inlineScripts = document.querySelectorAll('script:not([src])');
+        inlineScripts.forEach((script) => {
+          // Save the text content for later
+          const textContent = script.textContent ?? '';
+          const hash = murmurHash(textContent);
+          inlineScriptContents[hash] = textContent;
 
           // Replace unsafe inline script
           const virtualScript = document.createElement('script');
           virtualScript.type = 'module';
-          virtualScript.src = `${server.origin}/${virtualReactRefreshId}`;
-          reactRefreshScript.replaceWith(virtualScript);
-        }
+          virtualScript.src = `${server.origin}/@id/${virtualInlineScript}?${hash}`;
+          script.replaceWith(virtualScript);
+        });
 
         // Change /@vite/client -> http://localhost:3000/@vite/client
         const viteClientScript = document.querySelector<HTMLScriptElement>(
@@ -112,18 +114,25 @@ export function devHtmlPrerender(
       name: 'wxt:virtualize-react-refresh',
       apply: 'serve',
       resolveId(id) {
-        if (id === `/${virtualReactRefreshId}`) {
-          return resolvedVirtualReactRefreshId;
+        // Resolve inline scripts
+        if (id.startsWith(virtualInlineScript)) {
+          return '\0' + id;
         }
-        // Ignore chunk contents when pre-rendering
+
+        // Ignore chunks during HTML file pre-rendering
         if (id.startsWith('/chunks/')) {
           return '\0noop';
         }
       },
       load(id) {
-        if (id === resolvedVirtualReactRefreshId) {
-          return reactRefreshPreamble;
+        // Resolve virtualized inline scripts
+        if (id.startsWith(resolvedVirtualInlineScript)) {
+          // id="virtual:wxt-inline-script?<hash>"
+          const hash = Number(id.substring(id.indexOf('?') + 1));
+          return inlineScriptContents[hash];
         }
+
+        // Ignore chunks during HTML file pre-rendering
         if (id === '\0noop') {
           return '';
         }

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

@@ -49,7 +49,10 @@ try {
         const { document } = parseHTML(html);
         const script = document.createElement('script');
         script.type = 'module';
-        script.src = 'virtual:wxt-html-plugins';
+        script.src =
+          config.command === 'serve'
+            ? `http://${config.dev.server?.hostname}:${config.dev.server?.port}/@id/${virtualHtmlModuleId}`
+            : virtualHtmlModuleId;
         if (document.head == null) {
           const newHead = document.createElement('head');
           document.documentElement.prepend(newHead);

packages/wxt/src/core/package-managers/__tests__/fixtures/yarn-project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yarn-ls",
-  "packageManager": "yarn@1.22.19",
+  "packageManager": "yarn@1.22.22",
   "dependencies": {
     "mime-types": "2.1.35"
   },

taze.config.ts

@@ -0,0 +1,4 @@
+// https://github.com/antfu-collective/taze?tab=readme-ov-file#config-file
+export default {
+  exclude: ['typedoc', 'typedoc-plugin-markdown', 'typedoc-vitepress-theme'],
+};

templates/react/package.json

@@ -15,14 +15,14 @@
     "postinstall": "wxt prepare"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "typescript": "^5.4.5",
-    "wxt": "^0.18.0"
+    "wxt": "^0.18.6"
   }
 }

templates/solid/package.json

@@ -15,11 +15,11 @@
     "postinstall": "wxt prepare"
   },
   "dependencies": {
-    "solid-js": "^1.8.7"
+    "solid-js": "^1.8.17"
   },
   "devDependencies": {
     "typescript": "^5.4.5",
-    "vite-plugin-solid": "^2.8.0",
-    "wxt": "^0.18.0"
+    "vite-plugin-solid": "^2.10.2",
+    "wxt": "^0.18.6"
   }
 }

templates/svelte/package.json

@@ -14,12 +14,12 @@
     "postinstall": "wxt prepare"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@tsconfig/svelte": "^5.0.2",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.2",
-    "tslib": "^2.6.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.0",
+    "tslib": "^2.6.3",
     "typescript": "^5.4.5",
-    "wxt": "^0.18.0"
+    "wxt": "^0.18.6"
   }
 }

templates/vanilla/package.json

@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "typescript": "^5.4.5",
-    "wxt": "^0.18.0"
+    "wxt": "^0.18.6"
   }
 }

templates/vue/package.json

@@ -15,12 +15,12 @@
     "postinstall": "wxt prepare"
   },
   "dependencies": {
-    "vue": "^3.4.0"
+    "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.1",
+    "@vitejs/plugin-vue": "^5.0.5",
     "typescript": "^5.4.5",
-    "vue-tsc": "^2.0.6",
-    "wxt": "^0.18.0"
+    "vue-tsc": "^2.0.21",
+    "wxt": "^0.18.6"
   }
 }