wxt 0.9.1 → 0.10.0

package/README.md

@@ -27,9 +27,9 @@
   •
   <a href="https://wxt.dev/guide/installation.html" target="_blank">Installation</a>
   &bull;
-  <a href="https://wxt.dev/entrypoints/background.html" target="_blank">Entrypoints</a>
-  &bull;
   <a href="https://wxt.dev/api/config.html" target="_blank">Configuration</a>
+  &bull;
+  <a href="https://wxt.dev/examples.html" target="_blank">Examples</a>
 </p>
 
 ![Example CLI Output](./docs/assets/cli-output.png)

package/dist/{chunk-2BIYR4TE.js → chunk-4ACVTNQN.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "0.9.1";
+var version = "0.10.0";
 
 // src/core/utils/entrypoints.ts
 import path, { relative, resolve } from "node:path";
@@ -129,7 +129,8 @@ function getUnimportOptions(config) {
     presets: [
       { package: "wxt/client" },
       { package: "wxt/browser" },
-      { package: "wxt/sandbox" }
+      { package: "wxt/sandbox" },
+      { package: "wxt/storage" }
     ],
     warn: config.logger.warn,
     dirs: ["components", "composables", "hooks", "utils"]
@@ -563,6 +564,30 @@ function bundleAnalysis() {
   });
 }
 
+// src/core/vite-plugins/excludeBrowserPolyfill.ts
+function excludeBrowserPolyfill(config) {
+  const virtualId = "virtual:wxt-webextension-polyfill-disabled";
+  return {
+    name: "wxt:exclude-browser-polyfill",
+    config() {
+      if (config.experimental.includeBrowserPolyfill)
+        return;
+      return {
+        resolve: {
+          alias: {
+            "webextension-polyfill": virtualId
+          }
+        }
+      };
+    },
+    load(id) {
+      if (id === virtualId) {
+        return "export default chrome";
+      }
+    }
+  };
+}
+
 // src/core/utils/arrays.ts
 function every(array, predicate) {
   for (let i = 0; i < array.length; i++)
@@ -1159,7 +1184,10 @@ async function getInternalConfig(inlineConfig, command) {
       template: mergedConfig.analysis?.template ?? "treemap"
     },
     userConfigMetadata: userConfigMetadata ?? {},
-    alias
+    alias,
+    experimental: {
+      includeBrowserPolyfill: mergedConfig.experimental?.includeBrowserPolyfill ?? true
+    }
   };
   finalConfig.vite = (env2) => resolveInternalViteConfig(env2, mergedConfig, finalConfig);
   return finalConfig;
@@ -1220,6 +1248,10 @@ function mergeInlineConfig(inlineConfig, userConfig) {
     alias: {
       ...userConfig.alias,
       ...inlineConfig.alias
+    },
+    experimental: {
+      ...userConfig.experimental,
+      ...inlineConfig.experimental
     }
   };
 }
@@ -1272,6 +1304,7 @@ async function resolveInternalViteConfig(env, mergedConfig, finalConfig) {
     internalVite.plugins.push(bundleAnalysis());
   }
   internalVite.plugins.push(globals(finalConfig));
+  internalVite.plugins.push(excludeBrowserPolyfill(finalConfig));
   return internalVite;
 }
 
@@ -1362,6 +1395,9 @@ async function importEntrypointFile(path7, config) {
         "node_modules/wxt/dist/virtual/mock-browser.js"
       )
     },
+    // Continue using node to load TS files even if `bun run --bun` is detected. Jiti does not
+    // respect the custom transform function when using it's native bun option.
+    experimentalBun: false,
     // List of extensions to transform with esbuild
     extensions: [".ts", ".cts", ".mts", ".tsx", ".js", ".cjs", ".mjs", ".jsx"],
     transform(opts) {
@@ -1894,20 +1930,20 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
 function discoverIcons(buildOutput) {
   const icons = [];
   const iconRegex = [
-    /^icon-([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon-([0-9]+)\.png$/,
     // icon-16.png
-    /^icon-([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon-([0-9]+)x[0-9]+\.png$/,
     // icon-16x16.png
-    /^icon@([0-9]+)w\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon@([0-9]+)w\.png$/,
     // icon@16w.png
-    /^icon@([0-9]+)h\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon@([0-9]+)h\.png$/,
     // icon@16h.png
-    /^icon@([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon@([0-9]+)\.png$/,
     // icon@16.png
-    /^icon[\/\\]([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
-    // icon/16.png
-    /^icon[\/\\]([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/
-    // icon/16x16.png
+    /^icons?[\/\\]([0-9]+)\.png$/,
+    // icon/16.png | icons/16.png
+    /^icons?[\/\\]([0-9]+)x[0-9]+\.png$/
+    // icon/16x16.png | icons/16x16.png
   ];
   buildOutput.publicAssets.forEach((asset) => {
     let size;

package/dist/cli.cjs

@@ -2415,7 +2415,7 @@ var init_execa = __esm({
 var import_cac = __toESM(require("cac"), 1);
 
 // package.json
-var version = "0.9.1";
+var version = "0.10.0";
 
 // src/core/utils/building/build-entrypoints.ts
 var vite2 = __toESM(require("vite"), 1);
@@ -2732,7 +2732,8 @@ function getUnimportOptions(config) {
     presets: [
       { package: "wxt/client" },
       { package: "wxt/browser" },
-      { package: "wxt/sandbox" }
+      { package: "wxt/sandbox" },
+      { package: "wxt/storage" }
     ],
     warn: config.logger.warn,
     dirs: ["components", "composables", "hooks", "utils"]
@@ -2948,6 +2949,30 @@ function globals(config) {
 // src/core/vite-plugins/webextensionPolyfillAlias.ts
 var import_node_path4 = __toESM(require("path"), 1);
 
+// src/core/vite-plugins/excludeBrowserPolyfill.ts
+function excludeBrowserPolyfill(config) {
+  const virtualId = "virtual:wxt-webextension-polyfill-disabled";
+  return {
+    name: "wxt:exclude-browser-polyfill",
+    config() {
+      if (config.experimental.includeBrowserPolyfill)
+        return;
+      return {
+        resolve: {
+          alias: {
+            "webextension-polyfill": virtualId
+          }
+        }
+      };
+    },
+    load(id) {
+      if (id === virtualId) {
+        return "export default chrome";
+      }
+    }
+  };
+}
+
 // src/core/utils/fs.ts
 var import_fs_extra3 = __toESM(require("fs-extra"), 1);
 var import_fast_glob = __toESM(require("fast-glob"), 1);
@@ -3837,7 +3862,10 @@ async function getInternalConfig(inlineConfig, command) {
       template: mergedConfig.analysis?.template ?? "treemap"
     },
     userConfigMetadata: userConfigMetadata ?? {},
-    alias
+    alias,
+    experimental: {
+      includeBrowserPolyfill: mergedConfig.experimental?.includeBrowserPolyfill ?? true
+    }
   };
   finalConfig.vite = (env2) => resolveInternalViteConfig(env2, mergedConfig, finalConfig);
   return finalConfig;
@@ -3898,6 +3926,10 @@ function mergeInlineConfig(inlineConfig, userConfig) {
     alias: {
       ...userConfig.alias,
       ...inlineConfig.alias
+    },
+    experimental: {
+      ...userConfig.experimental,
+      ...inlineConfig.experimental
     }
   };
 }
@@ -3950,6 +3982,7 @@ async function resolveInternalViteConfig(env, mergedConfig, finalConfig) {
     internalVite.plugins.push(bundleAnalysis());
   }
   internalVite.plugins.push(globals(finalConfig));
+  internalVite.plugins.push(excludeBrowserPolyfill(finalConfig));
   return internalVite;
 }
 
@@ -4040,6 +4073,9 @@ async function importEntrypointFile(path11, config) {
         "node_modules/wxt/dist/virtual/mock-browser.js"
       )
     },
+    // Continue using node to load TS files even if `bun run --bun` is detected. Jiti does not
+    // respect the custom transform function when using it's native bun option.
+    experimentalBun: false,
     // List of extensions to transform with esbuild
     extensions: [".ts", ".cts", ".mts", ".tsx", ".js", ".cjs", ".mjs", ".jsx"],
     transform(opts) {
@@ -4576,20 +4612,20 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
 function discoverIcons(buildOutput) {
   const icons = [];
   const iconRegex = [
-    /^icon-([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon-([0-9]+)\.png$/,
     // icon-16.png
-    /^icon-([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon-([0-9]+)x[0-9]+\.png$/,
     // icon-16x16.png
-    /^icon@([0-9]+)w\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon@([0-9]+)w\.png$/,
     // icon@16w.png
-    /^icon@([0-9]+)h\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon@([0-9]+)h\.png$/,
     // icon@16h.png
-    /^icon@([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon@([0-9]+)\.png$/,
     // icon@16.png
-    /^icon[\/\\]([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
-    // icon/16.png
-    /^icon[\/\\]([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/
-    // icon/16x16.png
+    /^icons?[\/\\]([0-9]+)\.png$/,
+    // icon/16.png | icons/16.png
+    /^icons?[\/\\]([0-9]+)x[0-9]+\.png$/
+    // icon/16x16.png | icons/16x16.png
   ];
   buildOutput.publicAssets.forEach((asset) => {
     let size;
@@ -5150,9 +5186,13 @@ async function initialize(options) {
         type: () => options.packageManager == null ? "select" : void 0,
         message: "Package Manager",
         choices: [
-          { title: "npm", value: "npm" },
-          { title: "pnpm", value: "pnpm" },
-          { title: "yarn", value: "yarn" }
+          { title: import_picocolors7.default.red("npm"), value: "npm" },
+          { title: import_picocolors7.default.yellow("pnpm"), value: "pnpm" },
+          { title: import_picocolors7.default.cyan("yarn"), value: "yarn" },
+          {
+            title: `${import_picocolors7.default.magenta("bun")}${import_picocolors7.default.gray(" (experimental)")}`,
+            value: "bun"
+          }
         ]
       }
     ],

package/dist/{external-9e212597.d.ts → external-9115d0fb.d.ts}

@@ -284,6 +284,31 @@ interface InlineConfig {
      * }
      */
     alias?: Record<string, string>;
+    /**
+     * Experimental settings - use with caution.
+     */
+    experimental?: {
+        /**
+         * Whether to use [`webextension-polyfill`](https://www.npmjs.com/package/webextension-polyfill)
+         * when importing `browser` from `wxt/browser`.
+         *
+         * When set to `false`, WXT will export the chrome global instead of the polyfill from
+         * `wxt/browser`.
+         *
+         * You should use `browser` to access the web extension APIs.
+         *
+         * @experimental This option will remain experimental until Manifest V2 is dead.
+         *
+         * @default true
+         * @example
+         * export default defineConfig({
+         *   experimental: {
+         *     includeBrowserPolyfill: false
+         *   }
+         * })
+         */
+        includeBrowserPolyfill?: boolean;
+    };
 }
 interface WxtInlineViteConfig extends Omit<vite.InlineConfig, 'root' | 'configFile' | 'mode' | 'build'> {
     build?: Omit<vite.BuildOptions, 'outDir'>;

package/dist/index.cjs

@@ -2742,7 +2742,8 @@ function getUnimportOptions(config) {
     presets: [
       { package: "wxt/client" },
       { package: "wxt/browser" },
-      { package: "wxt/sandbox" }
+      { package: "wxt/sandbox" },
+      { package: "wxt/storage" }
     ],
     warn: config.logger.warn,
     dirs: ["components", "composables", "hooks", "utils"]
@@ -2958,6 +2959,30 @@ function globals(config) {
 // src/core/vite-plugins/webextensionPolyfillAlias.ts
 var import_node_path4 = __toESM(require("path"), 1);
 
+// src/core/vite-plugins/excludeBrowserPolyfill.ts
+function excludeBrowserPolyfill(config) {
+  const virtualId = "virtual:wxt-webextension-polyfill-disabled";
+  return {
+    name: "wxt:exclude-browser-polyfill",
+    config() {
+      if (config.experimental.includeBrowserPolyfill)
+        return;
+      return {
+        resolve: {
+          alias: {
+            "webextension-polyfill": virtualId
+          }
+        }
+      };
+    },
+    load(id) {
+      if (id === virtualId) {
+        return "export default chrome";
+      }
+    }
+  };
+}
+
 // src/core/utils/fs.ts
 var import_fs_extra3 = __toESM(require("fs-extra"), 1);
 var import_fast_glob = __toESM(require("fast-glob"), 1);
@@ -3847,7 +3872,10 @@ async function getInternalConfig(inlineConfig, command) {
       template: mergedConfig.analysis?.template ?? "treemap"
     },
     userConfigMetadata: userConfigMetadata ?? {},
-    alias
+    alias,
+    experimental: {
+      includeBrowserPolyfill: mergedConfig.experimental?.includeBrowserPolyfill ?? true
+    }
   };
   finalConfig.vite = (env2) => resolveInternalViteConfig(env2, mergedConfig, finalConfig);
   return finalConfig;
@@ -3908,6 +3936,10 @@ function mergeInlineConfig(inlineConfig, userConfig) {
     alias: {
       ...userConfig.alias,
       ...inlineConfig.alias
+    },
+    experimental: {
+      ...userConfig.experimental,
+      ...inlineConfig.experimental
     }
   };
 }
@@ -3960,6 +3992,7 @@ async function resolveInternalViteConfig(env, mergedConfig, finalConfig) {
     internalVite.plugins.push(bundleAnalysis());
   }
   internalVite.plugins.push(globals(finalConfig));
+  internalVite.plugins.push(excludeBrowserPolyfill(finalConfig));
   return internalVite;
 }
 
@@ -4050,6 +4083,9 @@ async function importEntrypointFile(path11, config) {
         "node_modules/wxt/dist/virtual/mock-browser.js"
       )
     },
+    // Continue using node to load TS files even if `bun run --bun` is detected. Jiti does not
+    // respect the custom transform function when using it's native bun option.
+    experimentalBun: false,
     // List of extensions to transform with esbuild
     extensions: [".ts", ".cts", ".mts", ".tsx", ".js", ".cjs", ".mjs", ".jsx"],
     transform(opts) {
@@ -4192,7 +4228,7 @@ function getChunkSortWeight(filename) {
 var import_picocolors3 = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "0.9.1";
+var version = "0.10.0";
 
 // src/core/utils/log/printHeader.ts
 var import_consola2 = require("consola");
@@ -4587,20 +4623,20 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
 function discoverIcons(buildOutput) {
   const icons = [];
   const iconRegex = [
-    /^icon-([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon-([0-9]+)\.png$/,
     // icon-16.png
-    /^icon-([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon-([0-9]+)x[0-9]+\.png$/,
     // icon-16x16.png
-    /^icon@([0-9]+)w\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon@([0-9]+)w\.png$/,
     // icon@16w.png
-    /^icon@([0-9]+)h\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon@([0-9]+)h\.png$/,
     // icon@16h.png
-    /^icon@([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
+    /^icon@([0-9]+)\.png$/,
     // icon@16.png
-    /^icon[\/\\]([0-9]+)\.(png|bmp|jpeg|jpg|ico|gif)$/,
-    // icon/16.png
-    /^icon[\/\\]([0-9]+)x[0-9]+\.(png|bmp|jpeg|jpg|ico|gif)$/
-    // icon/16x16.png
+    /^icons?[\/\\]([0-9]+)\.png$/,
+    // icon/16.png | icons/16.png
+    /^icons?[\/\\]([0-9]+)x[0-9]+\.png$/
+    // icon/16x16.png | icons/16x16.png
   ];
   buildOutput.publicAssets.forEach((asset) => {
     let size;
@@ -5171,9 +5207,13 @@ async function initialize(options) {
         type: () => options.packageManager == null ? "select" : void 0,
         message: "Package Manager",
         choices: [
-          { title: "npm", value: "npm" },
-          { title: "pnpm", value: "pnpm" },
-          { title: "yarn", value: "yarn" }
+          { title: import_picocolors7.default.red("npm"), value: "npm" },
+          { title: import_picocolors7.default.yellow("pnpm"), value: "pnpm" },
+          { title: import_picocolors7.default.cyan("yarn"), value: "yarn" },
+          {
+            title: `${import_picocolors7.default.magenta("bun")}${import_picocolors7.default.gray(" (experimental)")}`,
+            value: "bun"
+          }
         ]
       }
     ],

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { I as InlineConfig, B as BuildOutput, U as UserConfig, E as ExtensionRunnerConfig, W as WxtDevServer } from './external-9e212597.js';
-export { k as BackgroundDefinition, f as BackgroundEntrypoint, e as BaseEntrypoint, d as BaseEntrypointOptions, b as BuildStepOutput, q as ConfigEnv, j as ContentScriptDefinition, C as ContentScriptEntrypoint, g as Entrypoint, h as EntrypointGroup, n as ExcludableEntrypoint, G as GenericEntrypoint, L as Logger, i as OnContentScriptStopped, O as OptionsEntrypoint, m as PerBrowserOption, P as PopupEntrypoint, T as TargetBrowser, c as TargetManifestVersion, l as UnlistedScriptDefinition, o as UserManifest, p as UserManifestFn, a as WxtInlineViteConfig, r as WxtViteConfig } from './external-9e212597.js';
+import { I as InlineConfig, B as BuildOutput, U as UserConfig, E as ExtensionRunnerConfig, W as WxtDevServer } from './external-9115d0fb.js';
+export { k as BackgroundDefinition, f as BackgroundEntrypoint, e as BaseEntrypoint, d as BaseEntrypointOptions, b as BuildStepOutput, q as ConfigEnv, j as ContentScriptDefinition, C as ContentScriptEntrypoint, g as Entrypoint, h as EntrypointGroup, n as ExcludableEntrypoint, G as GenericEntrypoint, L as Logger, i as OnContentScriptStopped, O as OptionsEntrypoint, m as PerBrowserOption, P as PopupEntrypoint, T as TargetBrowser, c as TargetManifestVersion, l as UnlistedScriptDefinition, o as UserManifest, p as UserManifestFn, a as WxtInlineViteConfig, r as WxtViteConfig } from './external-9115d0fb.js';
 import 'vite';
 import 'webextension-polyfill';
 import 'unimport';
@@ -61,6 +61,6 @@ declare function prepare(config: InlineConfig): Promise<void>;
  */
 declare function zip(config?: InlineConfig): Promise<string[]>;
 
-var version = "0.9.1";
+var version = "0.10.0";
 
 export { BuildOutput, ExtensionRunnerConfig, InlineConfig, UserConfig, WxtDevServer, build, clean, createServer, defineConfig, defineRunnerConfig, initialize, prepare, version, zip };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { I as InlineConfig, B as BuildOutput, U as UserConfig, E as ExtensionRunnerConfig, W as WxtDevServer } from './external-9e212597.js';
-export { k as BackgroundDefinition, f as BackgroundEntrypoint, e as BaseEntrypoint, d as BaseEntrypointOptions, b as BuildStepOutput, q as ConfigEnv, j as ContentScriptDefinition, C as ContentScriptEntrypoint, g as Entrypoint, h as EntrypointGroup, n as ExcludableEntrypoint, G as GenericEntrypoint, L as Logger, i as OnContentScriptStopped, O as OptionsEntrypoint, m as PerBrowserOption, P as PopupEntrypoint, T as TargetBrowser, c as TargetManifestVersion, l as UnlistedScriptDefinition, o as UserManifest, p as UserManifestFn, a as WxtInlineViteConfig, r as WxtViteConfig } from './external-9e212597.js';
+import { I as InlineConfig, B as BuildOutput, U as UserConfig, E as ExtensionRunnerConfig, W as WxtDevServer } from './external-9115d0fb.js';
+export { k as BackgroundDefinition, f as BackgroundEntrypoint, e as BaseEntrypoint, d as BaseEntrypointOptions, b as BuildStepOutput, q as ConfigEnv, j as ContentScriptDefinition, C as ContentScriptEntrypoint, g as Entrypoint, h as EntrypointGroup, n as ExcludableEntrypoint, G as GenericEntrypoint, L as Logger, i as OnContentScriptStopped, O as OptionsEntrypoint, m as PerBrowserOption, P as PopupEntrypoint, T as TargetBrowser, c as TargetManifestVersion, l as UnlistedScriptDefinition, o as UserManifest, p as UserManifestFn, a as WxtInlineViteConfig, r as WxtViteConfig } from './external-9115d0fb.js';
 import 'vite';
 import 'webextension-polyfill';
 import 'unimport';
@@ -61,6 +61,6 @@ declare function prepare(config: InlineConfig): Promise<void>;
  */
 declare function zip(config?: InlineConfig): Promise<string[]>;
 
-var version = "0.9.1";
+var version = "0.10.0";
 
 export { BuildOutput, ExtensionRunnerConfig, InlineConfig, UserConfig, WxtDevServer, build, clean, createServer, defineConfig, defineRunnerConfig, initialize, prepare, version, zip };

package/dist/index.js

@@ -15,7 +15,7 @@ import {
   rebuild,
   resolvePerBrowserOption,
   version
-} from "./chunk-2BIYR4TE.js";
+} from "./chunk-4ACVTNQN.js";
 import "./chunk-YUG22S6W.js";
 
 // src/core/build.ts
@@ -398,9 +398,13 @@ async function initialize(options) {
         type: () => options.packageManager == null ? "select" : void 0,
         message: "Package Manager",
         choices: [
-          { title: "npm", value: "npm" },
-          { title: "pnpm", value: "pnpm" },
-          { title: "yarn", value: "yarn" }
+          { title: pc3.red("npm"), value: "npm" },
+          { title: pc3.yellow("pnpm"), value: "pnpm" },
+          { title: pc3.cyan("yarn"), value: "yarn" },
+          {
+            title: `${pc3.magenta("bun")}${pc3.gray(" (experimental)")}`,
+            value: "bun"
+          }
         ]
       }
     ],

package/dist/storage.cjs

@@ -0,0 +1,136 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/storage.ts
+var storage_exports = {};
+__export(storage_exports, {
+  storage: () => storage,
+  webExtensionDriver: () => webExtensionDriver
+});
+module.exports = __toCommonJS(storage_exports);
+var import_unstorage = require("unstorage");
+var import_webextension_polyfill = __toESM(require("webextension-polyfill"), 1);
+__reExport(storage_exports, require("unstorage"), module.exports);
+var webExtensionDriver = (0, import_unstorage.defineDriver)((opts) => {
+  const checkPermission = () => {
+    if (import_webextension_polyfill.default.storage == null)
+      throw Error(
+        "You must request the 'storage' permission to use webExtensionDriver"
+      );
+  };
+  const _storageListener = (changes) => {
+    Object.entries(changes).forEach(([key, { newValue }]) => {
+      _listeners.forEach((callback) => {
+        callback(newValue ? "update" : "remove", key);
+      });
+    });
+  };
+  const _listeners = /* @__PURE__ */ new Set();
+  return {
+    name: "web-extension:" + opts.storageArea,
+    async hasItem(key) {
+      checkPermission();
+      const res = await import_webextension_polyfill.default.storage[opts.storageArea].get(key);
+      return res[key] != null;
+    },
+    async getItem(key) {
+      checkPermission();
+      const res = await import_webextension_polyfill.default.storage[opts.storageArea].get(key);
+      return res[key] ?? null;
+    },
+    async getItems(items) {
+      checkPermission();
+      const res = await import_webextension_polyfill.default.storage[opts.storageArea].get(
+        items.map((item) => item.key)
+      );
+      return items.map((item) => ({
+        key: item.key,
+        value: res[item.key] ?? null
+      }));
+    },
+    async setItem(key, value) {
+      checkPermission();
+      await import_webextension_polyfill.default.storage[opts.storageArea].set({ [key]: value ?? null });
+    },
+    async setItems(items) {
+      checkPermission();
+      const map = items.reduce((map2, item) => {
+        map2[item.key] = item.value ?? null;
+        return map2;
+      }, {});
+      await import_webextension_polyfill.default.storage[opts.storageArea].set(map);
+    },
+    async removeItem(key) {
+      checkPermission();
+      await import_webextension_polyfill.default.storage[opts.storageArea].remove(key);
+    },
+    async getKeys() {
+      checkPermission();
+      const all = await import_webextension_polyfill.default.storage[opts.storageArea].get();
+      return Object.keys(all);
+    },
+    async clear() {
+      checkPermission();
+      await import_webextension_polyfill.default.storage[opts.storageArea].clear();
+    },
+    watch(callback) {
+      checkPermission();
+      _listeners.add(callback);
+      if (_listeners.size === 1) {
+        import_webextension_polyfill.default.storage[opts.storageArea].onChanged.addListener(
+          _storageListener
+        );
+      }
+      return () => {
+        _listeners.delete(callback);
+        if (_listeners.size === 0) {
+          import_webextension_polyfill.default.storage[opts.storageArea].onChanged.removeListener(
+            _storageListener
+          );
+        }
+      };
+    }
+  };
+});
+function createWebExtensionStorage() {
+  const storage2 = (0, import_unstorage.createStorage)();
+  storage2.mount("local", webExtensionDriver({ storageArea: "local" }));
+  storage2.mount("session", webExtensionDriver({ storageArea: "session" }));
+  storage2.mount("sync", webExtensionDriver({ storageArea: "sync" }));
+  storage2.mount("managed", webExtensionDriver({ storageArea: "managed" }));
+  return storage2;
+}
+var storage = createWebExtensionStorage();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  storage,
+  webExtensionDriver,
+  ...require("unstorage")
+});

package/dist/storage.d.cts

@@ -0,0 +1,15 @@
+import { Driver, Storage } from 'unstorage';
+export * from 'unstorage';
+
+/**
+ * @module wxt/storage
+ */
+
+interface WebExtensionDriverOptions {
+    storageArea: 'sync' | 'local' | 'managed' | 'session';
+}
+declare const webExtensionDriver: (opts: WebExtensionDriverOptions) => Driver;
+type StorageValue = null | string | number | boolean | object;
+declare const storage: Storage<StorageValue>;
+
+export { StorageValue, WebExtensionDriverOptions, storage, webExtensionDriver };

package/dist/storage.d.ts

@@ -0,0 +1,15 @@
+import { Driver, Storage } from 'unstorage';
+export * from 'unstorage';
+
+/**
+ * @module wxt/storage
+ */
+
+interface WebExtensionDriverOptions {
+    storageArea: 'sync' | 'local' | 'managed' | 'session';
+}
+declare const webExtensionDriver: (opts: WebExtensionDriverOptions) => Driver;
+type StorageValue = null | string | number | boolean | object;
+declare const storage: Storage<StorageValue>;
+
+export { StorageValue, WebExtensionDriverOptions, storage, webExtensionDriver };

package/dist/storage.js

@@ -0,0 +1,103 @@
+import "./chunk-YUG22S6W.js";
+
+// src/storage.ts
+import {
+  createStorage,
+  defineDriver
+} from "unstorage";
+import browser from "webextension-polyfill";
+export * from "unstorage";
+var webExtensionDriver = defineDriver((opts) => {
+  const checkPermission = () => {
+    if (browser.storage == null)
+      throw Error(
+        "You must request the 'storage' permission to use webExtensionDriver"
+      );
+  };
+  const _storageListener = (changes) => {
+    Object.entries(changes).forEach(([key, { newValue }]) => {
+      _listeners.forEach((callback) => {
+        callback(newValue ? "update" : "remove", key);
+      });
+    });
+  };
+  const _listeners = /* @__PURE__ */ new Set();
+  return {
+    name: "web-extension:" + opts.storageArea,
+    async hasItem(key) {
+      checkPermission();
+      const res = await browser.storage[opts.storageArea].get(key);
+      return res[key] != null;
+    },
+    async getItem(key) {
+      checkPermission();
+      const res = await browser.storage[opts.storageArea].get(key);
+      return res[key] ?? null;
+    },
+    async getItems(items) {
+      checkPermission();
+      const res = await browser.storage[opts.storageArea].get(
+        items.map((item) => item.key)
+      );
+      return items.map((item) => ({
+        key: item.key,
+        value: res[item.key] ?? null
+      }));
+    },
+    async setItem(key, value) {
+      checkPermission();
+      await browser.storage[opts.storageArea].set({ [key]: value ?? null });
+    },
+    async setItems(items) {
+      checkPermission();
+      const map = items.reduce((map2, item) => {
+        map2[item.key] = item.value ?? null;
+        return map2;
+      }, {});
+      await browser.storage[opts.storageArea].set(map);
+    },
+    async removeItem(key) {
+      checkPermission();
+      await browser.storage[opts.storageArea].remove(key);
+    },
+    async getKeys() {
+      checkPermission();
+      const all = await browser.storage[opts.storageArea].get();
+      return Object.keys(all);
+    },
+    async clear() {
+      checkPermission();
+      await browser.storage[opts.storageArea].clear();
+    },
+    watch(callback) {
+      checkPermission();
+      _listeners.add(callback);
+      if (_listeners.size === 1) {
+        browser.storage[opts.storageArea].onChanged.addListener(
+          _storageListener
+        );
+      }
+      return () => {
+        _listeners.delete(callback);
+        if (_listeners.size === 0) {
+          browser.storage[opts.storageArea].onChanged.removeListener(
+            _storageListener
+          );
+        }
+      };
+    }
+  };
+});
+function createWebExtensionStorage() {
+  const storage2 = createStorage();
+  storage2.mount("local", webExtensionDriver({ storageArea: "local" }));
+  storage2.mount("session", webExtensionDriver({ storageArea: "session" }));
+  storage2.mount("sync", webExtensionDriver({ storageArea: "sync" }));
+  storage2.mount("managed", webExtensionDriver({ storageArea: "managed" }));
+  return storage2;
+}
+var storage = createWebExtensionStorage();
+export {
+  storage,
+  webExtensionDriver
+};

package/dist/testing.cjs

@@ -285,7 +285,8 @@ function getUnimportOptions(config) {
     presets: [
       { package: "wxt/client" },
       { package: "wxt/browser" },
-      { package: "wxt/sandbox" }
+      { package: "wxt/sandbox" },
+      { package: "wxt/storage" }
     ],
     warn: config.logger.warn,
     dirs: ["components", "composables", "hooks", "utils"]
@@ -504,6 +505,30 @@ function webextensionPolyfillInlineDeps() {
   };
 }
 
+// src/core/vite-plugins/excludeBrowserPolyfill.ts
+function excludeBrowserPolyfill(config) {
+  const virtualId = "virtual:wxt-webextension-polyfill-disabled";
+  return {
+    name: "wxt:exclude-browser-polyfill",
+    config() {
+      if (config.experimental.includeBrowserPolyfill)
+        return;
+      return {
+        resolve: {
+          alias: {
+            "webextension-polyfill": virtualId
+          }
+        }
+      };
+    },
+    load(id) {
+      if (id === virtualId) {
+        return "export default chrome";
+      }
+    }
+  };
+}
+
 // src/core/utils/building/build-entrypoints.ts
 var vite2 = __toESM(require("vite"), 1);
 
@@ -687,7 +712,10 @@ async function getInternalConfig(inlineConfig, command) {
       template: mergedConfig.analysis?.template ?? "treemap"
     },
     userConfigMetadata: userConfigMetadata ?? {},
-    alias
+    alias,
+    experimental: {
+      includeBrowserPolyfill: mergedConfig.experimental?.includeBrowserPolyfill ?? true
+    }
   };
   finalConfig.vite = (env2) => resolveInternalViteConfig(env2, mergedConfig, finalConfig);
   return finalConfig;
@@ -748,6 +776,10 @@ function mergeInlineConfig(inlineConfig, userConfig) {
     alias: {
       ...userConfig.alias,
       ...inlineConfig.alias
+    },
+    experimental: {
+      ...userConfig.experimental,
+      ...inlineConfig.experimental
     }
   };
 }
@@ -800,6 +832,7 @@ async function resolveInternalViteConfig(env, mergedConfig, finalConfig) {
     internalVite.plugins.push(bundleAnalysis());
   }
   internalVite.plugins.push(globals(finalConfig));
+  internalVite.plugins.push(excludeBrowserPolyfill(finalConfig));
   return internalVite;
 }
 

package/dist/testing.d.cts

@@ -1,6 +1,6 @@
 export { FakeBrowser, fakeBrowser } from '@webext-core/fake-browser';
 import * as vite from 'vite';
-import { I as InlineConfig } from './external-9e212597.js';
+import { I as InlineConfig } from './external-9115d0fb.js';
 import 'webextension-polyfill';
 import 'unimport';
 import 'consola';

package/dist/testing.d.ts

@@ -1,6 +1,6 @@
 export { FakeBrowser, fakeBrowser } from '@webext-core/fake-browser';
 import * as vite from 'vite';
-import { I as InlineConfig } from './external-9e212597.js';
+import { I as InlineConfig } from './external-9115d0fb.js';
 import 'webextension-polyfill';
 import 'unimport';
 import 'consola';

package/dist/testing.js

@@ -6,7 +6,7 @@ import {
   unimport,
   webextensionPolyfillAlias,
   webextensionPolyfillInlineDeps
-} from "./chunk-2BIYR4TE.js";
+} from "./chunk-4ACVTNQN.js";
 import "./chunk-YUG22S6W.js";
 
 // src/testing/fake-browser.ts

package/dist/virtual/background-entrypoint.js

@@ -1,3 +1,21 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
 // src/virtual/background-entrypoint.ts
 import definition from "virtual:user-background";
 
@@ -47,21 +65,125 @@ function setupWebSocket(onMessage) {
 }
 
 // src/virtual/background-entrypoint.ts
-import browser3 from "webextension-polyfill";
+import browser4 from "webextension-polyfill";
 
-// src/client/utils/keep-service-worker-alive.ts
+// src/storage.ts
+var storage_exports = {};
+__export(storage_exports, {
+  storage: () => storage,
+  webExtensionDriver: () => webExtensionDriver
+});
+__reExport(storage_exports, unstorage_star);
+import {
+  createStorage,
+  defineDriver
+} from "unstorage";
 import browser from "webextension-polyfill";
+import * as unstorage_star from "unstorage";
+var webExtensionDriver = defineDriver((opts) => {
+  const checkPermission = () => {
+    if (browser.storage == null)
+      throw Error(
+        "You must request the 'storage' permission to use webExtensionDriver"
+      );
+  };
+  const _storageListener = (changes) => {
+    Object.entries(changes).forEach(([key, { newValue }]) => {
+      _listeners.forEach((callback) => {
+        callback(newValue ? "update" : "remove", key);
+      });
+    });
+  };
+  const _listeners = /* @__PURE__ */ new Set();
+  return {
+    name: "web-extension:" + opts.storageArea,
+    async hasItem(key) {
+      checkPermission();
+      const res = await browser.storage[opts.storageArea].get(key);
+      return res[key] != null;
+    },
+    async getItem(key) {
+      checkPermission();
+      const res = await browser.storage[opts.storageArea].get(key);
+      return res[key] ?? null;
+    },
+    async getItems(items) {
+      checkPermission();
+      const res = await browser.storage[opts.storageArea].get(
+        items.map((item) => item.key)
+      );
+      return items.map((item) => ({
+        key: item.key,
+        value: res[item.key] ?? null
+      }));
+    },
+    async setItem(key, value) {
+      checkPermission();
+      await browser.storage[opts.storageArea].set({ [key]: value ?? null });
+    },
+    async setItems(items) {
+      checkPermission();
+      const map = items.reduce((map2, item) => {
+        map2[item.key] = item.value ?? null;
+        return map2;
+      }, {});
+      await browser.storage[opts.storageArea].set(map);
+    },
+    async removeItem(key) {
+      checkPermission();
+      await browser.storage[opts.storageArea].remove(key);
+    },
+    async getKeys() {
+      checkPermission();
+      const all = await browser.storage[opts.storageArea].get();
+      return Object.keys(all);
+    },
+    async clear() {
+      checkPermission();
+      await browser.storage[opts.storageArea].clear();
+    },
+    watch(callback) {
+      checkPermission();
+      _listeners.add(callback);
+      if (_listeners.size === 1) {
+        browser.storage[opts.storageArea].onChanged.addListener(
+          _storageListener
+        );
+      }
+      return () => {
+        _listeners.delete(callback);
+        if (_listeners.size === 0) {
+          browser.storage[opts.storageArea].onChanged.removeListener(
+            _storageListener
+          );
+        }
+      };
+    }
+  };
+});
+function createWebExtensionStorage() {
+  const storage2 = createStorage();
+  storage2.mount("local", webExtensionDriver({ storageArea: "local" }));
+  storage2.mount("session", webExtensionDriver({ storageArea: "session" }));
+  storage2.mount("sync", webExtensionDriver({ storageArea: "sync" }));
+  storage2.mount("managed", webExtensionDriver({ storageArea: "managed" }));
+  return storage2;
+}
+var storage = createWebExtensionStorage();
+
+// src/client/utils/keep-service-worker-alive.ts
+import browser2 from "webextension-polyfill";
 function keepServiceWorkerAlive() {
   setInterval(async () => {
-    await browser.runtime.getPlatformInfo();
+    await browser2.runtime.getPlatformInfo();
   }, 5e3);
 }
 
 // src/client/utils/reload-content-scripts.ts
-import browser2 from "webextension-polyfill";
+import browser3 from "webextension-polyfill";
 import { MatchPattern } from "@webext-core/match-patterns";
 function reloadContentScript(contentScript) {
-  const manifest = browser2.runtime.getManifest();
+  const manifest = browser3.runtime.getManifest();
   if (manifest.manifest_version == 2) {
     void reloadContentScriptMv2(contentScript);
   } else {
@@ -71,17 +193,17 @@ function reloadContentScript(contentScript) {
 async function reloadContentScriptMv3(contentScript) {
   const id = `wxt:${contentScript.js[0]}`;
   logger.log("Reloading content script:", contentScript);
-  const registered = await browser2.scripting.getRegisteredContentScripts();
+  const registered = await browser3.scripting.getRegisteredContentScripts();
   logger.debug("Existing scripts:", registered);
   const existing = registered.find((cs) => cs.id === id);
   if (existing) {
     logger.debug("Updating content script", existing);
-    await browser2.scripting.updateContentScripts([{ ...contentScript, id }]);
+    await browser3.scripting.updateContentScripts([{ ...contentScript, id }]);
   } else {
     logger.debug("Registering new content script...");
-    await browser2.scripting.registerContentScripts([{ ...contentScript, id }]);
+    await browser3.scripting.registerContentScripts([{ ...contentScript, id }]);
   }
-  const allTabs = await browser2.tabs.query({});
+  const allTabs = await browser3.tabs.query({});
   const matchPatterns = contentScript.matches.map(
     (match) => new MatchPattern(match)
   );
@@ -91,7 +213,7 @@ async function reloadContentScriptMv3(contentScript) {
       return false;
     return !!matchPatterns.find((pattern) => pattern.includes(url));
   });
-  await Promise.all(matchingTabs.map((tab) => browser2.tabs.reload(tab.id)));
+  await Promise.all(matchingTabs.map((tab) => browser3.tabs.reload(tab.id)));
 }
 async function reloadContentScriptMv2(contentScript) {
   throw Error("TODO: reloadContentScriptMv2");
@@ -102,7 +224,7 @@ if (__COMMAND__ === "serve") {
   try {
     const ws = setupWebSocket((message) => {
       if (message.event === "wxt:reload-extension")
-        browser3.runtime.reload();
+        browser4.runtime.reload();
       if (message.event === "wxt:reload-content-script" && message.data != null)
         reloadContentScript(message.data);
     });
@@ -118,6 +240,11 @@ if (__COMMAND__ === "serve") {
   }
 }
 try {
+  if (import.meta.env.DEV) {
+    globalThis.wxt = {
+      storage
+    };
+  }
   const res = definition.main();
   if (res instanceof Promise) {
     console.warn(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",
@@ -56,11 +56,16 @@
       "require": "./dist/testing.cjs",
       "import": "./dist/testing.js",
       "types": "./dist/testing.d.ts"
+    },
+    "./storage": {
+      "require": "./dist/storage.cjs",
+      "import": "./dist/storage.js",
+      "types": "./dist/storage.d.ts"
     }
   },
   "dependencies": {
     "@types/webextension-polyfill": "^0.10.5",
-    "@webext-core/fake-browser": "^1.2.2",
+    "@webext-core/fake-browser": "^1.3.1",
     "@webext-core/isolated-element": "^1.0.4",
     "@webext-core/match-patterns": "^1.0.2",
     "async-mutex": "^0.4.0",
@@ -84,6 +89,7 @@
     "prompts": "^2.4.2",
     "rollup-plugin-visualizer": "^5.9.2",
     "unimport": "^3.4.0",
+    "unstorage": "^1.9.0",
     "vite": "^4.0.0 || ^5.0.0-0",
     "web-ext-run": "^0.1.0",
     "webextension-polyfill": "^0.10.0",