wxt 0.7.4 → 0.8.0

package/dist/index.d.cts

@@ -391,6 +391,7 @@ interface PopupEntrypoint extends BaseEntrypoint {
         mv2Key?: 'browser_action' | 'page_action';
         defaultIcon?: Record<string, string>;
         defaultTitle?: string;
+        browserStyle?: boolean;
     } & BaseEntrypointOptions;
 }
 interface OptionsEntrypoint extends BaseEntrypoint {
@@ -453,6 +454,8 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      * - `"manual"` - Exclude the CSS from the manifest. You are responsible for manually loading it
      *   onto the page. Use `browser.runtime.getURL("content-scripts/<name>.css")` to get the file's
      *   URL
+     * - `"ui"` - Exclude the CSS from the manifest. CSS will be automatically added to your UI when
+     *   calling `createContentScriptUi`
      *
      * @default "manifest"
      */
@@ -462,11 +465,17 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      */
     main(ctx: ContentScriptContext): void | Promise<void>;
 }
-interface BackgroundScriptDefintition extends ExcludableEntrypoint {
+interface BackgroundDefinition extends ExcludableEntrypoint {
     type?: PerBrowserOption<'module'>;
     persistent?: PerBrowserOption<boolean>;
     main(): void;
 }
+interface UnlistedScriptDefinition extends ExcludableEntrypoint {
+    /**
+     * Main function executed when the unlisted script is ran.
+     */
+    main(): void | Promise<void>;
+}
 type PerBrowserOption<T> = T | {
     [browser: TargetBrowser]: T;
 };
@@ -565,7 +574,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.7.4";
+var version = "0.8.0";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 
@@ -581,4 +590,4 @@ declare function build(config: InlineConfig): Promise<BuildOutput>;
  */
 declare function createServer(config?: InlineConfig): Promise<WxtDevServer>;
 
-export { BackgroundEntrypoint, BackgroundScriptDefintition, BaseEntrypoint, BaseEntrypointOptions, BuildOutput, BuildStepOutput, ConfigEnv, ContentScriptDefinition, ContentScriptEntrypoint, Entrypoint, ExcludableEntrypoint, ExtensionRunnerConfig, GenericEntrypoint, InlineConfig, Logger, OnContentScriptStopped, OptionsEntrypoint, PerBrowserOption, PopupEntrypoint, TargetBrowser, TargetManifestVersion, UserConfig, UserManifest, UserManifestFn, WxtDevServer, WxtInlineViteConfig, WxtViteConfig, build, clean, createServer, defineConfig, defineRunnerConfig, version };
+export { BackgroundDefinition, BackgroundEntrypoint, BaseEntrypoint, BaseEntrypointOptions, BuildOutput, BuildStepOutput, ConfigEnv, ContentScriptDefinition, ContentScriptEntrypoint, Entrypoint, ExcludableEntrypoint, ExtensionRunnerConfig, GenericEntrypoint, InlineConfig, Logger, OnContentScriptStopped, OptionsEntrypoint, PerBrowserOption, PopupEntrypoint, TargetBrowser, TargetManifestVersion, UnlistedScriptDefinition, UserConfig, UserManifest, UserManifestFn, WxtDevServer, WxtInlineViteConfig, WxtViteConfig, build, clean, createServer, defineConfig, defineRunnerConfig, version };

package/dist/index.d.ts

@@ -391,6 +391,7 @@ interface PopupEntrypoint extends BaseEntrypoint {
         mv2Key?: 'browser_action' | 'page_action';
         defaultIcon?: Record<string, string>;
         defaultTitle?: string;
+        browserStyle?: boolean;
     } & BaseEntrypointOptions;
 }
 interface OptionsEntrypoint extends BaseEntrypoint {
@@ -453,6 +454,8 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      * - `"manual"` - Exclude the CSS from the manifest. You are responsible for manually loading it
      *   onto the page. Use `browser.runtime.getURL("content-scripts/<name>.css")` to get the file's
      *   URL
+     * - `"ui"` - Exclude the CSS from the manifest. CSS will be automatically added to your UI when
+     *   calling `createContentScriptUi`
      *
      * @default "manifest"
      */
@@ -462,11 +465,17 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      */
     main(ctx: ContentScriptContext): void | Promise<void>;
 }
-interface BackgroundScriptDefintition extends ExcludableEntrypoint {
+interface BackgroundDefinition extends ExcludableEntrypoint {
     type?: PerBrowserOption<'module'>;
     persistent?: PerBrowserOption<boolean>;
     main(): void;
 }
+interface UnlistedScriptDefinition extends ExcludableEntrypoint {
+    /**
+     * Main function executed when the unlisted script is ran.
+     */
+    main(): void | Promise<void>;
+}
 type PerBrowserOption<T> = T | {
     [browser: TargetBrowser]: T;
 };
@@ -565,7 +574,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.7.4";
+var version = "0.8.0";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 
@@ -581,4 +590,4 @@ declare function build(config: InlineConfig): Promise<BuildOutput>;
  */
 declare function createServer(config?: InlineConfig): Promise<WxtDevServer>;
 
-export { BackgroundEntrypoint, BackgroundScriptDefintition, BaseEntrypoint, BaseEntrypointOptions, BuildOutput, BuildStepOutput, ConfigEnv, ContentScriptDefinition, ContentScriptEntrypoint, Entrypoint, ExcludableEntrypoint, ExtensionRunnerConfig, GenericEntrypoint, InlineConfig, Logger, OnContentScriptStopped, OptionsEntrypoint, PerBrowserOption, PopupEntrypoint, TargetBrowser, TargetManifestVersion, UserConfig, UserManifest, UserManifestFn, WxtDevServer, WxtInlineViteConfig, WxtViteConfig, build, clean, createServer, defineConfig, defineRunnerConfig, version };
+export { BackgroundDefinition, BackgroundEntrypoint, BaseEntrypoint, BaseEntrypointOptions, BuildOutput, BuildStepOutput, ConfigEnv, ContentScriptDefinition, ContentScriptEntrypoint, Entrypoint, ExcludableEntrypoint, ExtensionRunnerConfig, GenericEntrypoint, InlineConfig, Logger, OnContentScriptStopped, OptionsEntrypoint, PerBrowserOption, PopupEntrypoint, TargetBrowser, TargetManifestVersion, UnlistedScriptDefinition, UserConfig, UserManifest, UserManifestFn, WxtDevServer, WxtInlineViteConfig, WxtViteConfig, build, clean, createServer, defineConfig, defineRunnerConfig, version };

package/dist/index.js

@@ -1208,7 +1208,11 @@ function getUnimportOptions(config) {
   const defaultOptions = {
     debugLog: config.logger.debug,
     imports: [{ name: "defineConfig", from: "wxt" }],
-    presets: [{ package: "wxt/client" }, { package: "wxt/browser" }],
+    presets: [
+      { package: "wxt/client" },
+      { package: "wxt/browser" },
+      { package: "wxt/sandbox" }
+    ],
     warn: config.logger.warn,
     dirs: ["components", "composables", "hooks", "utils"]
   };
@@ -1249,7 +1253,7 @@ function unimport(config) {
 // src/core/vite-plugins/virtualEntrypoint.ts
 import fs4 from "fs-extra";
 import { resolve as resolve5 } from "path";
-function virtualEntrypoin(type, config) {
+function virtualEntrypoint(type, config) {
   const virtualId = `virtual:wxt-${type}?`;
   const resolvedVirtualId = `\0${virtualId}`;
   return {
@@ -1574,10 +1578,13 @@ async function resolveInternalViteConfig(env, mergedConfig, finalConfig) {
   internalVite.plugins.push(devHtmlPrerender(finalConfig));
   internalVite.plugins.push(unimport(finalConfig));
   internalVite.plugins.push(
-    virtualEntrypoin("background", finalConfig)
+    virtualEntrypoint("background", finalConfig)
   );
   internalVite.plugins.push(
-    virtualEntrypoin("content-script", finalConfig)
+    virtualEntrypoint("content-script", finalConfig)
+  );
+  internalVite.plugins.push(
+    virtualEntrypoint("unlisted-script", finalConfig)
   );
   internalVite.plugins.push(devServerGlobals(finalConfig));
   internalVite.plugins.push(tsconfigPaths(finalConfig));
@@ -1742,7 +1749,11 @@ async function buildEntrypoints(groups, config, spinner) {
   return { publicAssets, steps };
 }
 async function buildSingleEntrypoint(entrypoint, config) {
-  const isVirtual = ["background", "content-script"].includes(entrypoint.type);
+  const isVirtual = [
+    "background",
+    "content-script",
+    "unlisted-script"
+  ].includes(entrypoint.type);
   const entry = isVirtual ? `virtual:wxt-${entrypoint.type}?${entrypoint.inputPath}` : entrypoint.inputPath;
   const plugins = [];
   if (entrypoint.type === "content-script-style" || entrypoint.type === "unlisted-style") {
@@ -1881,6 +1892,7 @@ function removeImportStatements(text) {
 function removeProjectImportStatements(text) {
   const noImports = removeImportStatements(text);
   return `import { defineContentScript, defineBackground } from 'wxt/client';
+import { defineUnlistedScript } from 'wxt/sandbox';
 
 ${noImports}`;
 }
@@ -1906,7 +1918,6 @@ async function importEntrypointFile(path9, config) {
     cache: false,
     debug: config.debug,
     esmResolve: true,
-    interopDefault: true,
     alias: {
       "webextension-polyfill": resolve7(
         config.root,
@@ -1925,7 +1936,8 @@ async function importEntrypointFile(path9, config) {
     }
   });
   try {
-    return await jiti(path9);
+    const res = await jiti(path9);
+    return res.default;
   } catch (err) {
     config.logger.error(err);
     throw err;
@@ -1983,15 +1995,14 @@ ${JSON.stringify(
           hasBackground = true;
           break;
         case "content-script":
-          entrypoint = await getContentScriptEntrypoint(
-            config,
-            getEntrypointName(config.entrypointsDir, path9),
-            path9
-          );
+          entrypoint = await getContentScriptEntrypoint(config, path9);
           break;
         case "unlisted-page":
           entrypoint = await getUnlistedPageEntrypoint(config, path9);
           break;
+        case "unlisted-script":
+          entrypoint = await getUnlistedScriptEntrypoint(config, path9);
+          break;
         case "content-script-style":
           entrypoint = {
             type,
@@ -2084,9 +2095,13 @@ async function getPopupEntrypoint(config, path9) {
       );
     }
   }
-  const mv2KeyContent = document.querySelector("meta[name='manifest.type']")?.getAttribute("content");
-  if (mv2KeyContent) {
-    options.mv2Key = mv2KeyContent === "page_action" ? "page_action" : "browser_action";
+  const mv2TypeContent = document.querySelector("meta[name='manifest.type']")?.getAttribute("content");
+  if (mv2TypeContent) {
+    options.mv2Key = mv2TypeContent === "page_action" ? "page_action" : "browser_action";
+  }
+  const browserStyleContent = document.querySelector("meta[name='manifest.browser_style']")?.getAttribute("content");
+  if (browserStyleContent) {
+    options.browserStyle = browserStyleContent === "true";
   }
   return {
     type: "popup",
@@ -2131,19 +2146,46 @@ async function getUnlistedPageEntrypoint(config, path9) {
     options: getHtmlBaseOptions(document)
   };
 }
+async function getUnlistedScriptEntrypoint(config, path9) {
+  const name = getEntrypointName(config.entrypointsDir, path9);
+  const defaultExport = await importEntrypointFile(
+    path9,
+    config
+  );
+  if (defaultExport == null) {
+    throw Error(
+      `${name}: Default export not found, did you forget to call "export default defineUnlistedScript(...)"?`
+    );
+  }
+  const { main: _, ...moduleOptions } = defaultExport;
+  const options = moduleOptions;
+  return {
+    type: "unlisted-script",
+    name,
+    inputPath: path9,
+    outputDir: config.outDir,
+    options
+  };
+}
 async function getBackgroundEntrypoint(config, path9) {
+  const name = "background";
   let options = {};
   if (path9 !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
-    const defaultExport = await importEntrypointFile(path9, config);
+    const defaultExport = await importEntrypointFile(
+      path9,
+      config
+    );
     if (defaultExport == null) {
-      throw Error("Background script does not have a default export");
+      throw Error(
+        `${name}: Default export not found, did you forget to call "export default defineBackground(...)"?`
+      );
     }
     const { main: _, ...moduleOptions } = defaultExport;
     options = moduleOptions;
   }
   return {
     type: "background",
-    name: "background",
+    name,
     inputPath: path9,
     outputDir: config.outDir,
     options: {
@@ -2153,14 +2195,17 @@ async function getBackgroundEntrypoint(config, path9) {
     }
   };
 }
-async function getContentScriptEntrypoint(config, name, path9) {
+async function getContentScriptEntrypoint(config, path9) {
+  const name = getEntrypointName(config.entrypointsDir, path9);
   const { main: _, ...options } = await importEntrypointFile(path9, config);
   if (options == null) {
-    throw Error(`Content script ${name} does not have a default export`);
+    throw Error(
+      `${name}: Default export not found, did you forget to call "export default defineContentScript(...)"?`
+    );
   }
   return {
     type: "content-script",
-    name: getEntrypointName(config.entrypointsDir, path9),
+    name,
     inputPath: path9,
     outputDir: resolve8(config.outDir, CONTENT_SCRIPT_OUT_DIR),
     options
@@ -2473,18 +2518,23 @@ var ContentSecurityPolicy = class _ContentSecurityPolicy {
 };
 
 // src/core/utils/content-scripts.ts
-function hashContentScriptOptions(options) {
+function hashContentScriptOptions(options, config) {
+  const simplifiedOptions = mapWxtOptionsToContentScript(options, config);
+  Object.keys(simplifiedOptions).forEach((key) => {
+    if (simplifiedOptions[key] == null)
+      delete simplifiedOptions[key];
+  });
   const withDefaults = {
-    excludeGlobs: [],
-    excludeMatches: [],
-    includeGlobs: [],
-    matchAboutBlank: false,
-    matchOriginAsFallback: false,
-    runAt: "document_idle",
-    allFrames: false,
+    exclude_globs: [],
+    exclude_matches: [],
+    include_globs: [],
+    match_about_blank: false,
+    run_at: "document_idle",
+    all_frames: false,
+    // @ts-expect-error - not in type
+    match_origin_as_fallback: false,
     world: "ISOLATED",
-    // TODO: strip undefined fields from options object to improve content script grouping.
-    ...options
+    ...simplifiedOptions
   };
   return JSON.stringify(
     Object.entries(withDefaults).map(([key, value]) => {
@@ -2557,13 +2607,17 @@ async function writeManifest(manifest, output, config) {
 }
 async function generateMainfest(entrypoints, buildOutput, config) {
   const pkg = await getPackageJson(config);
+  const versionName = config.manifest.version_name ?? pkg?.version;
+  const version3 = config.manifest.version ?? simplifyVersion(pkg?.version);
   const baseManifest = {
     manifest_version: config.manifestVersion,
     name: pkg?.name,
     description: pkg?.description,
-    version: pkg?.version && simplifyVersion(pkg.version),
-    // Only add the version name to chromium and if the user hasn't specified a custom version.
-    version_name: config.browser !== "firefox" && !config.manifest.version ? pkg?.version : void 0,
+    version: version3,
+    version_name: (
+      // Firefox doesn't support version_name
+      config.browser === "firefox" || versionName === version3 ? void 0 : versionName
+    ),
     short_name: pkg?.shortName,
     icons: discoverIcons(buildOutput)
   };
@@ -2757,7 +2811,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
       );
     } else {
       const hashToEntrypointsMap = contentScripts.reduce((map, script) => {
-        const hash = hashContentScriptOptions(script.options);
+        const hash = hashContentScriptOptions(script.options, config);
         if (map.has(hash))
           map.get(hash)?.push(script);
         else
@@ -4553,7 +4607,7 @@ async function clean(root = process.cwd()) {
 }
 
 // package.json
-var version2 = "0.7.4";
+var version2 = "0.8.0";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {