wxt 0.9.2 → 0.10.1

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-OKMB7FJI.js → chunk-U65ZYVCI.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "0.9.2";
+var version = "0.10.1";
 
 // 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"]
@@ -1394,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) {
@@ -1926,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.2";
+var version = "0.10.1";
 
 // 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"]
@@ -4072,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) {
@@ -4608,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;
@@ -5182,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/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"]
@@ -4082,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) {
@@ -4224,7 +4228,7 @@ function getChunkSortWeight(filename) {
 var import_picocolors3 = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "0.9.2";
+var version = "0.10.1";
 
 // src/core/utils/log/printHeader.ts
 var import_consola2 = require("consola");
@@ -4619,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;
@@ -5203,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

@@ -61,6 +61,6 @@ declare function prepare(config: InlineConfig): Promise<void>;
  */
 declare function zip(config?: InlineConfig): Promise<string[]>;
 
-var version = "0.9.2";
+var version = "0.10.1";
 
 export { BuildOutput, ExtensionRunnerConfig, InlineConfig, UserConfig, WxtDevServer, build, clean, createServer, defineConfig, defineRunnerConfig, initialize, prepare, version, zip };

package/dist/index.d.ts

@@ -61,6 +61,6 @@ declare function prepare(config: InlineConfig): Promise<void>;
  */
 declare function zip(config?: InlineConfig): Promise<string[]>;
 
-var version = "0.9.2";
+var version = "0.10.1";
 
 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-OKMB7FJI.js";
+} from "./chunk-U65ZYVCI.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"]

package/dist/testing.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.9.2",
+  "version": "0.10.1",
   "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",

package/dist/cli.d.cts

@@ -1,2 +0,0 @@
-
-export { }