chore(release): wxt v0.19.18

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

.github/actions/setup/action.yml

@@ -4,6 +4,9 @@ inputs:
   install:
     default: 'true'
     description: Whether or not to run 'pnpm install'
+  installArgs:
+    default: ''
+    description: Additional args to append to "pnpm install"
 runs:
   using: composite
   steps:
@@ -17,4 +20,4 @@ runs:
     - name: Install Dependencies
       if: ${{ inputs.install == 'true' }}
       shell: bash
-      run: pnpm install
+      run: pnpm install ${{ inputs.installArgs }}

.github/workflows/release.yml

@@ -13,6 +13,7 @@ on:
           - module-solid
           - module-svelte
           - module-vue
+          - storage
           - unocss
           - wxt
 

.github/workflows/sync-releases.yml

@@ -7,13 +7,14 @@ on:
         default: wxt
         type: choice
         options:
-          - wxt
-          - module-react
-          - module-vue
-          - module-svelte
-          - module-solid
           - auto-icons
           - i18n
+          - module-react
+          - module-solid
+          - module-svelte
+          - module-vue
+          - storage
+          - wxt
 
 jobs:
   sync:
@@ -21,6 +22,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
+        with:
+          installArgs: --ignore-scripts
       - run: pnpm tsx scripts/sync-releases.ts ${{ inputs.package }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/validate.yml

@@ -36,7 +36,7 @@ jobs:
       - uses: oven-sh/setup-bun@v2
       - name: pnpm test:coverage
         run: pnpm test:coverage -- --reporter=default --reporter=hanging-process
-      - uses: codecov/codecov-action@v4
+      - uses: codecov/codecov-action@v5
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
   windows-tests:

docs/.vitepress/components/UsingWxtSection.vue

@@ -53,6 +53,12 @@ const chromeExtensionIds = [
   'nmldnjcblcihmegipecakhmnieiofmgl', // Keyword Rank Checker
   'gppllamhaciichleihemgilcpledblpn', // YouTube Simple View - Hide distractions & more
   'pccbghdfdnnkkbcdcibchpbffdgednkf', // Propbar - Property Data Enhancer
+  'lfknakglefggmdkjdfhhofkjnnolffkh', // Text Search Pro - Search by case and whole-word match!
+  'mbenhbocjckkbaojacmaepiameldglij', // Invoice Generator
+  'phlfhkmdofajnbhgmbmjkbkdgppgoppb', // Monthly Bill Tracker
+  'macmkmchfoclhpbncclinhjflmdkaoom', // Wandpen - Instantly improve your writing with AI
+  'lhmgechokhmdekdpgkkemoeecelcaonm', // YouTube Hider - Remove Comments By Keywords, Usernames & Tools
+  'imgheieooppmahcgniieddodaliodeeg', // QA Compass - Record standardized bug reports easily
 ];
 
 const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);

docs/.vitepress/config.ts

@@ -13,11 +13,12 @@ import { version as wxtVersion } from '../../packages/wxt/package.json';
 import { version as i18nVersion } from '../../packages/i18n/package.json';
 import { version as autoIconsVersion } from '../../packages/auto-icons/package.json';
 import { version as unocssVersion } from '../../packages/unocss/package.json';
+import { version as storageVersion } from '../../packages/storage/package.json';
 
 const title = 'Next-gen Web Extension Framework';
 const titleSuffix = ' – WXT';
 const description =
-  "WXT provides the best developer experience, making it quick, easy, and fun to develop chrome extensions for all browsers. With built-in utilities for building, zipping, and publishing your extension, it's easy to get started.";
+  "WXT provides the best developer experience, making it quick, easy, and fun to develop web extensions. With built-in utilities for building, zipping, and publishing your extension, it's easy to get started.";
 const ogTitle = `${title}${titleSuffix}`;
 const ogUrl = 'https://wxt.dev';
 const ogImage = 'https://wxt.dev/social-preview.png';
@@ -87,7 +88,7 @@ export default defineConfig({
           ),
         ]),
         navItem('Other Packages', [
-          navItem(`wxt/storage — ${wxtVersion}`, '/storage'),
+          navItem(`@wxt-dev/storage — ${storageVersion}`, '/storage'),
           navItem(`@wxt-dev/auto-icons — ${autoIconsVersion}`, '/auto-icons'),
           navItem(`@wxt-dev/i18n — ${i18nVersion}`, '/i18n'),
           navItem(`@wxt-dev/unocss — ${unocssVersion}`, '/unocss'),

docs/guide/essentials/config/browser-startup.md

@@ -62,7 +62,8 @@ import { resolve } from 'node:path';
 
 export default defineRunnerConfig({
   // On Windows, the path must be absolute
-  chromiumArgs: [`--user-data-dir="${resolve('.wxt/chrome-data')}"`],
+  chromiumProfile: resolve('.wxt/chrome-data'),
+  keepProfileChanges: true,
 });
 ```
 

docs/guide/essentials/content-scripts.md

@@ -548,16 +548,21 @@ To use `injectScript`, we need two entrypoints, one content script and one unlis
 ```ts
 // entrypoints/example-main-world.ts
 export default defineUnlistedScript(() => {
-  console.log('Hello from the main world!');
+  console.log('Hello from the main world');
 });
 ```
 
 ```ts
 // entrypoints/example.content.ts
-export default defineContentScript(async () => {
-  await injectScript('/example-main-world.js', {
-    keepInDom: true,
-  });
+export default defineContentScript({
+  matches: ['*://*/*'],
+  async main() {
+    console.log('Injecting script...');
+    await injectScript('/example-main-world.js', {
+      keepInDom: true,
+    });
+    console.log('Done!');
+  },
 });
 ```
 

docs/guide/essentials/entrypoints.md

@@ -304,10 +304,7 @@ Follow the [Devtools Example](https://github.com/wxt-dev/examples/tree/main/exam
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewportYou are responsible for loading/running these scripts where needed. If necessary, don't forget to add the script and/or any related stylesheets to web_accessible_resources."
-      content="width=device-width, initial-scale=1.0"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Options Title</title>
     <meta name="manifest.open_in_tab" content="true|false" />
     <meta name="manifest.chrome_style" content="true|false" />

docs/guide/essentials/scripting.md

@@ -12,15 +12,18 @@ When using `browser.scripting.executeScript`, you can execute content scripts or
 // entrypoints/background.ts
 const res = await browser.scripting.executeScript({
   target: { tabId },
-  files: ['injected.js'],
+  files: ['content-scripts/example.js'],
 });
 console.log(res); // "Hello John!"
 ```
 
 ```ts
-// entrypoints/injected.js
-export default defineUnlistedScript(() => {
-  console.log('Script was injected!');
-  return 'Hello John!';
+// entrypoints/example.content.ts
+export default defineContentScript({
+  registration: 'runtime',
+  main(ctx) {
+    console.log('Script was executed!');
+    return 'Hello John!';
+  },
 });
 ```

docs/guide/essentials/target-different-browsers.md

@@ -75,3 +75,5 @@ Here are some examples:
     </body>
   </html>
   ```
+
+Alternatively, you can use the [`filterEntrypoints` config](/api/reference/wxt/interfaces/InlineConfig#filterentrypoints) to list all the entrypoints you want to build.

docs/guide/essentials/wxt-modules.md

@@ -75,7 +75,7 @@ import { defineWxtModule } from 'wxt/modules';
 
 export default defineWxtModule({
   setup(wxt) {
-    wxt.hook('ready', () => {
+    wxt.hook('config:resolved', () => {
       wxt.config.outDir = 'dist';
     });
   },

docs/guide/introduction.md

@@ -9,7 +9,7 @@ Check out the [comparison](/guide/resources/compare) to see how WXT compares to
 
 ## Prerequisites
 
-These docs assume you have a basic knowledge of how Chrome extensions are structured and how you access the extension APIs.
+These docs assume you have a basic knowledge of how web extensions are structured and how you access the extension APIs.
 
 :::warning New to extension development?
 If you have never written an extension before, follow Chrome's [Hello World tutorial](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world) to first **_create an extension without WXT_**, then come back here.

docs/guide/resources/faq.md

@@ -18,6 +18,14 @@ To list the content scripts registered during development, open the service work
 await chrome.scripting.getRegisteredContentScripts();
 ```
 
+## How do I disable opening the browser automatically during development?
+
+See https://wxt.dev/guide/essentials/config/browser-startup.html#disable-opening-browser
+
+## How do I stay logged into a website during development?
+
+See https://wxt.dev/guide/essentials/config/browser-startup.html#persist-data
+
 ## My component library doesn't work in content scripts!
 
 Component libraries place their CSS in the document's `<head>` by default. When using `createShadowRoot`, your UI is isolated from the document's styles because it's inside a ShadowRoot.

docs/index.md

@@ -6,7 +6,7 @@ title: Next-gen Web Extension Framework
 hero:
   name: WXT
   text: Next-gen Web Extension Framework
-  tagline: An open source tool that makes Chrome Extension development faster than ever before.
+  tagline: An open source tool that makes web extension development faster than ever before.
   image:
     src: /hero-logo.svg
     alt: WXT
@@ -75,7 +75,7 @@ features:
 
 ## Put <span style="color: var(--vp-c-brand-1)">Developer Experience</span> First
 
-WXT simplifies the chrome extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.
+WXT simplifies the web extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.
 
 <div style="margin: auto; width: 100%; max-width: 900px; text-align: center">
   <video src="https://github.com/wxt-dev/wxt/assets/10101283/4d678939-1bdb-495c-9c36-3aa281d84c94" controls></video>
@@ -87,7 +87,7 @@ WXT simplifies the chrome extension development process by providing tools for z
 
 ## Who's Using WXT?
 
-Battle tested and ready for production. Explore chrome extensions made with WXT.
+Battle tested and ready for production. Explore web extensions made with WXT.
 
 <ClientOnly>
   <UsingWxtSection />

docs/storage.md

@@ -6,23 +6,47 @@ outline: deep
 
 [Changelog](https://github.com/wxt-dev/wxt/blob/main/packages/wxt/CHANGELOG.md)
 
-WXT provides a simplified API to replace the `browser.storage.*` APIs. Use the `storage` auto-import from `wxt/storage` or import it manually to get started:
+A simplified wrapper around the extension storage APIs.
+
+## Installation
+
+### With WXT
+
+This module is built-in to WXT, so you don't need to install anything.
 
 ```ts
 import { storage } from 'wxt/storage';
 ```
 
-> [!IMPORTANT]
-> 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'],
->   },
-> });
-> ```
+If you use auto-imports, `storage` is auto-imported for you, so you don't even need to import it!
+
+### Without WXT
+
+Install the NPM package:
+
+```sh
+npm i @wxt-dev/storage
+pnpm add @wxt-dev/storage
+yarn add @wxt-dev/storage
+bun add @wxt-dev/storage
+```
+
+```ts
+import { storage } from '@wxt-dev/storage';
+```
+
+## Storage Permission
+
+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'],
+  },
+});
+```
 
 ## Basic Usage
 
@@ -51,7 +75,7 @@ await storage.watch<number>(
 await storage.getMeta<{ v: number }>('local:installDate');
 ```
 
-For a full list of methods available, see the [API reference](/api/reference/wxt/storage/interfaces/WxtStorage).
+For a full list of methods available, see the [API reference](/api/reference/@wxt-dev/storage/interfaces/WxtStorage).
 
 ## Watchers
 
@@ -134,7 +158,7 @@ const unwatch = showChangelogOnUpdate.watch((newValue) => {
 });
 ```
 
-For a full list of properties and methods available, see the [API reference](/api/reference/wxt/storage/interfaces/WxtStorageItem).
+For a full list of properties and methods available, see the [API reference](/api/reference/@wxt-dev/storage/interfaces/WxtStorageItem).
 
 ### Versioning
 
@@ -330,4 +354,4 @@ await storage.setItems([
 ]);
 ```
 
-Refer to the [API Reference](/api/reference/wxt/storage/interfaces/WxtStorage) for types and examples of how to use all the bulk APIs.
+Refer to the [API Reference](/api/reference/@wxt-dev/storage/interfaces/WxtStorage) for types and examples of how to use all the bulk APIs.

docs/typedoc.json

@@ -2,11 +2,18 @@
   "$schema": "https://typedoc.org/schema.json",
   "entryPointStrategy": "packages",
   "entryPoints": ["../packages/wxt"],
-  "plugin": ["typedoc-plugin-markdown", "typedoc-vitepress-theme"],
+  "plugin": [
+    "typedoc-plugin-markdown",
+    "typedoc-vitepress-theme",
+    "typedoc-plugin-frontmatter"
+  ],
   "out": "./api/reference",
   "githubPages": false,
   "excludePrivate": true,
   "excludeProtected": true,
   "excludeInternal": true,
-  "readme": "none"
+  "readme": "none",
+  "frontmatterGlobals": {
+    "editLink": false
+  }
 }

package.json

@@ -32,6 +32,7 @@
     "simple-git-hooks": "^2.11.1",
     "tsx": "4.15.7",
     "typedoc": "^0.25.4",
+    "typedoc-plugin-frontmatter": "^1.1.0",
     "typedoc-plugin-markdown": "4.0.0-next.23",
     "typedoc-vitepress-theme": "1.0.0-next.3",
     "typescript": "^5.6.3",

packages/module-react/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## v1.1.2
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/module-react-v1.1.1...module-react-v1.1.2)
+
+### 🩹 Fixes
+
+- Use `config:resolved` hook to update config instead of `ready` ([#1178](https://github.com/wxt-dev/wxt/pull/1178))
+
+### 🏡 Chore
+
+- Add  `oxlint` for linting ([#947](https://github.com/wxt-dev/wxt/pull/947))
+- Upgrade all non-major dependencies ([#1040](https://github.com/wxt-dev/wxt/pull/1040))
+- **deps:** Upgrade all non-major dependencies ([#1164](https://github.com/wxt-dev/wxt/pull/1164))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+
 ## v1.1.1
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/module-react-v1.1.0...module-react-v1.1.1)

packages/module-react/modules/react.ts

@@ -15,7 +15,7 @@ export default defineWxtModule<ReactModuleOptions>({
     addImportPreset(wxt, 'react');
 
     // Enable auto-imports for JSX files
-    wxt.hooks.hook('ready', (wxt) => {
+    wxt.hook('config:resolved', (wxt) => {
       if (wxt.config.imports === false) return;
 
       wxt.config.imports.dirsScanOptions ??= {};

packages/module-react/package.json

@@ -17,7 +17,7 @@
     "email": "aaronklinker1+wxt@gmail.com"
   },
   "license": "MIT",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -44,7 +44,7 @@
     "prepare": "buildc --deps-only -- wxt prepare"
   },
   "peerDependencies": {
-    "wxt": ">=0.18.6"
+    "wxt": ">=0.19.16"
   },
   "dependencies": {
     "@vitejs/plugin-react": "^4.3.3"

packages/module-solid/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## v1.1.3
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/module-solid-v1.1.2...module-solid-v1.1.3)
+
+### 🩹 Fixes
+
+- Use `config:resolved` hook to update config instead of `ready` ([#1178](https://github.com/wxt-dev/wxt/pull/1178))
+
+### 🏡 Chore
+
+- Add  `oxlint` for linting ([#947](https://github.com/wxt-dev/wxt/pull/947))
+- Upgrade all non-major dependencies ([#1040](https://github.com/wxt-dev/wxt/pull/1040))
+- **deps:** Upgrade all non-major dependencies ([#1164](https://github.com/wxt-dev/wxt/pull/1164))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+
 ## v1.1.2
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/module-solid-v1.1.1...module-solid-v1.1.2)

packages/module-solid/modules/solid.ts

@@ -18,7 +18,7 @@ export default defineWxtModule<SolidModuleOptions>({
     addImportPreset(wxt, 'solid-js');
 
     // Enable auto-imports for JSX files
-    wxt.hooks.hook('ready', (wxt) => {
+    wxt.hook('config:resolved', (wxt) => {
       if (wxt.config.imports === false) return;
 
       wxt.config.imports.dirsScanOptions ??= {};

packages/module-solid/package.json

@@ -17,7 +17,7 @@
     "email": "aaronklinker1+wxt@gmail.com"
   },
   "license": "MIT",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -44,7 +44,7 @@
     "prepare": "buildc --deps-only -- wxt prepare"
   },
   "peerDependencies": {
-    "wxt": ">=0.18.6"
+    "wxt": ">=0.19.16"
   },
   "dependencies": {
     "vite-plugin-solid": "^2.10.2"

packages/module-svelte/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## v2.0.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/module-svelte-v2.0.0...module-svelte-v2.0.1)
+
+### 🩹 Fixes
+
+- Modify dev `vite.resolve.conditions` to support Vite 6 + Svelte 5 ([#1230](https://github.com/wxt-dev/wxt/pull/1230))
+
+### 🏡 Chore
+
+- **deps:** Upgrade all non-major dependencies ([#1164](https://github.com/wxt-dev/wxt/pull/1164))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+
 ## v2.0.0
 
 [⚠️ breaking changes](https://wxt.dev/guide/upgrade-guide/wxt) • [compare changes](https://github.com/wxt-dev/wxt/compare/module-svelte-v1.0.1...module-svelte-v2.0.0)
@@ -51,4 +67,4 @@ To upgrade to svelte 5, just install `svelte@5`.
 
 ## v1.0.0
 
-Initial release 🎉
+Initial release 🎉

packages/module-svelte/package.json

@@ -17,7 +17,7 @@
     "email": "aaronklinker1+wxt@gmail.com"
   },
   "license": "MIT",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",

packages/module-svelte/src/index.ts

@@ -12,7 +12,7 @@ export default defineWxtModule<SvelteModuleOptions>({
   setup(wxt, options) {
     const { vite } = options ?? {};
 
-    addViteConfig(wxt, () => ({
+    addViteConfig(wxt, ({ mode }) => ({
       plugins: [
         svelte({
           // Using a svelte.config.js file causes a segmentation fault when importing the file
@@ -21,6 +21,9 @@ export default defineWxtModule<SvelteModuleOptions>({
           ...vite,
         }),
       ],
+      resolve: {
+        conditions: mode === 'development' ? ['browser'] : [],
+      },
     }));
 
     addImportPreset(wxt, 'svelte');

packages/module-vue/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## v1.0.2
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/module-vue-v1.0.1...module-vue-v1.0.2)
+
+### 🩹 Fixes
+
+- Use `config:resolved` hook to update config instead of `ready` ([#1178](https://github.com/wxt-dev/wxt/pull/1178))
+
+### 🏡 Chore
+
+- Add  `oxlint` for linting ([#947](https://github.com/wxt-dev/wxt/pull/947))
+- **deps:** Bump @vitejs/plugin-vue from 5.1.1 to 5.1.4 ([#1020](https://github.com/wxt-dev/wxt/pull/1020))
+- Upgrade all non-major dependencies ([#1040](https://github.com/wxt-dev/wxt/pull/1040))
+- **deps:** Upgrade all non-major dependencies ([#1164](https://github.com/wxt-dev/wxt/pull/1164))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+
 ## v1.0.1
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/module-vue-v1.0.0...module-vue-v1.0.1)

packages/module-vue/package.json

@@ -17,7 +17,7 @@
     "email": "aaronklinker1+wxt@gmail.com"
   },
   "license": "MIT",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -42,7 +42,7 @@
     "check": "pnpm build && check"
   },
   "peerDependencies": {
-    "wxt": ">=0.18.6"
+    "wxt": ">=0.19.16"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^5.2.0"

packages/module-vue/src/index.ts

@@ -19,7 +19,7 @@ export default defineWxtModule<VueModuleOptions>({
     }));
 
     // Enable auto-imports in template files
-    wxt.hooks.hook('ready', (wxt) => {
+    wxt.hook('config:resolved', (wxt) => {
       if (!wxt.config.imports) return;
 
       wxt.config.imports.addons ??= {};

packages/storage/CHANGELOG.md

@@ -0,0 +1,34 @@
+# Changelog
+
+## v1.0.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/storage-v1.0.0...storage-v1.0.1)
+
+### 🩹 Fixes
+
+- Use `browser` for mv2 storage ([#1200](https://github.com/wxt-dev/wxt/pull/1200))
+
+### 📖 Documentation
+
+- Cleanup changelog ([f5b7f7e](https://github.com/wxt-dev/wxt/commit/f5b7f7e))
+
+### 🏡 Chore
+
+- Init changelog for storage package ([6fc227b](https://github.com/wxt-dev/wxt/commit/6fc227b))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+
+## v1.0.0
+
+Extracted `wxt/storage` into it's own package, `@wxt-dev/storage`!
+
+It's still shipped inside WXT and accessible via `wxt/storage`, but now:
+
+- Non-WXT projects can use the storage wrapper.
+- We can make breaking changes to the API separately.
+
+[Read the docs](https://wxt.dev/storage.html) for more details.
+
+> This is apart of the v1.0 initiative for WXT.

packages/storage/README.md

@@ -0,0 +1,36 @@
+# WXT Storage
+
+[Changelog](https://github.com/wxt-dev/wxt/blob/main/packages/storage/CHANGELOG.md) • [Docs](https://wxt.dev/storage.html)
+
+A simplified wrapper around the extension storage APIs.
+
+## Installation
+
+### With WXT
+
+This module is built-in to WXT, so you don't need to install anything.
+
+```ts
+import { storage } from 'wxt/storage';
+```
+
+If you use auto-imports, `storage` is auto-imported for you, so you don't even need to import it!
+
+### Without WXT
+
+Install the NPM package:
+
+```sh
+npm i @wxt-dev/storage
+pnpm add @wxt-dev/storage
+yarn add @wxt-dev/storage
+bun add @wxt-dev/storage
+```
+
+```ts
+import { storage } from '@wxt-dev/storage';
+```
+
+## Usage
+
+Read full docs on the [documentation website](https://wxt.dev/storage.html).

packages/storage/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@wxt-dev/storage",
+  "description": "Web extension storage API provided by WXT, supports all browsers.",
+  "version": "1.0.1",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wxt-dev/wxt.git",
+    "directory": "packages/storage"
+  },
+  "homepage": "https://wxt.dev/storage.html",
+  "keywords": [
+    "wxt",
+    "storage",
+    "extension",
+    "addon",
+    "chrome",
+    "firefox",
+    "edge"
+  ],
+  "author": {
+    "name": "Aaron Klinker",
+    "email": "aaronklinker1+wxt@gmail.com"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "buildc -- unbuild",
+    "check": "buildc --deps-only -- check",
+    "test": "buildc --deps-only -- vitest"
+  },
+  "dependencies": {
+    "async-mutex": "^0.5.0",
+    "dequal": "^2.0.3"
+  },
+  "devDependencies": {
+    "@aklinker1/check": "^1.4.5",
+    "@types/chrome": "^0.0.268",
+    "@webext-core/fake-browser": "^1.3.1",
+    "oxlint": "^0.9.9",
+    "publint": "^0.2.11",
+    "typescript": "^5.6.2",
+    "unbuild": "^2.0.0",
+    "vitest": "^2.0.0"
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ]
+}

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

@@ -1,7 +1,6 @@
 import { fakeBrowser } from '@webext-core/fake-browser';
 import { describe, it, expect, beforeEach, vi, expectTypeOf } from 'vitest';
-import { browser } from 'wxt/browser';
-import { MigrationError, WxtStorageItem, storage } from '../storage';
+import { MigrationError, type WxtStorageItem, storage } from '../index';
 
 /**
  * This works because fakeBrowser is synchronous, and is will finish any number of chained
@@ -223,7 +222,7 @@ describe('Storage Utils', () => {
       describe('setMeta', () => {
         it('should set metadata at key+$', async () => {
           const existing = { v: 1 };
-          await browser.storage[storageArea].set({ count$: existing });
+          await chrome.storage[storageArea].set({ count$: existing });
           const newValues = {
             date: Date.now(),
           };
@@ -239,7 +238,7 @@ describe('Storage Utils', () => {
           'should remove any properties set to %s',
           async (version) => {
             const existing = { v: 1 };
-            await browser.storage[storageArea].set({ count$: existing });
+            await chrome.storage[storageArea].set({ count$: existing });
             const expected = {};
 
             await storage.setMeta(`${storageArea}:count`, { v: version });
@@ -1163,7 +1162,7 @@ describe('Storage Utils', () => {
 
         await item.removeValue();
         // Make sure it's actually blank before running the test
-        expect(await browser.storage.local.get()).toEqual({});
+        expect(await chrome.storage.local.get()).toEqual({});
         init.mockClear();
 
         const [value1, value2] = await Promise.all([

packages/storage/src/index.ts

@@ -0,0 +1,878 @@
+/// <reference types="chrome" />
+/**
+ * Simplified storage APIs with support for versioned fields, snapshots, metadata, and item definitions.
+ *
+ * See [the guide](https://wxt.dev/storage.html) for more information.
+ * @module @wxt-dev/storage
+ */
+import { dequal } from 'dequal/lite';
+import { Mutex } from 'async-mutex';
+
+const browser: typeof chrome =
+  // @ts-expect-error
+  globalThis.browser?.runtime?.id == null
+    ? globalThis.chrome
+    : // @ts-expect-error
+      globalThis.browser;
+
+export const storage = createStorage();
+
+function createStorage(): WxtStorage {
+  const drivers: Record<StorageArea, WxtStorageDriver> = {
+    local: createDriver('local'),
+    session: createDriver('session'),
+    sync: createDriver('sync'),
+    managed: createDriver('managed'),
+  };
+  const getDriver = (area: StorageArea) => {
+    const driver = drivers[area];
+    if (driver == null) {
+      const areaNames = Object.keys(drivers).join(', ');
+      throw Error(`Invalid area "${area}". Options: ${areaNames}`);
+    }
+    return driver;
+  };
+  const resolveKey = (key: StorageItemKey) => {
+    const deliminatorIndex = key.indexOf(':');
+    const driverArea = key.substring(0, deliminatorIndex) as StorageArea;
+    const driverKey = key.substring(deliminatorIndex + 1);
+    if (driverKey == null)
+      throw Error(
+        `Storage key should be in the form of "area:key", but received "${key}"`,
+      );
+
+    return {
+      driverArea,
+      driverKey,
+      driver: getDriver(driverArea),
+    };
+  };
+  const getMetaKey = (key: string) => key + '$';
+  const mergeMeta = (oldMeta: any, newMeta: any): any => {
+    const newFields = { ...oldMeta };
+    Object.entries(newMeta).forEach(([key, value]) => {
+      if (value == null) delete newFields[key];
+      else newFields[key] = value;
+    });
+    return newFields;
+  };
+  const getValueOrFallback = (value: any, fallback: any) =>
+    value ?? fallback ?? null;
+  const getMetaValue = (properties: any) =>
+    typeof properties === 'object' && !Array.isArray(properties)
+      ? properties
+      : {};
+
+  const getItem = async (
+    driver: WxtStorageDriver,
+    driverKey: string,
+    opts: GetItemOptions<any> | undefined,
+  ) => {
+    const res = await driver.getItem<any>(driverKey);
+    return getValueOrFallback(res, opts?.fallback ?? opts?.defaultValue);
+  };
+  const getMeta = async (driver: WxtStorageDriver, driverKey: string) => {
+    const metaKey = getMetaKey(driverKey);
+    const res = await driver.getItem<any>(metaKey);
+    return getMetaValue(res);
+  };
+  const setItem = async (
+    driver: WxtStorageDriver,
+    driverKey: string,
+    value: any,
+  ) => {
+    await driver.setItem(driverKey, value ?? null);
+  };
+  const setMeta = async (
+    driver: WxtStorageDriver,
+    driverKey: string,
+    properties: any | undefined,
+  ) => {
+    const metaKey = getMetaKey(driverKey);
+    const existingFields = getMetaValue(await driver.getItem(metaKey));
+    await driver.setItem(metaKey, mergeMeta(existingFields, properties));
+  };
+  const removeItem = async (
+    driver: WxtStorageDriver,
+    driverKey: string,
+    opts: RemoveItemOptions | undefined,
+  ) => {
+    await driver.removeItem(driverKey);
+    if (opts?.removeMeta) {
+      const metaKey = getMetaKey(driverKey);
+      await driver.removeItem(metaKey);
+    }
+  };
+  const removeMeta = async (
+    driver: WxtStorageDriver,
+    driverKey: string,
+    properties: string | string[] | undefined,
+  ) => {
+    const metaKey = getMetaKey(driverKey);
+    if (properties == null) {
+      await driver.removeItem(metaKey);
+    } else {
+      const newFields = getMetaValue(await driver.getItem(metaKey));
+      [properties].flat().forEach((field) => delete newFields[field]);
+      await driver.setItem(metaKey, newFields);
+    }
+  };
+  const watch = (
+    driver: WxtStorageDriver,
+    driverKey: string,
+    cb: WatchCallback<any>,
+  ) => {
+    return driver.watch(driverKey, cb);
+  };
+
+  const storage: WxtStorage = {
+    getItem: async (key, opts) => {
+      const { driver, driverKey } = resolveKey(key);
+      return await getItem(driver, driverKey, opts);
+    },
+    getItems: async (keys) => {
+      const areaToKeyMap = new Map<StorageArea, string[]>();
+      const keyToOptsMap = new Map<string, GetItemOptions<any> | undefined>();
+      const orderedKeys: StorageItemKey[] = [];
+
+      keys.forEach((key) => {
+        let keyStr: StorageItemKey;
+        let opts: GetItemOptions<any> | undefined;
+        if (typeof key === 'string') {
+          // key: string
+          keyStr = key;
+        } else if ('getValue' in key) {
+          // key: WxtStorageItem
+          keyStr = key.key;
+          opts = { fallback: key.fallback };
+        } else {
+          // key: { key, options }
+          keyStr = key.key;
+          opts = key.options;
+        }
+        orderedKeys.push(keyStr);
+        const { driverArea, driverKey } = resolveKey(keyStr);
+        const areaKeys = areaToKeyMap.get(driverArea) ?? [];
+        areaToKeyMap.set(driverArea, areaKeys.concat(driverKey));
+        keyToOptsMap.set(keyStr, opts);
+      });
+
+      const resultsMap = new Map<StorageItemKey, any>();
+      await Promise.all(
+        Array.from(areaToKeyMap.entries()).map(async ([driverArea, keys]) => {
+          const driverResults = await drivers[driverArea].getItems(keys);
+          driverResults.forEach((driverResult) => {
+            const key = `${driverArea}:${driverResult.key}` as StorageItemKey;
+            const opts = keyToOptsMap.get(key);
+            const value = getValueOrFallback(
+              driverResult.value,
+              opts?.fallback ?? opts?.defaultValue,
+            );
+            resultsMap.set(key, value);
+          });
+        }),
+      );
+
+      return orderedKeys.map((key) => ({
+        key,
+        value: resultsMap.get(key),
+      }));
+    },
+    getMeta: async (key) => {
+      const { driver, driverKey } = resolveKey(key);
+      return await getMeta(driver, driverKey);
+    },
+    getMetas: async (args) => {
+      const keys = args.map((arg) => {
+        const key = typeof arg === 'string' ? arg : arg.key;
+        const { driverArea, driverKey } = resolveKey(key);
+        return {
+          key,
+          driverArea,
+          driverKey,
+          driverMetaKey: getMetaKey(driverKey),
+        };
+      });
+      const areaToDriverMetaKeysMap = keys.reduce<
+        Partial<Record<StorageArea, (typeof keys)[number][]>>
+      >((map, key) => {
+        map[key.driverArea] ??= [];
+        map[key.driverArea]!.push(key);
+        return map;
+      }, {});
+
+      const resultsMap: Record<string, any> = {};
+      await Promise.all(
+        Object.entries(areaToDriverMetaKeysMap).map(async ([area, keys]) => {
+          const areaRes = await browser.storage[area as StorageArea].get(
+            keys.map((key) => key.driverMetaKey),
+          );
+          keys.forEach((key) => {
+            resultsMap[key.key] = areaRes[key.driverMetaKey] ?? {};
+          });
+        }),
+      );
+
+      return keys.map((key) => ({
+        key: key.key,
+        meta: resultsMap[key.key],
+      }));
+    },
+    setItem: async (key, value) => {
+      const { driver, driverKey } = resolveKey(key);
+      await setItem(driver, driverKey, value);
+    },
+    setItems: async (items) => {
+      const areaToKeyValueMap: Partial<
+        Record<StorageArea, Array<{ key: string; value: any }>>
+      > = {};
+      items.forEach((item) => {
+        const { driverArea, driverKey } = resolveKey(
+          'key' in item ? item.key : item.item.key,
+        );
+        areaToKeyValueMap[driverArea] ??= [];
+        areaToKeyValueMap[driverArea].push({
+          key: driverKey,
+          value: item.value,
+        });
+      });
+      await Promise.all(
+        Object.entries(areaToKeyValueMap).map(async ([driverArea, values]) => {
+          const driver = getDriver(driverArea as StorageArea);
+          await driver.setItems(values);
+        }),
+      );
+    },
+    setMeta: async (key, properties) => {
+      const { driver, driverKey } = resolveKey(key);
+      await setMeta(driver, driverKey, properties);
+    },
+    setMetas: async (items) => {
+      const areaToMetaUpdatesMap: Partial<
+        Record<StorageArea, { key: string; properties: any }[]>
+      > = {};
+      items.forEach((item) => {
+        const { driverArea, driverKey } = resolveKey(
+          'key' in item ? item.key : item.item.key,
+        );
+        areaToMetaUpdatesMap[driverArea] ??= [];
+        areaToMetaUpdatesMap[driverArea].push({
+          key: driverKey,
+          properties: item.meta,
+        });
+      });
+
+      await Promise.all(
+        Object.entries(areaToMetaUpdatesMap).map(
+          async ([storageArea, updates]) => {
+            const driver = getDriver(storageArea as StorageArea);
+            const metaKeys = updates.map(({ key }) => getMetaKey(key));
+            console.log(storageArea, metaKeys);
+            const existingMetas = await driver.getItems(metaKeys);
+            const existingMetaMap = Object.fromEntries(
+              existingMetas.map(({ key, value }) => [key, getMetaValue(value)]),
+            );
+
+            const metaUpdates = updates.map(({ key, properties }) => {
+              const metaKey = getMetaKey(key);
+              return {
+                key: metaKey,
+                value: mergeMeta(existingMetaMap[metaKey] ?? {}, properties),
+              };
+            });
+
+            await driver.setItems(metaUpdates);
+          },
+        ),
+      );
+    },
+    removeItem: async (key, opts) => {
+      const { driver, driverKey } = resolveKey(key);
+      await removeItem(driver, driverKey, opts);
+    },
+    removeItems: async (keys) => {
+      const areaToKeysMap: Partial<Record<StorageArea, string[]>> = {};
+
+      keys.forEach((key) => {
+        let keyStr: StorageItemKey;
+        let opts: RemoveItemOptions | undefined;
+        if (typeof key === 'string') {
+          // key: string
+          keyStr = key;
+        } else if ('getValue' in key) {
+          // key: WxtStorageItem
+          keyStr = key.key;
+        } else if ('item' in key) {
+          // key: { item, options }
+          keyStr = key.item.key;
+          opts = key.options;
+        } else {
+          // key: { key, options }
+          keyStr = key.key;
+          opts = key.options;
+        }
+        const { driverArea, driverKey } = resolveKey(keyStr);
+        areaToKeysMap[driverArea] ??= [];
+        areaToKeysMap[driverArea].push(driverKey);
+        if (opts?.removeMeta) {
+          areaToKeysMap[driverArea].push(getMetaKey(driverKey));
+        }
+      });
+
+      await Promise.all(
+        Object.entries(areaToKeysMap).map(async ([driverArea, keys]) => {
+          const driver = getDriver(driverArea as StorageArea);
+          await driver.removeItems(keys);
+        }),
+      );
+    },
+    removeMeta: async (key, properties) => {
+      const { driver, driverKey } = resolveKey(key);
+      await removeMeta(driver, driverKey, properties);
+    },
+    snapshot: async (base, opts) => {
+      const driver = getDriver(base);
+      const data = await driver.snapshot();
+      opts?.excludeKeys?.forEach((key) => {
+        delete data[key];
+        delete data[getMetaKey(key)];
+      });
+      return data;
+    },
+    restoreSnapshot: async (base, data) => {
+      const driver = getDriver(base);
+      await driver.restoreSnapshot(data);
+    },
+    watch: (key, cb) => {
+      const { driver, driverKey } = resolveKey(key);
+      return watch(driver, driverKey, cb);
+    },
+    unwatch() {
+      Object.values(drivers).forEach((driver) => {
+        driver.unwatch();
+      });
+    },
+    defineItem: (key, opts?: WxtStorageItemOptions<any>) => {
+      const { driver, driverKey } = resolveKey(key);
+
+      const { version: targetVersion = 1, migrations = {} } = opts ?? {};
+      if (targetVersion < 1) {
+        throw Error(
+          'Storage item version cannot be less than 1. Initial versions should be set to 1, not 0.',
+        );
+      }
+      const migrate = async () => {
+        const driverMetaKey = getMetaKey(driverKey);
+        const [{ value }, { value: meta }] = await driver.getItems([
+          driverKey,
+          driverMetaKey,
+        ]);
+        if (value == null) return;
+
+        const currentVersion = meta?.v ?? 1;
+        if (currentVersion > targetVersion) {
+          throw Error(
+            `Version downgrade detected (v${currentVersion} -> v${targetVersion}) for "${key}"`,
+          );
+        }
+
+        console.debug(
+          `[@wxt-dev/storage] Running storage migration for ${key}: v${currentVersion} -> v${targetVersion}`,
+        );
+        const migrationsToRun = Array.from(
+          { length: targetVersion - currentVersion },
+          (_, i) => currentVersion + i + 1,
+        );
+        let migratedValue = value;
+        for (const migrateToVersion of migrationsToRun) {
+          try {
+            migratedValue =
+              (await migrations?.[migrateToVersion]?.(migratedValue)) ??
+              migratedValue;
+          } catch (err) {
+            throw Error(`v${migrateToVersion} migration failed for "${key}"`, {
+              cause: err,
+            });
+          }
+        }
+        await driver.setItems([
+          { key: driverKey, value: migratedValue },
+          { key: driverMetaKey, value: { ...meta, v: targetVersion } },
+        ]);
+        console.debug(
+          `[@wxt-dev/storage] Storage migration completed for ${key} v${targetVersion}`,
+          { migratedValue },
+        );
+      };
+      const migrationsDone =
+        opts?.migrations == null
+          ? Promise.resolve()
+          : migrate().catch((err) => {
+              console.error(
+                `[@wxt-dev/storage] Migration failed for ${key}`,
+                err,
+              );
+            });
+
+      const initMutex = new Mutex();
+
+      const getFallback = () => opts?.fallback ?? opts?.defaultValue ?? null;
+
+      const getOrInitValue = () =>
+        initMutex.runExclusive(async () => {
+          const value = await driver.getItem<any>(driverKey);
+          // Don't init value if it already exists or the init function isn't provided
+          if (value != null || opts?.init == null) return value;
+
+          const newValue = await opts.init();
+          await driver.setItem<any>(driverKey, newValue);
+          return newValue;
+        });
+
+      // Initialize the value once migrations have finished
+      migrationsDone.then(getOrInitValue);
+
+      return {
+        key,
+        get defaultValue() {
+          return getFallback();
+        },
+        get fallback() {
+          return getFallback();
+        },
+        getValue: async () => {
+          await migrationsDone;
+          if (opts?.init) {
+            return await getOrInitValue();
+          } else {
+            return await getItem(driver, driverKey, opts);
+          }
+        },
+        getMeta: async () => {
+          await migrationsDone;
+          return await getMeta(driver, driverKey);
+        },
+        setValue: async (value) => {
+          await migrationsDone;
+          return await setItem(driver, driverKey, value);
+        },
+        setMeta: async (properties) => {
+          await migrationsDone;
+          return await setMeta(driver, driverKey, properties);
+        },
+        removeValue: async (opts) => {
+          await migrationsDone;
+          return await removeItem(driver, driverKey, opts);
+        },
+        removeMeta: async (properties) => {
+          await migrationsDone;
+          return await removeMeta(driver, driverKey, properties);
+        },
+        watch: (cb) =>
+          watch(driver, driverKey, (newValue, oldValue) =>
+            cb(newValue ?? getFallback(), oldValue ?? getFallback()),
+          ),
+        migrate,
+      };
+    },
+  };
+  return storage;
+}
+
+function createDriver(storageArea: StorageArea): WxtStorageDriver {
+  const getStorageArea = () => {
+    if (browser.runtime == null) {
+      throw Error(
+        [
+          "'wxt/storage' must be loaded in a web extension environment",
+          '\n - If thrown during a build, see https://github.com/wxt-dev/wxt/issues/371',
+          " - If thrown during tests, mock 'wxt/browser' correctly. See https://wxt.dev/guide/go-further/testing.html\n",
+        ].join('\n'),
+      );
+    }
+    if (browser.storage == null) {
+      throw Error(
+        "You must add the 'storage' permission to your manifest to use 'wxt/storage'",
+      );
+    }
+
+    const area = browser.storage[storageArea];
+    if (area == null)
+      throw Error(`"browser.storage.${storageArea}" is undefined`);
+    return area;
+  };
+  const watchListeners = new Set<(changes: StorageAreaChanges) => void>();
+  return {
+    getItem: async (key) => {
+      const res = await getStorageArea().get(key);
+      return res[key];
+    },
+    getItems: async (keys) => {
+      const result = await getStorageArea().get(keys);
+      return keys.map((key) => ({ key, value: result[key] ?? null }));
+    },
+    setItem: async (key, value) => {
+      if (value == null) {
+        await getStorageArea().remove(key);
+      } else {
+        await getStorageArea().set({ [key]: value });
+      }
+    },
+    setItems: async (values) => {
+      const map = values.reduce<Record<string, unknown>>(
+        (map, { key, value }) => {
+          map[key] = value;
+          return map;
+        },
+        {},
+      );
+      await getStorageArea().set(map);
+    },
+    removeItem: async (key) => {
+      await getStorageArea().remove(key);
+    },
+    removeItems: async (keys) => {
+      await getStorageArea().remove(keys);
+    },
+    snapshot: async () => {
+      return await getStorageArea().get();
+    },
+    restoreSnapshot: async (data) => {
+      await getStorageArea().set(data);
+    },
+    watch(key, cb) {
+      const listener = (changes: StorageAreaChanges) => {
+        const change = changes[key];
+        if (change == null) return;
+        if (dequal(change.newValue, change.oldValue)) return;
+        cb(change.newValue ?? null, change.oldValue ?? null);
+      };
+      getStorageArea().onChanged.addListener(listener);
+      watchListeners.add(listener);
+      return () => {
+        getStorageArea().onChanged.removeListener(listener);
+        watchListeners.delete(listener);
+      };
+    },
+    unwatch() {
+      watchListeners.forEach((listener) => {
+        getStorageArea().onChanged.removeListener(listener);
+      });
+      watchListeners.clear();
+    },
+  };
+}
+
+export interface WxtStorage {
+  /**
+   * Get an item from storage, or return `null` if it doesn't exist.
+   *
+   * @example
+   * await storage.getItem<number>("local:installDate");
+   */
+  getItem<TValue>(
+    key: StorageItemKey,
+    opts: GetItemOptions<TValue> & { fallback: TValue },
+  ): Promise<TValue>;
+
+  getItem<TValue>(
+    key: StorageItemKey,
+    opts?: GetItemOptions<TValue>,
+  ): Promise<TValue | null>;
+
+  /**
+   * Get multiple items from storage. The return order is guaranteed to be the same as the order
+   * requested.
+   *
+   * @example
+   * await storage.getItems(["local:installDate", "session:someCounter"]);
+   */
+  getItems(
+    keys: Array<
+      | StorageItemKey
+      | WxtStorageItem<any, any>
+      | { key: StorageItemKey; options?: GetItemOptions<any> }
+    >,
+  ): Promise<Array<{ key: StorageItemKey; value: any }>>;
+  /**
+   * Return an object containing metadata about the key. Object is stored at `key + "$"`. If value
+   * is not an object, it returns an empty object.
+   *
+   * @example
+   * await storage.getMeta("local:installDate");
+   */
+  getMeta<T extends Record<string, unknown>>(key: StorageItemKey): Promise<T>;
+  /**
+   * Get the metadata of multiple storage items.
+   *
+   * @param items List of keys or items to get the metadata of.
+   * @returns An array containing storage keys and their metadata.
+   */
+  getMetas(
+    keys: Array<StorageItemKey | WxtStorageItem<any, any>>,
+  ): Promise<Array<{ key: StorageItemKey; meta: any }>>;
+  /**
+   * Set a value in storage. Setting a value to `null` or `undefined` is equivalent to calling
+   * `removeItem`.
+   *
+   * @example
+   * await storage.setItem<number>("local:installDate", Date.now());
+   */
+  setItem<T>(key: StorageItemKey, value: T | null): Promise<void>;
+  /**
+   * Set multiple values in storage. If a value is set to `null` or `undefined`, the key is removed.
+   *
+   * @example
+   * await storage.setItem([
+   *   { key: "local:installDate", value: Date.now() },
+   *   { key: "session:someCounter, value: 5 },
+   * ]);
+   */
+  setItems(
+    values: Array<
+      | { key: StorageItemKey; value: any }
+      | { item: WxtStorageItem<any, any>; value: any }
+    >,
+  ): Promise<void>;
+  /**
+   * Sets metadata properties. If some properties are already set, but are not included in the
+   * `properties` parameter, they will not be removed.
+   *
+   * @example
+   * await storage.setMeta("local:installDate", { appVersion });
+   */
+  setMeta<T extends Record<string, unknown>>(
+    key: StorageItemKey,
+    properties: T | null,
+  ): Promise<void>;
+  /**
+   * Set the metadata of multiple storage items.
+   *
+   * @param items List of storage keys or items and metadata to set for each.
+   */
+  setMetas(
+    metas: Array<
+      | { key: StorageItemKey; meta: Record<string, any> }
+      | { item: WxtStorageItem<any, any>; meta: Record<string, any> }
+    >,
+  ): Promise<void>;
+  /**
+   * Removes an item from storage.
+   *
+   * @example
+   * await storage.removeItem("local:installDate");
+   */
+  removeItem(key: StorageItemKey, opts?: RemoveItemOptions): Promise<void>;
+  /**
+   * Remove a list of keys from storage.
+   */
+  removeItems(
+    keys: Array<
+      | StorageItemKey
+      | WxtStorageItem<any, any>
+      | { key: StorageItemKey; options?: RemoveItemOptions }
+      | { item: WxtStorageItem<any, any>; options?: RemoveItemOptions }
+    >,
+  ): Promise<void>;
+  /**
+   * Remove the entire metadata for a key, or specific properties by name.
+   *
+   * @example
+   * // Remove all metadata properties from the item
+   * await storage.removeMeta("local:installDate");
+   *
+   * // Remove only specific the "v" field
+   * await storage.removeMeta("local:installDate", "v")
+   */
+  removeMeta(
+    key: StorageItemKey,
+    properties?: string | string[],
+  ): Promise<void>;
+  /**
+   * Return all the items in storage.
+   */
+  snapshot(
+    base: StorageArea,
+    opts?: SnapshotOptions,
+  ): Promise<Record<string, unknown>>;
+  /**
+   * Restores the results of `snapshot`. If new properties have been saved since the snapshot, they are
+   * not overridden. Only values existing in the snapshot are overridden.
+   */
+  restoreSnapshot(base: StorageArea, data: any): Promise<void>;
+  /**
+   * Watch for changes to a specific key in storage.
+   */
+  watch<T>(key: StorageItemKey, cb: WatchCallback<T | null>): Unwatch;
+  /**
+   * Remove all watch listeners.
+   */
+  unwatch(): void;
+
+  /**
+   * Define a storage item with a default value, type, or versioning.
+   *
+   * Read full docs: https://wxt.dev/guide/extension-apis/storage.html#defining-storage-items
+   */
+  defineItem<TValue, TMetadata extends Record<string, unknown> = {}>(
+    key: StorageItemKey,
+  ): WxtStorageItem<TValue | null, TMetadata>;
+  defineItem<TValue, TMetadata extends Record<string, unknown> = {}>(
+    key: StorageItemKey,
+    options: WxtStorageItemOptions<TValue>,
+  ): WxtStorageItem<TValue, TMetadata>;
+}
+
+interface WxtStorageDriver {
+  getItem<T>(key: string): Promise<T | null>;
+  getItems(keys: string[]): Promise<{ key: string; value: any }[]>;
+  setItem<T>(key: string, value: T | null): Promise<void>;
+  setItems(values: Array<{ key: string; value: any }>): Promise<void>;
+  removeItem(key: string): Promise<void>;
+  removeItems(keys: string[]): Promise<void>;
+  snapshot(): Promise<Record<string, unknown>>;
+  restoreSnapshot(data: Record<string, unknown>): Promise<void>;
+  watch<T>(key: string, cb: WatchCallback<T | null>): Unwatch;
+  unwatch(): void;
+}
+
+export interface WxtStorageItem<
+  TValue,
+  TMetadata extends Record<string, unknown>,
+> {
+  /**
+   * The storage key passed when creating the storage item.
+   */
+  key: StorageItemKey;
+  /**
+   * @deprecated Renamed to fallback, use it instead.
+   */
+  defaultValue: TValue;
+  /**
+   * The value provided by the `fallback` option.
+   */
+  fallback: TValue;
+  /**
+   * Get the latest value from storage.
+   */
+  getValue(): Promise<TValue>;
+  /**
+   * Get metadata.
+   */
+  getMeta(): Promise<NullablePartial<TMetadata>>;
+  /**
+   * Set the value in storage.
+   */
+  setValue(value: TValue): Promise<void>;
+  /**
+   * Set metadata properties.
+   */
+  setMeta(properties: NullablePartial<TMetadata>): Promise<void>;
+  /**
+   * Remove the value from storage.
+   */
+  removeValue(opts?: RemoveItemOptions): Promise<void>;
+  /**
+   * Remove all metadata or certain properties from metadata.
+   */
+  removeMeta(properties?: string[]): Promise<void>;
+  /**
+   * Listen for changes to the value in storage.
+   */
+  watch(cb: WatchCallback<TValue>): Unwatch;
+  /**
+   * If there are migrations defined on the storage item, migrate to the latest version.
+   *
+   * **This function is ran automatically whenever the extension updates**, so you don't have to call it
+   * manually.
+   */
+  migrate(): Promise<void>;
+}
+
+export type StorageArea = 'local' | 'session' | 'sync' | 'managed';
+export type StorageItemKey = `${StorageArea}:${string}`;
+
+export interface GetItemOptions<T> {
+  /**
+   * @deprecated Renamed to `fallback`, use it instead.
+   */
+  defaultValue?: T;
+  /**
+   * Default value returned when `getItem` would otherwise return `null`.
+   */
+  fallback?: T;
+}
+
+export interface RemoveItemOptions {
+  /**
+   * Optionally remove metadata when deleting a key.
+   *
+   * @default false
+   */
+  removeMeta?: boolean;
+}
+
+export interface SnapshotOptions {
+  /**
+   * Exclude a list of keys. The storage area prefix should be removed since the snapshot is for a
+   * specific storage area already.
+   */
+  excludeKeys?: string[];
+}
+
+export interface WxtStorageItemOptions<T> {
+  /**
+   * @deprecated Renamed to `fallback`, use it instead.
+   */
+  defaultValue?: T;
+  /**
+   * Default value returned when `getValue` would otherwise return `null`.
+   */
+  fallback?: T;
+  /**
+   * If passed, a value in storage will be initialized immediately after
+   * defining the storage item. This function returns the value that will be
+   * saved to storage during the initialization process if a value doesn't
+   * already exist.
+   */
+  init?: () => T | Promise<T>;
+  /**
+   * Provide a version number for the storage item to enable migrations. When changing the version
+   * in the future, migration functions will be ran on application startup.
+   */
+  version?: number;
+  /**
+   * A map of version numbers to the functions used to migrate the data to that version.
+   */
+  migrations?: Record<number, (oldValue: any) => any>;
+}
+
+export type StorageAreaChanges = {
+  [key: string]: chrome.storage.StorageChange;
+};
+
+/**
+ * Same as `Partial`, but includes `| null`. It makes all the properties of an object optional and
+ * nullable.
+ */
+type NullablePartial<T> = {
+  [key in keyof T]+?: T[key] | undefined | null;
+};
+/**
+ * Callback called when a value in storage is changed.
+ */
+export type WatchCallback<T> = (newValue: T, oldValue: T) => void;
+/**
+ * Call to remove a watch listener
+ */
+export type Unwatch = () => void;
+
+export class MigrationError extends Error {
+  constructor(
+    public key: string,
+    public version: number,
+    options?: ErrorOptions,
+  ) {
+    super(`v${version} migration failed for "${key}"`, options);
+  }
+}

packages/storage/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "verbatimModuleSyntax": true,
+    "types": ["chrome"]
+  },
+  "exclude": ["node_modules/**", "dist/**"]
+}

packages/storage/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineProject } from 'vitest/config';
+
+export default defineProject({
+  test: {
+    mockReset: true,
+    restoreMocks: true,
+    setupFiles: ['vitest.setup.ts'],
+  },
+});

packages/storage/vitest.setup.ts

@@ -0,0 +1,4 @@
+import { fakeBrowser } from '@webext-core/fake-browser';
+import { vi } from 'vitest';
+
+vi.stubGlobal('chrome', fakeBrowser);

packages/unocss/src/index.ts

@@ -28,7 +28,7 @@ export default defineWxtModule<UnoCSSOptions>({
     }
 
     wxt.hooks.hook('vite:devServer:extendConfig', (config) => {
-      config.plugins?.push(UnoCSS());
+      config.plugins?.push(UnoCSS(resolvedOptions.configOrPath));
     });
 
     wxt.hooks.hook('vite:build:extendConfig', async (entries, config) => {

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

@@ -14,12 +14,13 @@ export default defineBackground({
 
     console.log(useAppConfig());
 
-    // @ts-expect-error: should only accept entrypoints or public assets
     browser.runtime.getURL('/');
     browser.runtime.getURL('/background.js');
     browser.runtime.getURL('/icons/128.png');
     browser.runtime.getURL('/example.html#hash');
     browser.runtime.getURL('/example.html?query=param');
+    // @ts-expect-error: should only accept entrypoints or public assets
+    browser.runtime.getURL('/unknown');
     // @ts-expect-error: should only allow hashes/query params on HTML files
     browser.runtime.getURL('/icon-128.png?query=param');
 

packages/wxt-demo/wxt.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   },
   example: {
     a: 'a',
-    // @ts-expect-error: c is not defined, this should error out
+    // @ts-expect-error: c is not defined, this should be a type error, but it should show up in the module
     c: 'c',
   },
   unocss: {

packages/wxt/CHANGELOG.md

@@ -1,5 +1,84 @@
 # Changelog
 
+## v0.19.18
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.17...wxt-v0.19.18)
+
+### 🩹 Fixes
+
+- Correct `dev.reloadCommand` restriction to consider only commands with suggested keys ([#1226](https://github.com/wxt-dev/wxt/pull/1226))
+
+### 🌊 Types
+
+- Add overloads to `ContentScriptContext#addEventListener` for different targets ([#1245](https://github.com/wxt-dev/wxt/pull/1245))
+
+### 🏡 Chore
+
+- Refactor `findEntrypoints` to return all entrypoints with `skipped` set properly ([#1244](https://github.com/wxt-dev/wxt/pull/1244))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+- Jaguar Zhou ([@aiktb](http://github.com/aiktb))
+
+## v0.19.17
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.16...wxt-v0.19.17)
+
+### 🚀 Enhancements
+
+- New `server:created`, `server:started`, and `server:closed` hooks ([#1179](https://github.com/wxt-dev/wxt/pull/1179))
+
+### 🩹 Fixes
+
+- Re-initialize WXT modules correctly during development ([#1176](https://github.com/wxt-dev/wxt/pull/1176))
+- ESLint config being generated when ESLint is not installed. ([#1198](https://github.com/wxt-dev/wxt/pull/1198))
+- Update `vite` dependency range to support v6 ([#1215](https://github.com/wxt-dev/wxt/pull/1215))
+- Automatically convert MV3 `content_security_policy` to MV2 ([#1168](https://github.com/wxt-dev/wxt/pull/1168))
+- Correctly remove child elements with integrated UI remove ([#1219](https://github.com/wxt-dev/wxt/pull/1219))
+- Make content script `matches` optional ([#1220](https://github.com/wxt-dev/wxt/pull/1220))
+
+### 📖 Documentation
+
+- Fix analyze typo in type ([#1187](https://github.com/wxt-dev/wxt/pull/1187))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+- 1natsu ([@1natsu172](http://github.com/1natsu172))
+- Nishu ([@nishu-murmu](https://github.com/nishu-murmu))
+- Florian Metz ([@Timeraa](http://github.com/Timeraa))
+
+## v0.19.16
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.15...wxt-v0.19.16)
+
+### 🚀 Enhancements
+
+- **hooks:** Add new `config:resolved` hook ([#1177](https://github.com/wxt-dev/wxt/pull/1177))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+
+## v0.19.15
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.14...wxt-v0.19.15)
+
+### 🚀 Enhancements
+
+- Extract `wxt/storage` to its own package, `@wxt-dev/storage` ([#1129](https://github.com/wxt-dev/wxt/pull/1129))
+
+### 🩹 Fixes
+
+- Add "/" to `PublicPath` and `browser.runtime.getURL` ([#1171](https://github.com/wxt-dev/wxt/pull/1171))
+- Add extension ID to event used to invalidate `ContentScriptContext` ([#1175](https://github.com/wxt-dev/wxt/pull/1175))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+- Nishu ([@nishu-murmu](http://github.com/nishu-murmu))
+
 ## v0.19.14
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.13...wxt-v0.19.14)

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

@@ -152,6 +152,40 @@ describe('Auto Imports', () => {
       ).toMatchSnapshot();
     });
 
+    it('"enabled: false" should NOT output an ESlint config file', async () => {
+      const project = new TestProject();
+      project.addFile('entrypoints/popup.html', `<html></html>`);
+
+      await project.prepare({
+        imports: {
+          eslintrc: {
+            enabled: false,
+          },
+        },
+      });
+
+      expect(await project.fileExists('.wxt/eslint-auto-imports.mjs')).toBe(
+        false,
+      );
+      expect(await project.fileExists('.wxt/eslintrc-auto-import.json')).toBe(
+        false,
+      );
+    });
+
+    it('should NOT output an ESlint config file by default', async () => {
+      const project = new TestProject();
+      project.addFile('entrypoints/popup.html', `<html></html>`);
+
+      await project.prepare();
+
+      expect(await project.fileExists('.wxt/eslint-auto-imports.mjs')).toBe(
+        false,
+      );
+      expect(await project.fileExists('.wxt/eslintrc-auto-import.json')).toBe(
+        false,
+      );
+    });
+
     it('should allow customizing the output', async () => {
       const project = new TestProject();
       project.addFile('entrypoints/popup.html', `<html></html>`);

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

@@ -4,6 +4,7 @@ import { WxtHooks } from '../../src/types';
 
 const hooks: WxtHooks = {
   ready: vi.fn(),
+  'config:resolved': vi.fn(),
   'prepare:types': vi.fn(),
   'prepare:publicPaths': vi.fn(),
   'build:before': vi.fn(),
@@ -20,6 +21,9 @@ const hooks: WxtHooks = {
   'zip:sources:start': vi.fn(),
   'zip:sources:done': vi.fn(),
   'zip:done': vi.fn(),
+  'server:created': vi.fn(),
+  'server:started': vi.fn(),
+  'server:closed': vi.fn(),
 };
 
 function expectHooksToBeCalled(
@@ -49,6 +53,7 @@ describe('Hooks', () => {
 
     expectHooksToBeCalled({
       ready: true,
+      'config:resolved': true,
       'prepare:types': true,
       'prepare:publicPaths': true,
       'build:before': false,
@@ -65,6 +70,9 @@ describe('Hooks', () => {
       'zip:sources:start': false,
       'zip:sources:done': false,
       'zip:done': false,
+      'server:created': false,
+      'server:started': false,
+      'server:closed': false,
     });
   });
 
@@ -76,6 +84,7 @@ describe('Hooks', () => {
 
     expectHooksToBeCalled({
       ready: true,
+      'config:resolved': true,
       'prepare:types': true,
       'prepare:publicPaths': true,
       'build:before': true,
@@ -92,6 +101,9 @@ describe('Hooks', () => {
       'zip:sources:start': false,
       'zip:sources:done': false,
       'zip:done': false,
+      'server:created': false,
+      'server:started': false,
+      'server:closed': false,
     });
   });
 
@@ -103,6 +115,7 @@ describe('Hooks', () => {
 
     expectHooksToBeCalled({
       ready: true,
+      'config:resolved': true,
       'prepare:types': true,
       'prepare:publicPaths': true,
       'build:before': true,
@@ -119,6 +132,9 @@ describe('Hooks', () => {
       'zip:sources:start': false,
       'zip:sources:done': false,
       'zip:done': true,
+      'server:created': false,
+      'server:started': false,
+      'server:closed': false,
     });
   });
 
@@ -130,6 +146,7 @@ describe('Hooks', () => {
 
     expectHooksToBeCalled({
       ready: true,
+      'config:resolved': true,
       'prepare:types': true,
       'prepare:publicPaths': true,
       'build:before': true,
@@ -146,6 +163,9 @@ describe('Hooks', () => {
       'zip:sources:start': true,
       'zip:sources:done': true,
       'zip:done': true,
+      'server:created': false,
+      'server:started': false,
+      'server:closed': false,
     });
   });
 
@@ -159,10 +179,12 @@ describe('Hooks', () => {
         disabled: true,
       },
     });
+    expect(hooks['server:closed']).not.toBeCalled();
     await server.stop();
 
     expectHooksToBeCalled({
       ready: true,
+      'config:resolved': true,
       'prepare:types': true,
       'prepare:publicPaths': true,
       'build:before': true,
@@ -179,6 +201,9 @@ describe('Hooks', () => {
       'zip:sources:start': false,
       'zip:sources:done': false,
       'zip:done': false,
+      'server:created': 1,
+      'server:started': 1,
+      'server:closed': 1,
     });
   });
 });

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

@@ -6,7 +6,7 @@ import { normalizePath } from '../../src/core/utils/paths';
 
 describe('Module Helpers', () => {
   describe('options', () => {
-    it('should recieve the options defined in wxt.config.ts based on the configKey field', async () => {
+    it('should receive the options defined in wxt.config.ts based on the configKey field', async () => {
       const options = { key: '123' };
       const reportOptions = vi.fn();
       vi.stubGlobal('reportOptions', reportOptions);

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

@@ -48,6 +48,7 @@ describe('TypeScript Project', () => {
 
       declare module "wxt/browser" {
         export type PublicPath =
+          | "/"
           | "/options.html"
           | "/popup.html"
           | "/sandbox.html"

packages/wxt/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.19.14",
+  "version": "0.19.18",
   "description": "Next gen framework for developing web extensions",
   "repository": {
     "type": "git",
@@ -87,6 +87,7 @@
     "@webext-core/fake-browser": "^1.3.1",
     "@webext-core/isolated-element": "^1.1.2",
     "@webext-core/match-patterns": "^1.0.3",
+    "@wxt-dev/storage": "workspace:^1.0.0",
     "async-mutex": "^0.5.0",
     "c12": "^1.11.2",
     "cac": "^6.7.14",
@@ -94,13 +95,12 @@
     "ci-info": "^4.1.0",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
-    "dequal": "^2.0.3",
     "dotenv": "^16.4.5",
     "esbuild": "^0.21.5",
     "fast-glob": "^3.3.2",
     "filesize": "^10.1.6",
     "fs-extra": "^11.2.0",
-    "get-port": "^7.1.0",
+    "get-port-please": "^3.1.2",
     "giget": "^1.2.3",
     "hookable": "^5.5.3",
     "is-wsl": "^3.1.0",
@@ -122,7 +122,7 @@
     "publish-browser-extension": "^2.2.2",
     "scule": "^1.3.0",
     "unimport": "^3.13.1",
-    "vite": "^5.4.11",
+    "vite": "^5.0.0 || ^6.0.0",
     "vite-node": "^2.1.4",
     "web-ext-run": "^0.2.1",
     "webextension-polyfill": "^0.12.0"

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

@@ -15,7 +15,7 @@ describe('Module Utilities', () => {
 
       wxt.config.vite = () => Promise.resolve(userConfig);
       addViteConfig(wxt, () => moduleConfig);
-      await wxt.hooks.callHook('ready', wxt);
+      await wxt.hooks.callHook('config:resolved', wxt);
       const actual = await wxt.config.vite(wxt.config.env);
 
       expect(actual).toEqual(expected);
@@ -31,7 +31,7 @@ describe('Module Utilities', () => {
 
       wxt.config.vite = () => userConfig;
       addViteConfig(wxt, () => moduleConfig);
-      await wxt.hooks.callHook('ready', wxt);
+      await wxt.hooks.callHook('config:resolved', wxt);
       const actual = await wxt.config.vite(wxt.config.env);
 
       expect(actual).toEqual(expected);
@@ -44,7 +44,7 @@ describe('Module Utilities', () => {
       const wxt = fakeWxt({ hooks: createHooks() });
 
       addImportPreset(wxt, preset);
-      await wxt.hooks.callHook('ready', wxt);
+      await wxt.hooks.callHook('config:resolved', wxt);
 
       expect(wxt.config.imports && wxt.config.imports.presets).toContain(
         preset,
@@ -63,7 +63,7 @@ describe('Module Utilities', () => {
       });
 
       addImportPreset(wxt, preset);
-      await wxt.hooks.callHook('ready', wxt);
+      await wxt.hooks.callHook('config:resolved', wxt);
 
       expect(wxt.config.imports && wxt.config.imports.presets).toHaveLength(2);
     });
@@ -78,7 +78,7 @@ describe('Module Utilities', () => {
       });
 
       addImportPreset(wxt, preset);
-      await wxt.hooks.callHook('ready', wxt);
+      await wxt.hooks.callHook('config:resolved', wxt);
 
       expect(wxt.config.imports).toBe(false);
     });

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

@@ -18,7 +18,7 @@ export default defineWxtModule({
     let unimport: Unimport;
 
     // Add user module imports to config
-    wxt.hooks.hook('ready', () => {
+    wxt.hooks.hook('config:resolved', () => {
       const addModuleImports = (module: WxtModule<any>) => {
         if (!module.imports) return;
 
@@ -30,10 +30,10 @@ export default defineWxtModule({
       wxt.config.userModules.forEach(addModuleImports);
     });
 
-    // Create unimport instance AFTER "ready" so any modifications to the
-    // config inside "ready" are applied.
+    // Create unimport instance AFTER "config:resolved" so any modifications to the
+    // config inside "config:resolved" are applied.
     wxt.hooks.afterEach((event) => {
-      if (event.name === 'ready') {
+      if (event.name === 'config:resolved') {
         unimport = createUnimport(options);
       }
     });

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

@@ -3,7 +3,15 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { ContentScriptContext } from '..';
 import { fakeBrowser } from '@webext-core/fake-browser';
-import { sleep } from '../../../core/utils/time';
+
+/**
+ * When dispatching events on document/window/etc, they are fired on the next
+ * tick of the event loop. So waiting a timeout of 0 will ensure they've been
+ * fired.
+ */
+function waitForEventsToFire() {
+  return new Promise((res) => setTimeout(res));
+}
 
 describe('Content Script Context', () => {
   beforeEach(() => {
@@ -31,11 +39,11 @@ describe('Content Script Context', () => {
     ctx.onInvalidated(onInvalidated);
 
     // Wait for events to run before next tick next tick
-    await sleep(0);
+    await waitForEventsToFire();
 
     // Create a new context after first is initialized, and wait for it to initialize
     new ContentScriptContext(name);
-    await sleep(0);
+    await waitForEventsToFire();
 
     expect(onInvalidated).toBeCalled();
     expect(ctx.isValid).toBe(false);
@@ -47,13 +55,35 @@ describe('Content Script Context', () => {
     ctx.onInvalidated(onInvalidated);
 
     // Wait for events to run before next tick next tick
-    await sleep(0);
+    await waitForEventsToFire();
 
     // Create a new context after first is initialized, and wait for it to initialize
     new ContentScriptContext('test2');
-    await sleep(0);
+    await waitForEventsToFire();
 
     expect(onInvalidated).not.toBeCalled();
     expect(ctx.isValid).toBe(true);
   });
+
+  describe('addEventListener', () => {
+    const context = new ContentScriptContext('test');
+    it('should infer types correctly for the window target', () => {
+      context.addEventListener(window, 'DOMContentLoaded', (_) => {});
+      context.addEventListener(window, 'orientationchange', (_) => {});
+      context.addEventListener(window, 'wxt:locationchange', (_) => {});
+      // @ts-expect-error
+      context.addEventListener(window, 'visibilitychange', (_) => {});
+    });
+
+    it('should infer types correctly for the document target', () => {
+      context.addEventListener(document, 'visibilitychange', (_) => {});
+      context.addEventListener(document, 'readystatechange', (_) => {});
+    });
+
+    it('should infer types correctly for HTML element targets', () => {
+      const button = document.createElement('button');
+      context.addEventListener(button, 'click', (_) => {});
+      context.addEventListener(button, 'mouseover', (_) => {});
+    });
+  });
 });

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

@@ -35,7 +35,9 @@ import { createLocationWatcher } from './location-watcher';
  * ```
  */
 export class ContentScriptContext implements AbortController {
-  private static SCRIPT_STARTED_MESSAGE_TYPE = 'wxt:content-script-started';
+  private static SCRIPT_STARTED_MESSAGE_TYPE = getUniqueEventName(
+    'wxt:content-script-started',
+  );
 
   private isTopFrame = window.self === window.top;
   private abortController: AbortController;
@@ -173,19 +175,32 @@ export class ContentScriptContext implements AbortController {
    * ctx.addEventListener(document, "visibilitychange", () => {
    *   // ...
    * });
-   * ctx.addEventListener(document, "wxt:locationchange", () => {
+   * ctx.addEventListener(window, "wxt:locationchange", () => {
    *   // ...
    * });
    */
-  addEventListener<
-    TTarget extends EventTarget,
-    TType extends keyof WxtContentScriptEventMap,
-  >(
-    target: TTarget,
+  addEventListener<TType extends keyof WxtWindowEventMap>(
+    target: Window,
     type: TType,
-    handler: (event: WxtContentScriptEventMap[TType]) => void,
+    handler: (event: WxtWindowEventMap[TType]) => void,
     options?: AddEventListenerOptions,
-  ) {
+  ): void;
+  addEventListener<TType extends keyof DocumentEventMap>(
+    target: Document,
+    type: keyof DocumentEventMap,
+    handler: (event: DocumentEventMap[TType]) => void,
+    options?: AddEventListenerOptions,
+  ): void;
+  addEventListener<TTarget extends EventTarget>(
+    target: TTarget,
+    ...params: Parameters<TTarget['addEventListener']>
+  ): void;
+  addEventListener(
+    target: EventTarget,
+    type: string,
+    handler: (event: Event) => void,
+    options?: AddEventListenerOptions,
+  ): void {
     if (type === 'wxt:locationchange') {
       // Start the location watcher when adding the event for the first time
       if (this.isValid) this.locationWatcher.run();
@@ -193,7 +208,6 @@ export class ContentScriptContext implements AbortController {
 
     target.addEventListener?.(
       type.startsWith('wxt:') ? getUniqueEventName(type) : type,
-      // @ts-expect-error: Event don't match, but that's OK, EventTarget doesn't allow custom types in the callback
       handler,
       {
         ...options,
@@ -245,6 +259,6 @@ export class ContentScriptContext implements AbortController {
   }
 }
 
-interface WxtContentScriptEventMap extends WindowEventMap {
+export interface WxtWindowEventMap extends WindowEventMap {
   'wxt:locationchange': WxtLocationChangeEvent;
 }

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

@@ -34,6 +34,7 @@ export function createIntegratedUi<TMounted>(
   };
   const remove = () => {
     options.onRemove?.(mounted);
+    wrapper.replaceChildren();
     wrapper.remove();
     mounted = undefined;
   };

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

@@ -28,7 +28,7 @@ import { installSourcemapsSupport } from 'vite-node/source-map';
 export async function createViteBuilder(
   wxtConfig: ResolvedConfig,
   hooks: Hookable<WxtHooks>,
-  server?: WxtDevServer,
+  getWxtDevServer?: () => WxtDevServer | undefined,
 ): Promise<WxtBuilder> {
   const vite = await import('vite');
 
@@ -65,6 +65,8 @@ export async function createViteBuilder(
       ignored: [`${wxtConfig.outBaseDir}/**`, `${wxtConfig.wxtDir}/**`],
     };
 
+    const server = getWxtDevServer?.();
+
     config.plugins ??= [];
     config.plugins.push(
       wxtPlugins.download(wxtConfig),
@@ -193,7 +195,7 @@ export async function createViteBuilder(
   };
 
   /**
-   * Return the basic config for building a sinlge CSS entrypoint in [multi-page mode](https://vitejs.dev/guide/build.html#multi-page-app).
+   * Return the basic config for building a single CSS entrypoint in [multi-page mode](https://vitejs.dev/guide/build.html#multi-page-app).
    */
   const getCssConfig = (entrypoint: Entrypoint): vite.InlineConfig => {
     return {

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

@@ -21,7 +21,7 @@ import { createExtensionRunner } from './runners';
 import { Mutex } from 'async-mutex';
 import pc from 'picocolors';
 import { relative } from 'node:path';
-import { registerWxt, wxt } from './wxt';
+import { deinitWxtModules, initWxtModules, registerWxt, wxt } from './wxt';
 import { unnormalizePath } from './utils/paths';
 import {
   getContentScriptJs,
@@ -40,64 +40,108 @@ import {
 export async function createServer(
   inlineConfig?: InlineConfig,
 ): Promise<WxtDevServer> {
-  await registerWxt('serve', inlineConfig, async (config) => {
-    const { port, hostname } = config.dev.server!;
-    const serverInfo: ServerInfo = {
+  await registerWxt('serve', inlineConfig);
+
+  wxt.server = await createServerInternal();
+  await wxt.hooks.callHook('server:created', wxt, wxt.server);
+  return wxt.server;
+}
+
+async function createServerInternal(): Promise<WxtDevServer> {
+  const getServerInfo = (): ServerInfo => {
+    const { port, hostname } = wxt.config.dev.server!;
+    return {
       port,
       hostname,
       origin: `http://${hostname}:${port}`,
     };
+  };
 
-    // Server instance must be created first so its reference can be added to the internal config used
-    // to pre-render entrypoints
-    const server: WxtDevServer = {
-      ...serverInfo,
-      get watcher() {
-        return builderServer.watcher;
-      },
-      get ws() {
-        return builderServer.ws;
-      },
-      currentOutput: undefined,
-      async start() {
-        await builderServer.listen();
-        wxt.logger.success(`Started dev server @ ${serverInfo.origin}`);
-        await buildAndOpenBrowser();
-      },
-      async stop() {
-        await runner.closeBrowser();
-        await builderServer.close();
-      },
-      async restart() {
-        await closeAndRecreateRunner();
-        await buildAndOpenBrowser();
-      },
-      transformHtml(url, html, originalUrl) {
-        return builderServer.transformHtml(url, html, originalUrl);
-      },
-      reloadContentScript(payload) {
-        server.ws.send('wxt:reload-content-script', payload);
-      },
-      reloadPage(path) {
-        server.ws.send('wxt:reload-page', path);
-      },
-      reloadExtension() {
-        server.ws.send('wxt:reload-extension');
-      },
-      async restartBrowser() {
-        await closeAndRecreateRunner();
-        await runner.openBrowser();
-      },
-    };
-    return server;
-  });
-
-  const server = wxt.server!;
   let [runner, builderServer] = await Promise.all([
     createExtensionRunner(),
-    wxt.builder.createServer(server),
+    wxt.builder.createServer(getServerInfo()),
   ]);
 
+  // Used to track if modules need to be re-initialized
+  let wasStopped = false;
+
+  // Server instance must be created first so its reference can be added to the internal config used
+  // to pre-render entrypoints
+  const server: WxtDevServer = {
+    get hostname() {
+      return getServerInfo().hostname;
+    },
+    get port() {
+      return getServerInfo().port;
+    },
+    get origin() {
+      return getServerInfo().origin;
+    },
+    get watcher() {
+      return builderServer.watcher;
+    },
+    get ws() {
+      return builderServer.ws;
+    },
+    currentOutput: undefined,
+    async start() {
+      if (wasStopped) {
+        await wxt.reloadConfig();
+        runner = await createExtensionRunner();
+        builderServer = await wxt.builder.createServer(getServerInfo());
+        await initWxtModules();
+      }
+
+      await builderServer.listen();
+      wxt.logger.success(`Started dev server @ ${server.origin}`);
+      await wxt.hooks.callHook('server:started', wxt, server);
+
+      await buildAndOpenBrowser();
+
+      // Register content scripts for the first time after the background starts up since they're not
+      // listed in the manifest
+      server.ws.on('wxt:background-initialized', () => {
+        if (server.currentOutput == null) return;
+        reloadContentScripts(server.currentOutput.steps, server);
+      });
+
+      // Listen for file changes and reload different parts of the extension accordingly
+      const reloadOnChange = createFileReloader(server);
+      server.watcher.on('all', reloadOnChange);
+    },
+    async stop() {
+      wasStopped = true;
+      await runner.closeBrowser();
+      await builderServer.close();
+      await wxt.hooks.callHook('server:closed', wxt, server);
+
+      deinitWxtModules();
+      server.currentOutput = undefined;
+    },
+    async restart() {
+      await server.stop();
+      await server.start();
+    },
+    transformHtml(url, html, originalUrl) {
+      return builderServer.transformHtml(url, html, originalUrl);
+    },
+    reloadContentScript(payload) {
+      server.ws.send('wxt:reload-content-script', payload);
+    },
+    reloadPage(path) {
+      server.ws.send('wxt:reload-page', path);
+    },
+    reloadExtension() {
+      server.ws.send('wxt:reload-extension');
+    },
+    async restartBrowser() {
+      await runner.closeBrowser();
+      await wxt.reloadConfig();
+      runner = await createExtensionRunner();
+      await runner.openBrowser();
+    },
+  };
+
   const buildAndOpenBrowser = async () => {
     // Build after starting the dev server so it can be used to transform HTML files
     server.currentOutput = await internalBuild();
@@ -114,26 +158,6 @@ export async function createServer(
     await runner.openBrowser();
   };
 
-  /**
-   * Stops the previous runner, grabs the latest config, and recreates the runner.
-   */
-  const closeAndRecreateRunner = async () => {
-    await runner.closeBrowser();
-    await wxt.reloadConfig();
-    runner = await createExtensionRunner();
-  };
-
-  // Register content scripts for the first time after the background starts up since they're not
-  // listed in the manifest
-  server.ws.on('wxt:background-initialized', () => {
-    if (server.currentOutput == null) return;
-    reloadContentScripts(server.currentOutput.steps, server);
-  });
-
-  // Listen for file changes and reload different parts of the extension accordingly
-  const reloadOnChange = createFileReloader(server);
-  server.watcher.on('all', reloadOnChange);
-
   return server;
 }
 

packages/wxt/src/core/generate-wxt-dir.ts

@@ -78,6 +78,7 @@ async function getPathsDeclarationEntry(
         isHtmlEntrypoint(entry) ? '.html' : '.js',
       ),
     )
+    .concat([''])
     .concat(await getPublicFiles());
 
   await wxt.hooks.callHook('prepare:publicPaths', wxt, paths);
@@ -176,7 +177,7 @@ declare module "wxt/browser" {
         message.message,
       ),
     ),
-    // Include a final union-based override so TS accepts valid string templates or concatinations
+    // Include a final union-based override so TS accepts valid string templates or concatenations
     // ie: browser.i18n.getMessage(`some_enum_${enumValue}`)
     renderGetMessageOverload(
       messages.map((message) => `"${message.name}"`).join(' | '),

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

@@ -27,6 +27,7 @@ import { builtinModules } from '../builtin-modules';
 import { getEslintVersion } from './utils/eslint';
 import { safeStringToNumber } from './utils/number';
 import { loadEnv } from './utils/env';
+import { getPort } from 'get-port-please';
 
 /**
  * Given an inline config, discover the config file if necessary, merge the results, resolve any
@@ -137,14 +138,19 @@ export async function resolveConfig(
 
   let devServerConfig: ResolvedConfig['dev']['server'];
   if (command === 'serve') {
+    const hostname = mergedConfig.dev?.server?.hostname ?? 'localhost';
     let port = mergedConfig.dev?.server?.port;
     if (port == null || !isFinite(port)) {
-      const { default: getPort, portNumbers } = await import('get-port');
-      port = await getPort({ port: portNumbers(3000, 3010) });
+      port = await getPort({
+        port: 3000,
+        portRange: [3001, 3010],
+        // Passing host required for Mac, unsure of Windows/Linux
+        host: hostname,
+      });
     }
     devServerConfig = {
       port,
-      hostname: mergedConfig.dev?.server?.hostname ?? 'localhost',
+      hostname,
       watchDebounce: safeStringToNumber(process.env.WXT_WATCH_DEBOUNCE) ?? 800,
     };
   }
@@ -386,10 +392,11 @@ async function getUnimportEslintOptions(
     case 'auto':
       const version = await getEslintVersion();
       let major = parseInt(version[0]);
+      if (isNaN(major)) eslintEnabled = false;
       if (major <= 8) eslintEnabled = 8;
       else if (major >= 9) eslintEnabled = 9;
       // NaN
-      else eslintEnabled = 8;
+      else eslintEnabled = false;
       break;
     case true:
       eslintEnabled = 8;

packages/wxt/src/core/utils/__tests__/manifest.test.ts

@@ -1581,6 +1581,41 @@ describe('Manifest Utils', () => {
           permissions: ['tabs', 'scripting'],
         });
       });
+
+      it('should convert MV3 CSP object to MV2 CSP string with localhost for MV2', async () => {
+        const entrypoints: Entrypoint[] = [];
+        const buildOutput = fakeBuildOutput();
+        const inputCsp =
+          "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';";
+        const expectedCsp =
+          "script-src 'self' 'wasm-unsafe-eval' http://localhost:3000; object-src 'self';";
+
+        // Setup WXT for Firefox and serve command
+        setFakeWxt({
+          config: {
+            browser: 'firefox',
+            command: 'serve',
+            manifestVersion: 2,
+            manifest: {
+              content_security_policy: {
+                extension_pages: inputCsp,
+              },
+            },
+          },
+          server: fakeWxtDevServer({
+            port: 3000,
+            hostname: 'localhost',
+            origin: 'http://localhost:3000',
+          }),
+        });
+
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+        );
+
+        expect(actual.content_security_policy).toEqual(expectedCsp);
+      });
     });
   });
 

packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts

@@ -71,6 +71,33 @@ describe('Detect Dev Changes', () => {
     });
   });
 
+  describe('modules/*', () => {
+    it("should return 'full-restart' when one of the changed files is in the WXT modules folder", () => {
+      const modulesDir = '/root/modules';
+      setFakeWxt({
+        config: {
+          modulesDir,
+        },
+      });
+      const changes = [
+        '/root/src/public/image.svg',
+        `${modulesDir}/example.ts`,
+      ];
+      const currentOutput: BuildOutput = {
+        manifest: fakeManifest(),
+        publicAssets: [],
+        steps: [],
+      };
+      const expected: DevModeChange = {
+        type: 'full-restart',
+      };
+
+      const actual = detectDevChanges(changes, currentOutput);
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
   describe('web-ext.config.ts', () => {
     it("should return 'browser-restart' when one of the changed files is the config file", () => {
       const runnerFile = '/root/web-ext.config.ts';

packages/wxt/src/core/utils/building/__tests__/find-entrypoints.test.ts

@@ -701,7 +701,7 @@ describe('findEntrypoints', () => {
   });
 
   describe('include option', () => {
-    it("should filter out the background when include doesn't contain the target browser", async () => {
+    it("should mark the background as skipped when include doesn't contain the target browser", async () => {
       globMock.mockResolvedValueOnce(['background.ts']);
       importEntrypointMock.mockResolvedValue({
         include: ['not' + config.browser],
@@ -709,10 +709,15 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'background',
+          skipped: true,
+        }),
+      ]);
     });
 
-    it("should filter out content scripts when include doesn't contain the target browser", async () => {
+    it("should mark content scripts as skipped when include doesn't contain the target browser", async () => {
       globMock.mockResolvedValueOnce(['example.content.ts']);
       importEntrypointMock.mockResolvedValue({
         include: ['not' + config.browser],
@@ -720,10 +725,15 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'example',
+          skipped: true,
+        }),
+      ]);
     });
 
-    it("should filter out the popup when include doesn't contain the target browser", async () => {
+    it("should mark the popup as skipped when include doesn't contain the target browser", async () => {
       globMock.mockResolvedValueOnce(['popup.html']);
       readFileMock.mockResolvedValueOnce(
         `<html>
@@ -737,10 +747,15 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'popup',
+          skipped: true,
+        }),
+      ]);
     });
 
-    it("should filter out the options page when include doesn't contain the target browser", async () => {
+    it("should mark the options page as skipped when include doesn't contain the target browser", async () => {
       globMock.mockResolvedValueOnce(['options.html']);
       readFileMock.mockResolvedValueOnce(
         `<html>
@@ -754,10 +769,15 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'options',
+          skipped: true,
+        }),
+      ]);
     });
 
-    it("should filter out an unlisted page when include doesn't contain the target browser", async () => {
+    it("should mark unlisted pages as skipped when include doesn't contain the target browser", async () => {
       globMock.mockResolvedValueOnce(['unlisted.html']);
       readFileMock.mockResolvedValueOnce(
         `<html>
@@ -771,12 +791,17 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'unlisted',
+          skipped: true,
+        }),
+      ]);
     });
   });
 
   describe('exclude option', () => {
-    it('should filter out the background when exclude contains the target browser', async () => {
+    it('should mark the background as skipped when exclude contains the target browser', async () => {
       globMock.mockResolvedValueOnce(['background.ts']);
       importEntrypointMock.mockResolvedValue({
         exclude: [config.browser],
@@ -784,10 +809,15 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'background',
+          skipped: true,
+        }),
+      ]);
     });
 
-    it('should filter out content scripts when exclude contains the target browser', async () => {
+    it('should mark content scripts as skipped when exclude contains the target browser', async () => {
       globMock.mockResolvedValueOnce(['example.content.ts']);
       importEntrypointMock.mockResolvedValue({
         exclude: [config.browser],
@@ -795,10 +825,15 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'example',
+          skipped: true,
+        }),
+      ]);
     });
 
-    it('should filter out the popup when exclude contains the target browser', async () => {
+    it('should mark the popup as skipped when exclude contains the target browser', async () => {
       globMock.mockResolvedValueOnce(['popup.html']);
       readFileMock.mockResolvedValueOnce(
         `<html>
@@ -810,10 +845,15 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'popup',
+          skipped: true,
+        }),
+      ]);
     });
 
-    it('should filter out the options page when exclude contains the target browser', async () => {
+    it('should mark the options page as skipped when exclude contains the target browser', async () => {
       globMock.mockResolvedValueOnce(['options.html']);
       readFileMock.mockResolvedValueOnce(
         `<html>
@@ -825,10 +865,15 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'options',
+          skipped: true,
+        }),
+      ]);
     });
 
-    it('should filter out an unlisted page when exclude contains the target browser', async () => {
+    it('should mark unlisted pages as skipped when exclude contains the target browser', async () => {
       globMock.mockResolvedValueOnce(['unlisted.html']);
       readFileMock.mockResolvedValueOnce(
         `<html>
@@ -840,12 +885,17 @@ describe('findEntrypoints', () => {
 
       const entrypoints = await findEntrypoints();
 
-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'unlisted',
+          skipped: true,
+        }),
+      ]);
     });
   });
 
   describe('filterEntrypoints option', () => {
-    it('should control entrypoints accessible', async () => {
+    it('should override include/exclude of individual entrypoint options', async () => {
       globMock.mockResolvedValue([
         'options/index.html',
         'popup/index.html',
@@ -867,9 +917,25 @@ describe('findEntrypoints', () => {
       importEntrypointMock.mockResolvedValue({});
 
       const entrypoints = await findEntrypoints();
-      const names = entrypoints.map((item) => item.name);
-      expect(names).toHaveLength(2);
-      expect(names).toEqual(filterEntrypoints);
+
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'injected',
+          skipped: true,
+        }),
+        expect.objectContaining({
+          name: 'options',
+          skipped: true,
+        }),
+        expect.objectContaining({
+          name: 'popup',
+          skipped: false,
+        }),
+        expect.objectContaining({
+          name: 'ui',
+          skipped: false,
+        }),
+      ]);
     });
   });
 });

packages/wxt/src/core/utils/building/__tests__/group-entrypoints.test.ts

@@ -152,12 +152,16 @@ describe('groupEntrypoints', () => {
       options: {
         type: 'module',
       },
+      skipped: false,
+    });
+    const popup = fakePopupEntrypoint({
+      skipped: false,
     });
-    const popup = fakePopupEntrypoint();
     const sandbox = fakeGenericEntrypoint({
       inputPath: '/entrypoints/sandbox.html',
       name: 'sandbox',
       type: 'sandbox',
+      skipped: false,
     });
 
     const actual = groupEntrypoints([background, popup, sandbox]);
@@ -165,6 +169,22 @@ describe('groupEntrypoints', () => {
     expect(actual).toEqual([[background, popup], [sandbox]]);
   });
 
+  it('should exclude skipped entrypoints from the groups to build', () => {
+    const background = fakeBackgroundEntrypoint({
+      options: {
+        type: 'module',
+      },
+      skipped: false,
+    });
+    const popup = fakePopupEntrypoint({
+      skipped: true,
+    });
+
+    const actual = groupEntrypoints([background, popup]);
+
+    expect(actual).toEqual([[background]]);
+  });
+
   it.todo(
     'should group ESM compatible sandbox scripts with sandbox pages',
     () => {

packages/wxt/src/core/utils/building/detect-dev-changes.ts

@@ -26,7 +26,11 @@ import { wxt } from '../../wxt';
  *   - Background script is changed
  *   - Manifest is different
  * - Restart browser
- *   - Config file changed (wxt.config.ts, .env, web-ext.config.ts, etc)
+ *   - web-ext.config.ts (runner config changes)
+ * - Full dev server restart
+ *   - wxt.config.ts (main config file)
+ *   - modules/* (any file related to WXT modules)
+ *   - .env (environment variable changed could effect build)
  */
 export function detectDevChanges(
   changedFiles: string[],
@@ -38,6 +42,11 @@ export function detectDevChanges(
   );
   if (isConfigChange) return { type: 'full-restart' };
 
+  const isWxtModuleChange = some(changedFiles, (file) =>
+    file.startsWith(wxt.config.modulesDir),
+  );
+  if (isWxtModuleChange) return { type: 'full-restart' };
+
   const isRunnerChange = some(
     changedFiles,
     (file) => file === wxt.config.runnerConfig.configFile,

packages/wxt/src/core/utils/building/find-entrypoints.ts

@@ -65,14 +65,7 @@ export async function findEntrypoints(): Promise<Entrypoint[]> {
     );
     if (matchingGlob) {
       const type = PATH_GLOB_TO_TYPE_MAP[matchingGlob];
-      results.push({
-        name,
-        inputPath,
-        type,
-        skipped:
-          wxt.config.filterEntrypoints != null &&
-          !wxt.config.filterEntrypoints.has(name),
-      });
+      results.push({ name, inputPath, type });
     }
     return results;
   }, []);
@@ -84,7 +77,7 @@ export async function findEntrypoints(): Promise<Entrypoint[]> {
   // Import entrypoints to get their config
   let hasBackground = false;
   const env = createExtensionEnvironment();
-  const entrypoints: Entrypoint[] = await env.run(() =>
+  const entrypointsWithoutSkipped: Entrypoint[] = await env.run(() =>
     Promise.all(
       entrypointInfos.map(async (info): Promise<Entrypoint> => {
         const { type } = info;
@@ -130,61 +123,44 @@ export async function findEntrypoints(): Promise<Entrypoint[]> {
   );
 
   if (wxt.config.command === 'serve' && !hasBackground) {
-    entrypoints.push(
+    entrypointsWithoutSkipped.push(
       await getBackgroundEntrypoint({
         inputPath: VIRTUAL_NOOP_BACKGROUND_MODULE_ID,
         name: 'background',
         type: 'background',
-        skipped: false,
       }),
     );
   }
 
+  // Mark entrypoints as skipped or not
+  const entrypoints = entrypointsWithoutSkipped.map((entry) => ({
+    ...entry,
+    skipped: isEntrypointSkipped(entry),
+  }));
+
   wxt.logger.debug('All entrypoints:', entrypoints);
-  const skippedEntrypointNames = entrypointInfos
+  const skippedEntrypointNames = entrypoints
     .filter((item) => item.skipped)
     .map((item) => item.name);
   if (skippedEntrypointNames.length) {
     wxt.logger.warn(
-      `Filter excluded the following entrypoints:\n${skippedEntrypointNames
-        .map((item) => `${pc.dim('-')} ${pc.cyan(item)}`)
-        .join('\n')}`,
+      [
+        'The following entrypoints have been skipped:',
+        ...skippedEntrypointNames.map(
+          (item) => `${pc.dim('-')} ${pc.cyan(item)}`,
+        ),
+      ].join('\n'),
     );
   }
-  const targetEntrypoints = entrypoints.filter((entry) => {
-    const { include, exclude } = entry.options;
-    if (include?.length && exclude?.length) {
-      wxt.logger.warn(
-        `The ${entry.name} entrypoint lists both include and exclude, but only one can be used per entrypoint. Entrypoint ignored.`,
-      );
-      return false;
-    }
-    if (exclude?.length && !include?.length) {
-      return !exclude.includes(wxt.config.browser);
-    }
-    if (include?.length && !exclude?.length) {
-      return include.includes(wxt.config.browser);
-    }
-    if (skippedEntrypointNames.includes(entry.name)) {
-      return false;
-    }
+  await wxt.hooks.callHook('entrypoints:resolved', wxt, entrypoints);
 
-    return true;
-  });
-  wxt.logger.debug(`${wxt.config.browser} entrypoints:`, targetEntrypoints);
-  await wxt.hooks.callHook('entrypoints:resolved', wxt, targetEntrypoints);
-
-  return targetEntrypoints;
+  return entrypoints;
 }
 
 interface EntrypointInfo {
   name: string;
   inputPath: string;
   type: Entrypoint['type'];
-  /**
-   * @default false
-   */
-  skipped: boolean;
 }
 
 function preventDuplicateEntrypointNames(files: EntrypointInfo[]) {
@@ -252,7 +228,6 @@ async function getPopupEntrypoint(
     options: resolvePerBrowserOptions(options, wxt.config.browser),
     inputPath: info.inputPath,
     outputDir: wxt.config.outDir,
-    skipped: info.skipped,
   };
 }
 
@@ -275,7 +250,6 @@ async function getOptionsEntrypoint(
     options: resolvePerBrowserOptions(options, wxt.config.browser),
     inputPath: info.inputPath,
     outputDir: wxt.config.outDir,
-    skipped: info.skipped,
   };
 }
 
@@ -293,14 +267,12 @@ async function getUnlistedPageEntrypoint(
     inputPath: info.inputPath,
     outputDir: wxt.config.outDir,
     options,
-    skipped: info.skipped,
   };
 }
 
 async function getUnlistedScriptEntrypoint({
   inputPath,
   name,
-  skipped,
 }: EntrypointInfo): Promise<GenericEntrypoint> {
   const defaultExport =
     await wxt.builder.importEntrypoint<UnlistedScriptDefinition>(inputPath);
@@ -316,14 +288,12 @@ async function getUnlistedScriptEntrypoint({
     inputPath,
     outputDir: wxt.config.outDir,
     options: resolvePerBrowserOptions(options, wxt.config.browser),
-    skipped,
   };
 }
 
 async function getBackgroundEntrypoint({
   inputPath,
   name,
-  skipped,
 }: EntrypointInfo): Promise<BackgroundEntrypoint> {
   let options: Omit<BackgroundDefinition, 'main'> = {};
   if (inputPath !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
@@ -348,14 +318,12 @@ async function getBackgroundEntrypoint({
     inputPath,
     outputDir: wxt.config.outDir,
     options: resolvePerBrowserOptions(options, wxt.config.browser),
-    skipped,
   };
 }
 
 async function getContentScriptEntrypoint({
   inputPath,
   name,
-  skipped,
 }: EntrypointInfo): Promise<ContentScriptEntrypoint> {
   const defaultExport =
     await wxt.builder.importEntrypoint<ContentScriptDefinition>(inputPath);
@@ -377,7 +345,6 @@ async function getContentScriptEntrypoint({
     inputPath,
     outputDir: resolve(wxt.config.outDir, CONTENT_SCRIPT_OUT_DIR),
     options: resolvePerBrowserOptions(options, wxt.config.browser),
-    skipped,
   };
 }
 
@@ -409,7 +376,6 @@ async function getSidepanelEntrypoint(
     options: resolvePerBrowserOptions(options, wxt.config.browser),
     inputPath: info.inputPath,
     outputDir: wxt.config.outDir,
-    skipped: info.skipped,
   };
 }
 
@@ -457,6 +423,29 @@ async function getHtmlEntrypointOptions<T extends BaseEntrypointOptions>(
   return options;
 }
 
+function isEntrypointSkipped(entry: Omit<Entrypoint, 'skipped'>): boolean {
+  if (wxt.config.filterEntrypoints != null) {
+    return !wxt.config.filterEntrypoints.has(entry.name);
+  }
+
+  const { include, exclude } = entry.options;
+  if (include?.length && exclude?.length) {
+    wxt.logger.warn(
+      `The ${entry.name} entrypoint lists both include and exclude, but only one can be used per entrypoint. Entrypoint skipped.`,
+    );
+    return true;
+  }
+
+  if (exclude?.length && !include?.length) {
+    return exclude.includes(wxt.config.browser);
+  }
+  if (include?.length && !exclude?.length) {
+    return !include.includes(wxt.config.browser);
+  }
+
+  return false;
+}
+
 const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type']> = {
   'sandbox.html': 'sandbox',
   'sandbox/index.html': 'sandbox',

packages/wxt/src/core/utils/building/group-entrypoints.ts

@@ -1,8 +1,8 @@
 import { Entrypoint, EntrypointGroup } from '../../../types';
 
 /**
- * Entrypoints can be build in groups. HTML pages can all be built together in a single step, while
- * content scripts must be build individually.
+ * Entrypoints are built in groups. HTML pages can all be built together in a single step,
+ * content scripts must be build individually, etc.
  *
  * This function returns the entrypoints put into these types of groups.
  */
@@ -11,6 +11,8 @@ export function groupEntrypoints(entrypoints: Entrypoint[]): EntrypointGroup[] {
   const groups: EntrypointGroup[] = [];
 
   for (const entry of entrypoints) {
+    if (entry.skipped) continue;
+
     let group = ENTRY_TYPE_TO_GROUP_MAP[entry.type];
     if (entry.type === 'background' && entry.options.type === 'module') {
       group = 'esm';

packages/wxt/src/core/utils/content-scripts.ts

@@ -51,7 +51,7 @@ export function mapWxtOptionsToContentScript(
   css: string[] | undefined,
 ): Manifest.ContentScript {
   return {
-    matches: options.matches,
+    matches: options.matches ?? [],
     all_frames: options.allFrames,
     match_about_blank: options.matchAboutBlank,
     exclude_globs: options.excludeGlobs,

packages/wxt/src/core/utils/manifest.ts

@@ -82,9 +82,16 @@ export async function generateManifest(
 
   // Add reload command in dev mode
   if (wxt.config.command === 'serve' && wxt.config.dev.reloadCommand) {
-    if (manifest.commands && Object.keys(manifest.commands).length >= 4) {
+    if (
+      manifest.commands &&
+      // If the following limit is exceeded, Chrome will fail to load the extension.
+      // Error: "Too many commands specified for 'commands': The maximum is 4."
+      Object.values(manifest.commands).filter(
+        (command) => command.suggested_key,
+      ).length >= 4
+    ) {
       warnings.push([
-        "Extension already has 4 registered commands, WXT's reload command is disabled",
+        "Extension already has 4 registered commands with suggested keys, WXT's reload command is disabled",
       ]);
     } else {
       manifest.commands ??= {};
@@ -117,11 +124,12 @@ export async function generateManifest(
   if (wxt.config.manifestVersion === 2) {
     convertWebAccessibleResourcesToMv2(manifest);
     convertActionToMv2(manifest);
+    convertCspToMv2(manifest);
     moveHostPermissionsToPermissions(manifest);
   }
 
   if (wxt.config.manifestVersion === 3) {
-    validateMv3WebAccessbileResources(manifest);
+    validateMv3WebAccessibleResources(manifest);
   }
 
   stripKeys(manifest);
@@ -143,7 +151,7 @@ export async function generateManifest(
 }
 
 /**
- * Removes suffixes from the version, like X.Y.Z-alpha1 (which brosers don't allow), so it's a
+ * Removes suffixes from the version, like X.Y.Z-alpha1 (which browsers don't allow), so it's a
  * simple version number, like X or X.Y or X.Y.Z, which browsers allow.
  */
 function simplifyVersion(versionName: string): string {
@@ -362,7 +370,7 @@ function addEntrypoints(
     // at runtime
     if (wxt.config.command === 'serve' && wxt.config.manifestVersion === 3) {
       contentScripts.forEach((script) => {
-        script.options.matches.forEach((matchPattern) => {
+        script.options.matches?.forEach((matchPattern) => {
           addHostPermission(manifest, matchPattern);
         });
       });
@@ -405,7 +413,7 @@ function addEntrypoints(
         );
       }
       runtimeContentScripts.forEach((script) => {
-        script.options.matches.forEach((matchPattern) => {
+        script.options.matches?.forEach((matchPattern) => {
           addHostPermission(manifest, matchPattern);
         });
       });
@@ -467,34 +475,28 @@ function addDevModeCsp(manifest: Manifest.WebExtensionManifest): void {
   }
 
   const extensionPagesCsp = new ContentSecurityPolicy(
-    manifest.manifest_version === 3
-      ? // @ts-expect-error: extension_pages is not typed
-        (manifest.content_security_policy?.extension_pages ??
-        "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';") // default extension_pages CSP for MV3
-      : (manifest.content_security_policy ??
-        "script-src 'self'; object-src 'self';"), // default CSP for MV2
+    // @ts-expect-error: extension_pages exists, we convert MV2 CSPs to this earlier in the process
+    manifest.content_security_policy?.extension_pages ??
+      (manifest.manifest_version === 3
+        ? DEFAULT_MV3_EXTENSION_PAGES_CSP
+        : DEFAULT_MV2_CSP),
   );
   const sandboxCsp = new ContentSecurityPolicy(
     // @ts-expect-error: sandbox is not typed
-    manifest.content_security_policy?.sandbox ??
-      "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';", // default sandbox CSP for MV3
+    manifest.content_security_policy?.sandbox ?? DEFAULT_MV3_SANDBOX_CSP,
   );
 
-  if (wxt.server) {
+  if (wxt.config.command === 'serve') {
     extensionPagesCsp.add('script-src', allowedCsp);
     sandboxCsp.add('script-src', allowedCsp);
   }
 
-  if (manifest.manifest_version === 3) {
-    manifest.content_security_policy ??= {};
-    // @ts-expect-error: extension_pages is not typed
-    manifest.content_security_policy.extension_pages =
-      extensionPagesCsp.toString();
-    // @ts-expect-error: sandbox is not typed
-    manifest.content_security_policy.sandbox = sandboxCsp.toString();
-  } else {
-    manifest.content_security_policy = extensionPagesCsp.toString();
-  }
+  manifest.content_security_policy ??= {};
+  // @ts-expect-error: extension_pages is not typed
+  manifest.content_security_policy.extension_pages =
+    extensionPagesCsp.toString();
+  // @ts-expect-error: sandbox is not typed
+  manifest.content_security_policy.sandbox = sandboxCsp.toString();
 }
 
 function addDevModePermissions(manifest: Manifest.WebExtensionManifest) {
@@ -552,7 +554,7 @@ export function getContentScriptCssWebAccessibleResources(
 
     resources.push({
       resources: [cssFile],
-      matches: script.options.matches.map((matchPattern) =>
+      matches: script.options.matches?.map((matchPattern) =>
         stripPathFromMatchPattern(matchPattern),
       ),
     });
@@ -613,7 +615,7 @@ export function stripPathFromMatchPattern(pattern: string) {
 /**
  * Converts all MV3 web accessible resources to their MV2 forms. MV3 web accessible resources are
  * generated in this file, and may be defined by the user in their manifest. In both cases, when
- * targetting MV2, automatically convert their definitions down to the basic MV2 array.
+ * targeting MV2, automatically convert their definitions down to the basic MV2 array.
  */
 export function convertWebAccessibleResourcesToMv2(
   manifest: Manifest.WebExtensionManifest,
@@ -652,10 +654,21 @@ function convertActionToMv2(manifest: Manifest.WebExtensionManifest): void {
   manifest.browser_action = manifest.action;
 }
 
+function convertCspToMv2(manifest: Manifest.WebExtensionManifest): void {
+  if (
+    typeof manifest.content_security_policy === 'string' ||
+    manifest.content_security_policy?.extension_pages == null
+  )
+    return;
+
+  manifest.content_security_policy =
+    manifest.content_security_policy.extension_pages;
+}
+
 /**
  * Make sure all resources are in MV3 format. If not, add a wanring
  */
-export function validateMv3WebAccessbileResources(
+export function validateMv3WebAccessibleResources(
   manifest: Manifest.WebExtensionManifest,
 ): void {
   if (manifest.web_accessible_resources == null) return;
@@ -718,3 +731,9 @@ const mv3OnlyKeys = [
   'side_panel',
 ];
 const firefoxMv3OnlyKeys = ['host_permissions'];
+
+const DEFAULT_MV3_EXTENSION_PAGES_CSP =
+  "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';";
+const DEFAULT_MV3_SANDBOX_CSP =
+  "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';";
+const DEFAULT_MV2_CSP = "script-src 'self'; object-src 'self';";

packages/wxt/src/core/utils/testing/fake-objects.ts

@@ -4,7 +4,7 @@
 import { resolve } from 'path';
 import { faker } from '@faker-js/faker';
 import merge from 'lodash.merge';
-import { Commands, type Manifest } from 'wxt/browser';
+import type { Manifest } from 'wxt/browser';
 import {
   FsCache,
   ResolvedConfig,
@@ -355,13 +355,18 @@ export const fakeBuildStepOutput = fakeObjectCreator<BuildStepOutput>(() => ({
   entrypoints: fakeArray(fakeEntrypoint),
 }));
 
-export const fakeManifestCommand = fakeObjectCreator<Commands.Command>(() => ({
-  description: faker.string.sample(),
-  shortcut: `${faker.helpers.arrayElement(['ctrl', 'alt'])}+${faker.number.int({
-    min: 0,
-    max: 9,
-  })}`,
-}));
+export const fakeManifestCommand =
+  fakeObjectCreator<Manifest.WebExtensionManifestCommandsType>(() => ({
+    description: faker.string.sample(),
+    suggested_key: {
+      default: `${faker.helpers.arrayElement(['ctrl', 'alt'])}+${faker.number.int(
+        {
+          min: 0,
+          max: 9,
+        },
+      )}`,
+    },
+  }));
 
 export const fakeDevServer = fakeObjectCreator<WxtDevServer>(() => ({
   hostname: 'localhost',

packages/wxt/src/core/wxt.ts

@@ -1,12 +1,4 @@
-import {
-  InlineConfig,
-  ResolvedConfig,
-  Wxt,
-  WxtCommand,
-  WxtDevServer,
-  WxtHooks,
-  WxtModule,
-} from '../types';
+import { InlineConfig, Wxt, WxtCommand, WxtHooks, WxtModule } from '../types';
 import { resolveConfig } from './resolve-config';
 import { createHooks } from 'hookable';
 import { createWxtPackageManager } from './package-managers';
@@ -26,7 +18,6 @@ export let wxt: Wxt;
 export async function registerWxt(
   command: WxtCommand,
   inlineConfig: InlineConfig = {},
-  getServer?: (config: ResolvedConfig) => Promise<WxtDevServer>,
 ): Promise<void> {
   // Default NODE_ENV environment variable before other packages, like vite, do it
   // See https://github.com/wxt-dev/wxt/issues/873#issuecomment-2254555523
@@ -34,8 +25,7 @@ export async function registerWxt(
 
   const hooks = createHooks<WxtHooks>();
   const config = await resolveConfig(inlineConfig, command);
-  const server = await getServer?.(config);
-  const builder = await createViteBuilder(config, hooks, server);
+  const builder = await createViteBuilder(config, hooks, () => wxt.server);
   const pm = await createWxtPackageManager(config.root);
 
   wxt = {
@@ -47,30 +37,29 @@ export async function registerWxt(
     },
     async reloadConfig() {
       wxt.config = await resolveConfig(inlineConfig, command);
+      await wxt.hooks.callHook('config:resolved', wxt);
     },
     pm,
     builder,
-    server,
+    server: undefined,
   };
 
-  // Initialize modules
-  const initModule = async (module: WxtModule<any>) => {
-    if (module.hooks) wxt.hooks.addHooks(module.hooks);
-    await module.setup?.(
-      wxt,
-      // @ts-expect-error: Untyped configKey field
-      module.configKey ? config[module.configKey] : undefined,
-    );
-  };
-  for (const builtinModule of builtinModules) await initModule(builtinModule);
-  for (const userModule of config.userModules) await initModule(userModule);
+  await initWxtModules();
+}
+
+export async function initWxtModules() {
+  // Call setup function and add hooks
+  for (const mod of builtinModules) await initWxtModule(mod);
+  for (const mod of wxt.config.userModules) await initWxtModule(mod);
 
   // Initialize hooks
-  wxt.hooks.addHooks(config.hooks);
+  wxt.hooks.addHooks(wxt.config.hooks);
+
+  // Print order for debugging
   if (wxt.config.debug) {
     const order = [
       ...builtinModules.map((module) => module.name),
-      ...config.userModules.map((module) =>
+      ...wxt.config.userModules.map((module) =>
         relative(wxt.config.root, module.id),
       ),
       'wxt.config.ts > hooks',
@@ -82,6 +71,23 @@ export async function registerWxt(
   }
 
   await wxt.hooks.callHook('ready', wxt);
+  await wxt.hooks.callHook('config:resolved', wxt);
+}
+
+async function initWxtModule(module: WxtModule<any>): Promise<void> {
+  if (module.hooks) wxt.hooks.addHooks(module.hooks);
+  await module.setup?.(
+    wxt,
+    // @ts-expect-error: Untyped configKey field
+    module.configKey ? wxt.config[module.configKey] : undefined,
+  );
+}
+
+/**
+ * Unloads WXT modules.
+ */
+export function deinitWxtModules(): void {
+  wxt.hooks.removeAllHooks();
 }
 
 /**

packages/wxt/src/modules.ts

@@ -28,7 +28,7 @@ export function defineWxtModule<TOptions extends WxtModuleOptions>(
 /**
  * Adds a TS/JS file as an entrypoint to the project. This file will be bundled
  * along with the other entrypoints.
-
+ *
  * If you're publishing the module to NPM, you should probably pre-build the
  * entrypoint and use `addPublicAssets` instead to copy pre-bundled assets into
  * the output directory. This will speed up project builds since it just has to
@@ -53,7 +53,7 @@ export function defineWxtModule<TOptions extends WxtModuleOptions>(
  * });
  */
 export function addEntrypoint(wxt: Wxt, entrypoint: Entrypoint): void {
-  wxt.hooks.hook('entrypoints:resolved', (wxt, entrypoints) => {
+  wxt.hooks.hook('entrypoints:resolved', (_, entrypoints) => {
     entrypoints.push(entrypoint);
   });
 }
@@ -106,7 +106,7 @@ export function addViteConfig(
   wxt: Wxt,
   viteConfig: (env: vite.ConfigEnv) => vite.UserConfig | undefined,
 ): void {
-  wxt.hooks.hook('ready', (wxt) => {
+  wxt.hooks.hook('config:resolved', (wxt) => {
     const userVite = wxt.config.vite;
     wxt.config.vite = async (env) => {
       const fromUser = await userVite(env);
@@ -130,7 +130,7 @@ export function addViteConfig(
  * });
  */
 export function addWxtPlugin(wxt: Wxt, plugin: string): void {
-  wxt.hooks.hook('ready', (wxt) => {
+  wxt.hooks.hook('config:resolved', (wxt) => {
     wxt.config.plugins.push(plugin);
   });
 }
@@ -166,7 +166,7 @@ export function addImportPreset(
   wxt: Wxt,
   preset: UnimportOptions['presets'][0],
 ): void {
-  wxt.hooks.hook('ready', (wxt) => {
+  wxt.hooks.hook('config:resolved', (wxt) => {
     if (!wxt.config.imports) return;
 
     wxt.config.imports.presets ??= [];
@@ -205,12 +205,13 @@ export function addImportPreset(
  * });
  */
 export function addAlias(wxt: Wxt, alias: string, path: string) {
-  wxt.hooks.hook('ready', (wxt) => {
+  wxt.hooks.hook('config:resolved', (wxt) => {
     const target = resolve(wxt.config.root, path);
-    if (wxt.config.alias[alias] != null) {
+    if (wxt.config.alias[alias] != null && wxt.config.alias[alias] !== target) {
       wxt.logger.warn(
         `Skipped adding alias (${alias} => ${target}) because an alias with the same name already exists: ${alias} => ${wxt.config.alias[alias]}`,
       );
+      return;
     }
     wxt.config.alias[alias] = target;
   });

packages/wxt/src/storage.ts

@@ -1,869 +1,4 @@
 /**
- * Simplified storage APIs with support for versioned fields, snapshots, metadata, and item definitions.
- *
- * See [the guide](https://wxt.dev/guide/extension-apis/storage.html) for more information.
- *
- * @module wxt/storage
+ * @module @wxt-dev/storage
  */
-import { Storage, browser } from 'wxt/browser';
-import { dequal } from 'dequal/lite';
-import { logger } from './sandbox/utils/logger';
-import { toArray } from './core/utils/arrays';
-import { Mutex } from 'async-mutex';
-
-export const storage = createStorage();
-
-function createStorage(): WxtStorage {
-  const drivers: Record<StorageArea, WxtStorageDriver> = {
-    local: createDriver('local'),
-    session: createDriver('session'),
-    sync: createDriver('sync'),
-    managed: createDriver('managed'),
-  };
-  const getDriver = (area: StorageArea) => {
-    const driver = drivers[area];
-    if (driver == null) {
-      const areaNames = Object.keys(drivers).join(', ');
-      throw Error(`Invalid area "${area}". Options: ${areaNames}`);
-    }
-    return driver;
-  };
-  const resolveKey = (key: StorageItemKey) => {
-    const deliminatorIndex = key.indexOf(':');
-    const driverArea = key.substring(0, deliminatorIndex) as StorageArea;
-    const driverKey = key.substring(deliminatorIndex + 1);
-    if (driverKey == null)
-      throw Error(
-        `Storage key should be in the form of "area:key", but received "${key}"`,
-      );
-
-    return {
-      driverArea,
-      driverKey,
-      driver: getDriver(driverArea),
-    };
-  };
-  const getMetaKey = (key: string) => key + '$';
-  const mergeMeta = (oldMeta: any, newMeta: any): any => {
-    const newFields = { ...oldMeta };
-    Object.entries(newMeta).forEach(([key, value]) => {
-      if (value == null) delete newFields[key];
-      else newFields[key] = value;
-    });
-    return newFields;
-  };
-  const getValueOrFallback = (value: any, fallback: any) =>
-    value ?? fallback ?? null;
-  const getMetaValue = (properties: any) =>
-    typeof properties === 'object' && !Array.isArray(properties)
-      ? properties
-      : {};
-
-  const getItem = async (
-    driver: WxtStorageDriver,
-    driverKey: string,
-    opts: GetItemOptions<any> | undefined,
-  ) => {
-    const res = await driver.getItem<any>(driverKey);
-    return getValueOrFallback(res, opts?.fallback ?? opts?.defaultValue);
-  };
-  const getMeta = async (driver: WxtStorageDriver, driverKey: string) => {
-    const metaKey = getMetaKey(driverKey);
-    const res = await driver.getItem<any>(metaKey);
-    return getMetaValue(res);
-  };
-  const setItem = async (
-    driver: WxtStorageDriver,
-    driverKey: string,
-    value: any,
-  ) => {
-    await driver.setItem(driverKey, value ?? null);
-  };
-  const setMeta = async (
-    driver: WxtStorageDriver,
-    driverKey: string,
-    properties: any | undefined,
-  ) => {
-    const metaKey = getMetaKey(driverKey);
-    const existingFields = getMetaValue(await driver.getItem(metaKey));
-    await driver.setItem(metaKey, mergeMeta(existingFields, properties));
-  };
-  const removeItem = async (
-    driver: WxtStorageDriver,
-    driverKey: string,
-    opts: RemoveItemOptions | undefined,
-  ) => {
-    await driver.removeItem(driverKey);
-    if (opts?.removeMeta) {
-      const metaKey = getMetaKey(driverKey);
-      await driver.removeItem(metaKey);
-    }
-  };
-  const removeMeta = async (
-    driver: WxtStorageDriver,
-    driverKey: string,
-    properties: string | string[] | undefined,
-  ) => {
-    const metaKey = getMetaKey(driverKey);
-    if (properties == null) {
-      await driver.removeItem(metaKey);
-    } else {
-      const newFields = getMetaValue(await driver.getItem(metaKey));
-      toArray(properties).forEach((field) => delete newFields[field]);
-      await driver.setItem(metaKey, newFields);
-    }
-  };
-  const watch = (
-    driver: WxtStorageDriver,
-    driverKey: string,
-    cb: WatchCallback<any>,
-  ) => {
-    return driver.watch(driverKey, cb);
-  };
-
-  const storage: WxtStorage = {
-    getItem: async (key, opts) => {
-      const { driver, driverKey } = resolveKey(key);
-      return await getItem(driver, driverKey, opts);
-    },
-    getItems: async (keys) => {
-      const areaToKeyMap = new Map<StorageArea, string[]>();
-      const keyToOptsMap = new Map<string, GetItemOptions<any> | undefined>();
-      const orderedKeys: StorageItemKey[] = [];
-
-      keys.forEach((key) => {
-        let keyStr: StorageItemKey;
-        let opts: GetItemOptions<any> | undefined;
-        if (typeof key === 'string') {
-          // key: string
-          keyStr = key;
-        } else if ('getValue' in key) {
-          // key: WxtStorageItem
-          keyStr = key.key;
-          opts = { fallback: key.fallback };
-        } else {
-          // key: { key, options }
-          keyStr = key.key;
-          opts = key.options;
-        }
-        orderedKeys.push(keyStr);
-        const { driverArea, driverKey } = resolveKey(keyStr);
-        const areaKeys = areaToKeyMap.get(driverArea) ?? [];
-        areaToKeyMap.set(driverArea, areaKeys.concat(driverKey));
-        keyToOptsMap.set(keyStr, opts);
-      });
-
-      const resultsMap = new Map<StorageItemKey, any>();
-      await Promise.all(
-        Array.from(areaToKeyMap.entries()).map(async ([driverArea, keys]) => {
-          const driverResults = await drivers[driverArea].getItems(keys);
-          driverResults.forEach((driverResult) => {
-            const key = `${driverArea}:${driverResult.key}` as StorageItemKey;
-            const opts = keyToOptsMap.get(key);
-            const value = getValueOrFallback(
-              driverResult.value,
-              opts?.fallback ?? opts?.defaultValue,
-            );
-            resultsMap.set(key, value);
-          });
-        }),
-      );
-
-      return orderedKeys.map((key) => ({
-        key,
-        value: resultsMap.get(key),
-      }));
-    },
-    getMeta: async (key) => {
-      const { driver, driverKey } = resolveKey(key);
-      return await getMeta(driver, driverKey);
-    },
-    getMetas: async (args) => {
-      const keys = args.map((arg) => {
-        const key = typeof arg === 'string' ? arg : arg.key;
-        const { driverArea, driverKey } = resolveKey(key);
-        return {
-          key,
-          driverArea,
-          driverKey,
-          driverMetaKey: getMetaKey(driverKey),
-        };
-      });
-      const areaToDriverMetaKeysMap = keys.reduce<
-        Partial<Record<StorageArea, (typeof keys)[number][]>>
-      >((map, key) => {
-        map[key.driverArea] ??= [];
-        map[key.driverArea]!.push(key);
-        return map;
-      }, {});
-
-      const resultsMap: Record<string, any> = {};
-      await Promise.all(
-        Object.entries(areaToDriverMetaKeysMap).map(async ([area, keys]) => {
-          const areaRes = await browser.storage[area as StorageArea].get(
-            keys.map((key) => key.driverMetaKey),
-          );
-          keys.forEach((key) => {
-            resultsMap[key.key] = areaRes[key.driverMetaKey] ?? {};
-          });
-        }),
-      );
-
-      return keys.map((key) => ({
-        key: key.key,
-        meta: resultsMap[key.key],
-      }));
-    },
-    setItem: async (key, value) => {
-      const { driver, driverKey } = resolveKey(key);
-      await setItem(driver, driverKey, value);
-    },
-    setItems: async (items) => {
-      const areaToKeyValueMap: Partial<
-        Record<StorageArea, Array<{ key: string; value: any }>>
-      > = {};
-      items.forEach((item) => {
-        const { driverArea, driverKey } = resolveKey(
-          'key' in item ? item.key : item.item.key,
-        );
-        areaToKeyValueMap[driverArea] ??= [];
-        areaToKeyValueMap[driverArea].push({
-          key: driverKey,
-          value: item.value,
-        });
-      });
-      await Promise.all(
-        Object.entries(areaToKeyValueMap).map(async ([driverArea, values]) => {
-          const driver = getDriver(driverArea as StorageArea);
-          await driver.setItems(values);
-        }),
-      );
-    },
-    setMeta: async (key, properties) => {
-      const { driver, driverKey } = resolveKey(key);
-      await setMeta(driver, driverKey, properties);
-    },
-    setMetas: async (items) => {
-      const areaToMetaUpdatesMap: Partial<
-        Record<StorageArea, { key: string; properties: any }[]>
-      > = {};
-      items.forEach((item) => {
-        const { driverArea, driverKey } = resolveKey(
-          'key' in item ? item.key : item.item.key,
-        );
-        areaToMetaUpdatesMap[driverArea] ??= [];
-        areaToMetaUpdatesMap[driverArea].push({
-          key: driverKey,
-          properties: item.meta,
-        });
-      });
-
-      await Promise.all(
-        Object.entries(areaToMetaUpdatesMap).map(
-          async ([storageArea, updates]) => {
-            const driver = getDriver(storageArea as StorageArea);
-            const metaKeys = updates.map(({ key }) => getMetaKey(key));
-            console.log(storageArea, metaKeys);
-            const existingMetas = await driver.getItems(metaKeys);
-            const existingMetaMap = Object.fromEntries(
-              existingMetas.map(({ key, value }) => [key, getMetaValue(value)]),
-            );
-
-            const metaUpdates = updates.map(({ key, properties }) => {
-              const metaKey = getMetaKey(key);
-              return {
-                key: metaKey,
-                value: mergeMeta(existingMetaMap[metaKey] ?? {}, properties),
-              };
-            });
-
-            await driver.setItems(metaUpdates);
-          },
-        ),
-      );
-    },
-    removeItem: async (key, opts) => {
-      const { driver, driverKey } = resolveKey(key);
-      await removeItem(driver, driverKey, opts);
-    },
-    removeItems: async (keys) => {
-      const areaToKeysMap: Partial<Record<StorageArea, string[]>> = {};
-
-      keys.forEach((key) => {
-        let keyStr: StorageItemKey;
-        let opts: RemoveItemOptions | undefined;
-        if (typeof key === 'string') {
-          // key: string
-          keyStr = key;
-        } else if ('getValue' in key) {
-          // key: WxtStorageItem
-          keyStr = key.key;
-        } else if ('item' in key) {
-          // key: { item, options }
-          keyStr = key.item.key;
-          opts = key.options;
-        } else {
-          // key: { key, options }
-          keyStr = key.key;
-          opts = key.options;
-        }
-        const { driverArea, driverKey } = resolveKey(keyStr);
-        areaToKeysMap[driverArea] ??= [];
-        areaToKeysMap[driverArea].push(driverKey);
-        if (opts?.removeMeta) {
-          areaToKeysMap[driverArea].push(getMetaKey(driverKey));
-        }
-      });
-
-      await Promise.all(
-        Object.entries(areaToKeysMap).map(async ([driverArea, keys]) => {
-          const driver = getDriver(driverArea as StorageArea);
-          await driver.removeItems(keys);
-        }),
-      );
-    },
-    removeMeta: async (key, properties) => {
-      const { driver, driverKey } = resolveKey(key);
-      await removeMeta(driver, driverKey, properties);
-    },
-    snapshot: async (base, opts) => {
-      const driver = getDriver(base);
-      const data = await driver.snapshot();
-      opts?.excludeKeys?.forEach((key) => {
-        delete data[key];
-        delete data[getMetaKey(key)];
-      });
-      return data;
-    },
-    restoreSnapshot: async (base, data) => {
-      const driver = getDriver(base);
-      await driver.restoreSnapshot(data);
-    },
-    watch: (key, cb) => {
-      const { driver, driverKey } = resolveKey(key);
-      return watch(driver, driverKey, cb);
-    },
-    unwatch() {
-      Object.values(drivers).forEach((driver) => {
-        driver.unwatch();
-      });
-    },
-    defineItem: (key, opts?: WxtStorageItemOptions<any>) => {
-      const { driver, driverKey } = resolveKey(key);
-
-      const { version: targetVersion = 1, migrations = {} } = opts ?? {};
-      if (targetVersion < 1) {
-        throw Error(
-          'Storage item version cannot be less than 1. Initial versions should be set to 1, not 0.',
-        );
-      }
-      const migrate = async () => {
-        const driverMetaKey = getMetaKey(driverKey);
-        const [{ value }, { value: meta }] = await driver.getItems([
-          driverKey,
-          driverMetaKey,
-        ]);
-        if (value == null) return;
-
-        const currentVersion = meta?.v ?? 1;
-        if (currentVersion > targetVersion) {
-          throw Error(
-            `Version downgrade detected (v${currentVersion} -> v${targetVersion}) for "${key}"`,
-          );
-        }
-
-        logger.debug(
-          `Running storage migration for ${key}: v${currentVersion} -> v${targetVersion}`,
-        );
-        const migrationsToRun = Array.from(
-          { length: targetVersion - currentVersion },
-          (_, i) => currentVersion + i + 1,
-        );
-        let migratedValue = value;
-        for (const migrateToVersion of migrationsToRun) {
-          try {
-            migratedValue =
-              (await migrations?.[migrateToVersion]?.(migratedValue)) ??
-              migratedValue;
-          } catch (err) {
-            throw Error(`v${migrateToVersion} migration failed for "${key}"`, {
-              cause: err,
-            });
-          }
-        }
-        await driver.setItems([
-          { key: driverKey, value: migratedValue },
-          { key: driverMetaKey, value: { ...meta, v: targetVersion } },
-        ]);
-        logger.debug(
-          `Storage migration completed for ${key} v${targetVersion}`,
-          { migratedValue },
-        );
-      };
-      const migrationsDone =
-        opts?.migrations == null
-          ? Promise.resolve()
-          : migrate().catch((err) => {
-              logger.error(`Migration failed for ${key}`, err);
-            });
-
-      const initMutex = new Mutex();
-
-      const getFallback = () => opts?.fallback ?? opts?.defaultValue ?? null;
-
-      const getOrInitValue = () =>
-        initMutex.runExclusive(async () => {
-          const value = await driver.getItem<any>(driverKey);
-          // Don't init value if it already exists or the init function isn't provided
-          if (value != null || opts?.init == null) return value;
-
-          const newValue = await opts.init();
-          await driver.setItem<any>(driverKey, newValue);
-          return newValue;
-        });
-
-      // Initialize the value once migrations have finished
-      migrationsDone.then(getOrInitValue);
-
-      return {
-        key,
-        get defaultValue() {
-          return getFallback();
-        },
-        get fallback() {
-          return getFallback();
-        },
-        getValue: async () => {
-          await migrationsDone;
-          if (opts?.init) {
-            return await getOrInitValue();
-          } else {
-            return await getItem(driver, driverKey, opts);
-          }
-        },
-        getMeta: async () => {
-          await migrationsDone;
-          return await getMeta(driver, driverKey);
-        },
-        setValue: async (value) => {
-          await migrationsDone;
-          return await setItem(driver, driverKey, value);
-        },
-        setMeta: async (properties) => {
-          await migrationsDone;
-          return await setMeta(driver, driverKey, properties);
-        },
-        removeValue: async (opts) => {
-          await migrationsDone;
-          return await removeItem(driver, driverKey, opts);
-        },
-        removeMeta: async (properties) => {
-          await migrationsDone;
-          return await removeMeta(driver, driverKey, properties);
-        },
-        watch: (cb) =>
-          watch(driver, driverKey, (newValue, oldValue) =>
-            cb(newValue ?? getFallback(), oldValue ?? getFallback()),
-          ),
-        migrate,
-      };
-    },
-  };
-  return storage;
-}
-
-function createDriver(storageArea: StorageArea): WxtStorageDriver {
-  const getStorageArea = () => {
-    if (browser.runtime == null) {
-      throw Error(
-        [
-          "'wxt/storage' must be loaded in a web extension environment",
-          '\n - If thrown during a build, see https://github.com/wxt-dev/wxt/issues/371',
-          " - If thrown during tests, mock 'wxt/browser' correctly. See https://wxt.dev/guide/go-further/testing.html\n",
-        ].join('\n'),
-      );
-    }
-    if (browser.storage == null) {
-      throw Error(
-        "You must add the 'storage' permission to your manifest to use 'wxt/storage'",
-      );
-    }
-
-    const area = browser.storage[storageArea];
-    if (area == null)
-      throw Error(`"browser.storage.${storageArea}" is undefined`);
-    return area;
-  };
-  const watchListeners = new Set<
-    (changes: Storage.StorageAreaOnChangedChangesType) => void
-  >();
-  return {
-    getItem: async (key) => {
-      const res = await getStorageArea().get(key);
-      return res[key] as any;
-    },
-    getItems: async (keys) => {
-      const result = await getStorageArea().get(keys);
-      return keys.map((key) => ({ key, value: result[key] ?? null }));
-    },
-    setItem: async (key, value) => {
-      if (value == null) {
-        await getStorageArea().remove(key);
-      } else {
-        await getStorageArea().set({ [key]: value });
-      }
-    },
-    setItems: async (values) => {
-      const map = values.reduce<Record<string, unknown>>(
-        (map, { key, value }) => {
-          map[key] = value;
-          return map;
-        },
-        {},
-      );
-      await getStorageArea().set(map);
-    },
-    removeItem: async (key) => {
-      await getStorageArea().remove(key);
-    },
-    removeItems: async (keys) => {
-      await getStorageArea().remove(keys);
-    },
-    snapshot: async () => {
-      return await getStorageArea().get();
-    },
-    restoreSnapshot: async (data) => {
-      await getStorageArea().set(data);
-    },
-    watch(key, cb) {
-      const listener = (changes: Storage.StorageAreaOnChangedChangesType) => {
-        const change = changes[key] as { newValue: any; oldValue: any };
-        if (change == null) return;
-        if (dequal(change.newValue, change.oldValue)) return;
-        cb(change.newValue ?? null, change.oldValue ?? null);
-      };
-      getStorageArea().onChanged.addListener(listener);
-      watchListeners.add(listener);
-      return () => {
-        getStorageArea().onChanged.removeListener(listener);
-        watchListeners.delete(listener);
-      };
-    },
-    unwatch() {
-      watchListeners.forEach((listener) => {
-        getStorageArea().onChanged.removeListener(listener);
-      });
-      watchListeners.clear();
-    },
-  };
-}
-
-export interface WxtStorage {
-  /**
-   * Get an item from storage, or return `null` if it doesn't exist.
-   *
-   * @example
-   * await storage.getItem<number>("local:installDate");
-   */
-  getItem<TValue>(
-    key: StorageItemKey,
-    opts: GetItemOptions<TValue> & { fallback: TValue },
-  ): Promise<TValue>;
-
-  getItem<TValue>(
-    key: StorageItemKey,
-    opts?: GetItemOptions<TValue>,
-  ): Promise<TValue | null>;
-
-  /**
-   * Get multiple items from storage. The return order is guaranteed to be the same as the order
-   * requested.
-   *
-   * @example
-   * await storage.getItems(["local:installDate", "session:someCounter"]);
-   */
-  getItems(
-    keys: Array<
-      | StorageItemKey
-      | WxtStorageItem<any, any>
-      | { key: StorageItemKey; options?: GetItemOptions<any> }
-    >,
-  ): Promise<Array<{ key: StorageItemKey; value: any }>>;
-  /**
-   * Return an object containing metadata about the key. Object is stored at `key + "$"`. If value
-   * is not an object, it returns an empty object.
-   *
-   * @example
-   * await storage.getMeta("local:installDate");
-   */
-  getMeta<T extends Record<string, unknown>>(key: StorageItemKey): Promise<T>;
-  /**
-   * Get the metadata of multiple storage items.
-   *
-   * @param items List of keys or items to get the metadata of.
-   * @returns An array containing storage keys and their metadata.
-   */
-  getMetas(
-    keys: Array<StorageItemKey | WxtStorageItem<any, any>>,
-  ): Promise<Array<{ key: StorageItemKey; meta: any }>>;
-  /**
-   * Set a value in storage. Setting a value to `null` or `undefined` is equivalent to calling
-   * `removeItem`.
-   *
-   * @example
-   * await storage.setItem<number>("local:installDate", Date.now());
-   */
-  setItem<T>(key: StorageItemKey, value: T | null): Promise<void>;
-  /**
-   * Set multiple values in storage. If a value is set to `null` or `undefined`, the key is removed.
-   *
-   * @example
-   * await storage.setItem([
-   *   { key: "local:installDate", value: Date.now() },
-   *   { key: "session:someCounter, value: 5 },
-   * ]);
-   */
-  setItems(
-    values: Array<
-      | { key: StorageItemKey; value: any }
-      | { item: WxtStorageItem<any, any>; value: any }
-    >,
-  ): Promise<void>;
-  /**
-   * Sets metadata properties. If some properties are already set, but are not included in the
-   * `properties` parameter, they will not be removed.
-   *
-   * @example
-   * await storage.setMeta("local:installDate", { appVersion });
-   */
-  setMeta<T extends Record<string, unknown>>(
-    key: StorageItemKey,
-    properties: T | null,
-  ): Promise<void>;
-  /**
-   * Set the metadata of multiple storage items.
-   *
-   * @param items List of storage keys or items and metadata to set for each.
-   */
-  setMetas(
-    metas: Array<
-      | { key: StorageItemKey; meta: Record<string, any> }
-      | { item: WxtStorageItem<any, any>; meta: Record<string, any> }
-    >,
-  ): Promise<void>;
-  /**
-   * Removes an item from storage.
-   *
-   * @example
-   * await storage.removeItem("local:installDate");
-   */
-  removeItem(key: StorageItemKey, opts?: RemoveItemOptions): Promise<void>;
-  /**
-   * Remove a list of keys from storage.
-   */
-  removeItems(
-    keys: Array<
-      | StorageItemKey
-      | WxtStorageItem<any, any>
-      | { key: StorageItemKey; options?: RemoveItemOptions }
-      | { item: WxtStorageItem<any, any>; options?: RemoveItemOptions }
-    >,
-  ): Promise<void>;
-  /**
-   * Remove the entire metadata for a key, or specific properties by name.
-   *
-   * @example
-   * // Remove all metadata properties from the item
-   * await storage.removeMeta("local:installDate");
-   *
-   * // Remove only specific the "v" field
-   * await storage.removeMeta("local:installDate", "v")
-   */
-  removeMeta(
-    key: StorageItemKey,
-    properties?: string | string[],
-  ): Promise<void>;
-  /**
-   * Return all the items in storage.
-   */
-  snapshot(
-    base: StorageArea,
-    opts?: SnapshotOptions,
-  ): Promise<Record<string, unknown>>;
-  /**
-   * Restores the results of `snapshot`. If new properties have been saved since the snapshot, they are
-   * not overridden. Only values existing in the snapshot are overridden.
-   */
-  restoreSnapshot(base: StorageArea, data: any): Promise<void>;
-  /**
-   * Watch for changes to a specific key in storage.
-   */
-  watch<T>(key: StorageItemKey, cb: WatchCallback<T | null>): Unwatch;
-  /**
-   * Remove all watch listeners.
-   */
-  unwatch(): void;
-
-  /**
-   * Define a storage item with a default value, type, or versioning.
-   *
-   * Read full docs: https://wxt.dev/guide/extension-apis/storage.html#defining-storage-items
-   */
-  defineItem<TValue, TMetadata extends Record<string, unknown> = {}>(
-    key: StorageItemKey,
-  ): WxtStorageItem<TValue | null, TMetadata>;
-  defineItem<TValue, TMetadata extends Record<string, unknown> = {}>(
-    key: StorageItemKey,
-    options: WxtStorageItemOptions<TValue>,
-  ): WxtStorageItem<TValue, TMetadata>;
-}
-
-interface WxtStorageDriver {
-  getItem<T>(key: string): Promise<T | null>;
-  getItems(keys: string[]): Promise<{ key: string; value: any }[]>;
-  setItem<T>(key: string, value: T | null): Promise<void>;
-  setItems(values: Array<{ key: string; value: any }>): Promise<void>;
-  removeItem(key: string): Promise<void>;
-  removeItems(keys: string[]): Promise<void>;
-  snapshot(): Promise<Record<string, unknown>>;
-  restoreSnapshot(data: Record<string, unknown>): Promise<void>;
-  watch<T>(key: string, cb: WatchCallback<T | null>): Unwatch;
-  unwatch(): void;
-}
-
-export interface WxtStorageItem<
-  TValue,
-  TMetadata extends Record<string, unknown>,
-> {
-  /**
-   * The storage key passed when creating the storage item.
-   */
-  key: StorageItemKey;
-  /**
-   * @deprecated Renamed to fallback, use it instead.
-   */
-  defaultValue: TValue;
-  /**
-   * The value provided by the `fallback` option.
-   */
-  fallback: TValue;
-  /**
-   * Get the latest value from storage.
-   */
-  getValue(): Promise<TValue>;
-  /**
-   * Get metadata.
-   */
-  getMeta(): Promise<NullablePartial<TMetadata>>;
-  /**
-   * Set the value in storage.
-   */
-  setValue(value: TValue): Promise<void>;
-  /**
-   * Set metadata properties.
-   */
-  setMeta(properties: NullablePartial<TMetadata>): Promise<void>;
-  /**
-   * Remove the value from storage.
-   */
-  removeValue(opts?: RemoveItemOptions): Promise<void>;
-  /**
-   * Remove all metadata or certain properties from metadata.
-   */
-  removeMeta(properties?: string[]): Promise<void>;
-  /**
-   * Listen for changes to the value in storage.
-   */
-  watch(cb: WatchCallback<TValue>): Unwatch;
-  /**
-   * If there are migrations defined on the storage item, migrate to the latest version.
-   *
-   * **This function is ran automatically whenever the extension updates**, so you don't have to call it
-   * manually.
-   */
-  migrate(): Promise<void>;
-}
-
-export type StorageArea = 'local' | 'session' | 'sync' | 'managed';
-export type StorageItemKey = `${StorageArea}:${string}`;
-
-export interface GetItemOptions<T> {
-  /**
-   * @deprecated Renamed to `fallback`, use it instead.
-   */
-  defaultValue?: T;
-  /**
-   * Default value returned when `getItem` would otherwise return `null`.
-   */
-  fallback?: T;
-}
-
-export interface RemoveItemOptions {
-  /**
-   * Optionally remove metadata when deleting a key.
-   *
-   * @default false
-   */
-  removeMeta?: boolean;
-}
-
-export interface SnapshotOptions {
-  /**
-   * Exclude a list of keys. The storage area prefix should be removed since the snapshot is for a
-   * specific storage area already.
-   */
-  excludeKeys?: string[];
-}
-
-export interface WxtStorageItemOptions<T> {
-  /**
-   * @deprecated Renamed to `fallback`, use it instead.
-   */
-  defaultValue?: T;
-  /**
-   * Default value returned when `getValue` would otherwise return `null`.
-   */
-  fallback?: T;
-  /**
-   * If passed, a value in storage will be initialized immediately after
-   * defining the storage item. This function returns the value that will be
-   * saved to storage during the initialization process if a value doesn't
-   * already exist.
-   */
-  init?: () => T | Promise<T>;
-  /**
-   * Provide a version number for the storage item to enable migrations. When changing the version
-   * in the future, migration functions will be ran on application startup.
-   */
-  version?: number;
-  /**
-   * A map of version numbers to the functions used to migrate the data to that version.
-   */
-  migrations?: Record<number, (oldValue: any) => any>;
-}
-
-/**
- * Same as `Partial`, but includes `| null`. It makes all the properties of an object optional and
- * nullable.
- */
-export type NullablePartial<T> = {
-  [key in keyof T]+?: T[key] | undefined | null;
-};
-/**
- * Callback called when a value in storage is changed.
- */
-export type WatchCallback<T> = (newValue: T, oldValue: T) => void;
-/**
- * Call to remove a watch listener
- */
-export type Unwatch = () => void;
-
-export class MigrationError extends Error {
-  constructor(
-    public key: string,
-    public version: number,
-    options?: ErrorOptions,
-  ) {
-    super(`v${version} migration failed for "${key}"`, options);
-  }
-}
+export * from '@wxt-dev/storage';

packages/wxt/src/types.ts

@@ -45,6 +45,7 @@ export interface InlineConfig {
    * A list of entrypoint names (`"popup"`, `"options"`, etc.) to build. Will speed up the build if
    * your extension has lots of entrypoints, and you don't need to build all of them to develop a
    * feature.
+   * If specified, this completely overrides the `include`/`exclude` option provided per-entrypoint.
    */
   filterEntrypoints?: string[];
   /**
@@ -271,7 +272,7 @@ export interface InlineConfig {
   analysis?: {
     /**
      * Explicitly include bundle analysis when running `wxt build`. This can be overridden by the
-     * command line `--analysis` option.
+     * command line `--analyze` option.
      *
      * @default false
      */
@@ -588,7 +589,7 @@ export interface BackgroundEntrypointOptions extends BaseEntrypointOptions {
 
 export interface BaseContentScriptEntrypointOptions
   extends BaseEntrypointOptions {
-  matches: PerBrowserOption<Manifest.ContentScript['matches']>;
+  matches?: PerBrowserOption<Manifest.ContentScript['matches']>;
   /**
    * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
    * @default "documentIdle"
@@ -728,7 +729,14 @@ export interface BaseEntrypoint {
    * subdirectory of it.
    */
   outputDir: string;
-  skipped: boolean;
+  /**
+   * When true, the entrypoint will not be built by WXT. Normally this is set
+   * based on the `filterEntrypoints` config or the entrypoint's
+   * `include`/`exclude` options defined inside the file.
+   *
+   * See https://wxt.dev/guide/essentials/target-different-browsers.html#filtering-entrypoints
+   */
+  skipped?: boolean;
 }
 
 export interface GenericEntrypoint extends BaseEntrypoint {
@@ -1100,11 +1108,16 @@ export type HookResult = Promise<void> | void;
 
 export interface WxtHooks {
   /**
-   * Called after WXT initialization, when the WXT instance is ready to work.
+   * Called after WXT modules are initialized, when the WXT instance is ready to
+   * be used. `wxt.server` isn't available yet, use `server:created` to get it.
    * @param wxt The configured WXT object
-   * @returns Promise
    */
   ready: (wxt: Wxt) => HookResult;
+  /**
+   * Called whenever config is loaded or reloaded. Use this hook to modify config by modifying `wxt.config`.
+   * @param wxt The configured WXT object
+   */
+  'config:resolved': (wxt: Wxt) => HookResult;
   /**
    * Called before WXT writes .wxt/tsconfig.json and .wxt/wxt.d.ts, allowing
    * addition of custom references and declarations in wxt.d.ts, or directly
@@ -1192,39 +1205,52 @@ export interface WxtHooks {
    * @param wxt The configured WXT object
    */
   'zip:start': (wxt: Wxt) => HookResult;
-
   /**
    * Called before zipping the extension files.
    * @param wxt The configured WXT object
    */
   'zip:extension:start': (wxt: Wxt) => HookResult;
-
   /**
    * Called after zipping the extension files.
    * @param wxt The configured WXT object
    * @param zipPath The path to the created extension zip file
    */
   'zip:extension:done': (wxt: Wxt, zipPath: string) => HookResult;
-
   /**
    * Called before zipping the source files (for Firefox).
    * @param wxt The configured WXT object
    */
   'zip:sources:start': (wxt: Wxt) => HookResult;
-
   /**
    * Called after zipping the source files (for Firefox).
    * @param wxt The configured WXT object
    * @param zipPath The path to the created sources zip file
    */
   'zip:sources:done': (wxt: Wxt, zipPath: string) => HookResult;
-
   /**
    * Called after the entire zip process is complete.
    * @param wxt The configured WXT object
    * @param zipFiles An array of paths to all created zip files
    */
   'zip:done': (wxt: Wxt, zipFiles: string[]) => HookResult;
+  /**
+   * Called when the dev server is created (and `wxt.server` is assigned). Server has not been started yet.
+   * @param wxt The configured WXT object
+   * @param server Same as `wxt.server`, the object WXT uses to control the dev server.
+   */
+  'server:created': (wxt: Wxt, server: WxtDevServer) => HookResult;
+  /**
+   * Called when the dev server is started.
+   * @param wxt The configured WXT object
+   * @param server Same as `wxt.server`, the object WXT uses to control the dev server.
+   */
+  'server:started': (wxt: Wxt, server: WxtDevServer) => HookResult;
+  /**
+   * Called when the dev server is stopped.
+   * @param wxt The configured WXT object
+   * @param server Same as `wxt.server`, the object WXT uses to control the dev server.
+   */
+  'server:closed': (wxt: Wxt, server: WxtDevServer) => HookResult;
 }
 
 export interface Wxt {
@@ -1239,7 +1265,7 @@ export interface Wxt {
    */
   logger: Logger;
   /**
-   * Reload config file and update the `config` field with the result.
+   * Reload config file and update `wxt.config` with the result.
    */
   reloadConfig: () => Promise<void>;
   /**

packages/wxt/typedoc.json

@@ -6,7 +6,7 @@
     "src/browser/index.ts",
     "src/browser/chrome.ts",
     "src/index.ts",
-    "src/storage.ts",
-    "src/modules.ts"
+    "src/modules.ts",
+    "src/storage.ts"
   ]
 }

pnpm-lock.yaml

@@ -58,6 +58,9 @@ importers:
       typedoc:
         specifier: ^0.25.4
         version: 0.25.4(typescript@5.6.3)
+      typedoc-plugin-frontmatter:
+        specifier: ^1.1.0
+        version: 1.1.0(typedoc-plugin-markdown@4.0.0-next.23(typedoc@0.25.4(typescript@5.6.3)))
       typedoc-plugin-markdown:
         specifier: 4.0.0-next.23
         version: 4.0.0-next.23(typedoc@0.25.4(typescript@5.6.3))
@@ -260,6 +263,40 @@ importers:
         specifier: workspace:*
         version: link:../wxt
 
+  packages/storage:
+    dependencies:
+      async-mutex:
+        specifier: ^0.5.0
+        version: 0.5.0
+      dequal:
+        specifier: ^2.0.3
+        version: 2.0.3
+    devDependencies:
+      '@aklinker1/check':
+        specifier: ^1.4.5
+        version: 1.4.5(typescript@5.6.3)
+      '@types/chrome':
+        specifier: ^0.0.268
+        version: 0.0.268
+      '@webext-core/fake-browser':
+        specifier: ^1.3.1
+        version: 1.3.1
+      oxlint:
+        specifier: ^0.9.9
+        version: 0.9.10
+      publint:
+        specifier: ^0.2.11
+        version: 0.2.12
+      typescript:
+        specifier: ^5.6.2
+        version: 5.6.3
+      unbuild:
+        specifier: ^2.0.0
+        version: 2.0.0(sass@1.80.7)(typescript@5.6.3)
+      vitest:
+        specifier: ^2.0.0
+        version: 2.1.4(@types/node@20.17.6)(happy-dom@15.11.4)(sass@1.80.7)
+
   packages/unocss:
     dependencies:
       defu:
@@ -311,6 +348,9 @@ importers:
       '@webext-core/match-patterns':
         specifier: ^1.0.3
         version: 1.0.3
+      '@wxt-dev/storage':
+        specifier: workspace:^1.0.0
+        version: link:../storage
       async-mutex:
         specifier: ^0.5.0
         version: 0.5.0
@@ -332,9 +372,6 @@ importers:
       defu:
         specifier: ^6.1.4
         version: 6.1.4
-      dequal:
-        specifier: ^2.0.3
-        version: 2.0.3
       dotenv:
         specifier: ^16.4.5
         version: 16.4.5
@@ -350,9 +387,9 @@ importers:
       fs-extra:
         specifier: ^11.2.0
         version: 11.2.0
-      get-port:
-        specifier: ^7.1.0
-        version: 7.1.0
+      get-port-please:
+        specifier: ^3.1.2
+        version: 3.1.2
       giget:
         specifier: ^1.2.3
         version: 1.2.3
@@ -417,7 +454,7 @@ importers:
         specifier: ^3.13.1
         version: 3.13.1(rollup@4.24.0)(webpack-sources@3.2.3)
       vite:
-        specifier: ^5.4.11
+        specifier: ^5.0.0 || ^6.0.0
         version: 5.4.11(@types/node@20.17.6)(sass@1.80.7)
       vite-node:
         specifier: ^2.1.4
@@ -1455,41 +1492,81 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@oxlint/darwin-arm64@0.9.10':
+    resolution: {integrity: sha512-eOXKZYq5bnCSgDefgM5bzAg+4Fc//Rc4yjgKN8iDWUARweCaChiQXb6TXX8MfEfs6qayEMy6yVj0pqoFz0B1aw==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxlint/darwin-x64@0.11.1':
     resolution: {integrity: sha512-LPuF0D8uu30KIVEeVuGwIPwHwJRQ1i1otwFFH7tRsNXPgMgZJ4VgriyH22i6RWwBtclJoCSBLtGK6gLZ0oZBvw==}
     cpu: [x64]
     os: [darwin]
 
+  '@oxlint/darwin-x64@0.9.10':
+    resolution: {integrity: sha512-UeYICDvLUaUOcY+0ugZUEmBMRLP+x8iTgL7TeY6BlpGw2ahbtUOTbyIIRWtr/0O++TnjZ+v8TzhJ9crw6Ij6dg==}
+    cpu: [x64]
+    os: [darwin]
+
   '@oxlint/linux-arm64-gnu@0.11.1':
     resolution: {integrity: sha512-CYBE+GRIPs5e+raD2pdicuBn6Y6E1xAnyWQ/kHE4GEWDAQZY0Um2VYEUTGH2ObwJ3uXr6jeJ16HOKJvr0S8a8w==}
     cpu: [arm64]
     os: [linux]
 
+  '@oxlint/linux-arm64-gnu@0.9.10':
+    resolution: {integrity: sha512-0Zn+vqHhrZyufFBfq9WOgiIool0gCR14BLsdS+0Dwd9o+kNxPGA5q7erQFkiC4rpkxtfBHeD3iIKMMt7d29Kyw==}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxlint/linux-arm64-musl@0.11.1':
     resolution: {integrity: sha512-iYXF5N5Gv+lc2wt90kxXy/W0cn7IEWu3UPzewIjPGDH8ajDckvGzZx6pTGYJnTyMh7U6hUKwOBFPVLMWI7UwKQ==}
     cpu: [arm64]
     os: [linux]
 
+  '@oxlint/linux-arm64-musl@0.9.10':
+    resolution: {integrity: sha512-tkQcWpYwF42bA/uRaV2iMFePHkBjTTgomOgeEaiw6XOSJX4nBEqGIIboqqLBWT4JnKCf/L+IG3y/e1MflhKByw==}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxlint/linux-x64-gnu@0.11.1':
     resolution: {integrity: sha512-D0tT8X0CsK/bpdkGdLSmsGftG3VndjyAUJuNGt56JYn0UfuPDkhQcLgUlkANHzNRXJ84tLQKhpf/MUDUHPB5cg==}
     cpu: [x64]
     os: [linux]
 
+  '@oxlint/linux-x64-gnu@0.9.10':
+    resolution: {integrity: sha512-JHbkMUnibqaSMBvLHyqTL5cWxcGW+jw+Ppt2baLISpvo34a6fBR+PI7v/A92sEDWe0W1rPhypzCwA8mKpkQ3DA==}
+    cpu: [x64]
+    os: [linux]
+
   '@oxlint/linux-x64-musl@0.11.1':
     resolution: {integrity: sha512-WekaLYk8WLT7Di8+nyPvtqs9OlMoO6KjFDMlqqLDWQTk9ffjn8e76PCRigF3w39jQ70qP3c8k8cNKNw5ROuFcg==}
     cpu: [x64]
     os: [linux]
 
+  '@oxlint/linux-x64-musl@0.9.10':
+    resolution: {integrity: sha512-aBBwN7bQzidwHwEXr7BAdVvMTLWstCy5gikerjLnGDeCSXX9r+o6+yUzTOqZvOo66E+XBgOJaVbY8rsL1MLE0g==}
+    cpu: [x64]
+    os: [linux]
+
   '@oxlint/win32-arm64@0.11.1':
     resolution: {integrity: sha512-/CN/bFtI33vB8uemOkZxlNRf6Q7CftP2pSO7a6Q2niG4NC99YRPj7ctXcPF0jGR0NQUhGZk7ajM4G/0MKcRdag==}
     cpu: [arm64]
     os: [win32]
 
+  '@oxlint/win32-arm64@0.9.10':
+    resolution: {integrity: sha512-LXDnk7vKHT3IY6G1jq0O7+XMhtcHOYuxLGIx4KP+4xS6vKgBY+Bsq4xV3AtmtKlvnXkP5FxHpfLmcEtm5AWysA==}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxlint/win32-x64@0.11.1':
     resolution: {integrity: sha512-0hLl0z6adYTvLIOPC5uyo+EAwNITkzi4AY4xImykQW8H89GhiV9Xl8MPJeZQMWSz7ajI1I2+hRsvA0QAzeBsxA==}
     cpu: [x64]
     os: [win32]
 
+  '@oxlint/win32-x64@0.9.10':
+    resolution: {integrity: sha512-w5XRAV4bhgwenjjpGYZGglqzG9Wv/sI+cjQWJBQsvfDXsr2w4vOBXzt1j3/Z3EcSqf4KtkCa/IIuAhQyeShUbA==}
+    cpu: [x64]
+    os: [win32]
+
   '@parcel/watcher-android-arm64@2.5.0':
     resolution: {integrity: sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==}
     engines: {node: '>= 10.0.0'}
@@ -1800,6 +1877,9 @@ packages:
   '@types/babel__traverse@7.20.6':
     resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
 
+  '@types/chrome@0.0.268':
+    resolution: {integrity: sha512-7N1QH9buudSJ7sI8Pe4mBHJr5oZ48s0hcanI9w3wgijAlv1OZNUZve9JR4x42dn5lJ5Sm87V1JNfnoh10EnQlA==}
+
   '@types/chrome@0.0.280':
     resolution: {integrity: sha512-AotSmZrL9bcZDDmSI1D9dE7PGbhOur5L0cKxXd7IqbVizQWCY4gcvupPUVsQ4FfDj3V2tt/iOpomT9EY0s+w1g==}
 
@@ -2929,9 +3009,8 @@ packages:
   get-func-name@2.0.2:
     resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
 
-  get-port@7.1.0:
-    resolution: {integrity: sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==}
-    engines: {node: '>=16'}
+  get-port-please@3.1.2:
+    resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
 
   get-stream@5.2.0:
     resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
@@ -3790,6 +3869,11 @@ packages:
     engines: {node: '>=14.*'}
     hasBin: true
 
+  oxlint@0.9.10:
+    resolution: {integrity: sha512-bKiiFN7Hnoaist/rditTRBXz+GXKYuLd53/NB7Q6zHB/bifELJarSoRLkAUGElIJKl4PSr3lTh1g6zehh+rX0g==}
+    engines: {node: '>=14.*'}
+    hasBin: true
+
   p-cancelable@3.0.0:
     resolution: {integrity: sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==}
     engines: {node: '>=12.20'}
@@ -4601,6 +4685,11 @@ packages:
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
+  typedoc-plugin-frontmatter@1.1.0:
+    resolution: {integrity: sha512-4PW4V2xDY2hw+fEWmg7g6FBCIWZdiEE+tzjJ5K4JhurvJ0t0Vp0IE/0nuHGGIZVtV5WxPIed+GpiH1uZrpDquQ==}
+    peerDependencies:
+      typedoc-plugin-markdown: '>=4.3.0'
+
   typedoc-plugin-markdown@4.0.0-next.23:
     resolution: {integrity: sha512-bKD0LnrQxUTbuDRiJfCWYLlzyERuskWldJ5eWKKuNY38xBOyBhSN8P+vD5KxlJoAifTOm76MK58sNrl4wgOoWg==}
     peerDependencies:
@@ -5840,27 +5929,51 @@ snapshots:
   '@oxlint/darwin-arm64@0.11.1':
     optional: true
 
+  '@oxlint/darwin-arm64@0.9.10':
+    optional: true
+
   '@oxlint/darwin-x64@0.11.1':
     optional: true
 
+  '@oxlint/darwin-x64@0.9.10':
+    optional: true
+
   '@oxlint/linux-arm64-gnu@0.11.1':
     optional: true
 
+  '@oxlint/linux-arm64-gnu@0.9.10':
+    optional: true
+
   '@oxlint/linux-arm64-musl@0.11.1':
     optional: true
 
+  '@oxlint/linux-arm64-musl@0.9.10':
+    optional: true
+
   '@oxlint/linux-x64-gnu@0.11.1':
     optional: true
 
+  '@oxlint/linux-x64-gnu@0.9.10':
+    optional: true
+
   '@oxlint/linux-x64-musl@0.11.1':
     optional: true
 
+  '@oxlint/linux-x64-musl@0.9.10':
+    optional: true
+
   '@oxlint/win32-arm64@0.11.1':
     optional: true
 
+  '@oxlint/win32-arm64@0.9.10':
+    optional: true
+
   '@oxlint/win32-x64@0.11.1':
     optional: true
 
+  '@oxlint/win32-x64@0.9.10':
+    optional: true
+
   '@parcel/watcher-android-arm64@2.5.0':
     optional: true
 
@@ -6134,6 +6247,11 @@ snapshots:
     dependencies:
       '@babel/types': 7.25.6
 
+  '@types/chrome@0.0.268':
+    dependencies:
+      '@types/filesystem': 0.0.36
+      '@types/har-format': 1.2.15
+
   '@types/chrome@0.0.280':
     dependencies:
       '@types/filesystem': 0.0.36
@@ -7475,7 +7593,7 @@ snapshots:
 
   get-func-name@2.0.2: {}
 
-  get-port@7.1.0: {}
+  get-port-please@3.1.2: {}
 
   get-stream@5.2.0:
     dependencies:
@@ -8350,6 +8468,17 @@ snapshots:
       '@oxlint/win32-arm64': 0.11.1
       '@oxlint/win32-x64': 0.11.1
 
+  oxlint@0.9.10:
+    optionalDependencies:
+      '@oxlint/darwin-arm64': 0.9.10
+      '@oxlint/darwin-x64': 0.9.10
+      '@oxlint/linux-arm64-gnu': 0.9.10
+      '@oxlint/linux-arm64-musl': 0.9.10
+      '@oxlint/linux-x64-gnu': 0.9.10
+      '@oxlint/linux-x64-musl': 0.9.10
+      '@oxlint/win32-arm64': 0.9.10
+      '@oxlint/win32-x64': 0.9.10
+
   p-cancelable@3.0.0: {}
 
   package-json-from-dist@1.0.0: {}
@@ -9173,6 +9302,11 @@ snapshots:
 
   typedarray@0.0.6: {}
 
+  typedoc-plugin-frontmatter@1.1.0(typedoc-plugin-markdown@4.0.0-next.23(typedoc@0.25.4(typescript@5.6.3))):
+    dependencies:
+      typedoc-plugin-markdown: 4.0.0-next.23(typedoc@0.25.4(typescript@5.6.3))
+      yaml: 2.5.1
+
   typedoc-plugin-markdown@4.0.0-next.23(typedoc@0.25.4(typescript@5.6.3)):
     dependencies:
       typedoc: 0.25.4(typescript@5.6.3)

templates/svelte/src/entrypoints/popup/main.ts

@@ -1,7 +1,8 @@
-import './app.css';
+import { mount } from 'svelte';
 import App from './App.svelte';
+import './app.css';
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 });
 

templates/vue/README.md

@@ -4,4 +4,4 @@ This template should help get you started developing with Vue 3 in WXT.
 
 ## Recommended IDE Setup
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar).

templates/vue/package.json

@@ -20,7 +20,7 @@
   "devDependencies": {
     "@types/chrome": "^0.0.280",
     "@wxt-dev/module-vue": "^1.0.1",
-    "typescript": "^5.6.3",
+    "typescript": "5.6.3",
     "vue-tsc": "^2.1.10",
     "wxt": "^0.19.13"
   }