wxt 0.6.6 → 0.7.1-alpha1

package/dist/index.d.cts

@@ -14,8 +14,9 @@ import { PluginVisualizerOptions } from 'rollup-plugin-visualizer';
 declare class ContentScriptContext extends AbortController {
     #private;
     private readonly contentScriptName;
+    readonly options?: Omit<ContentScriptDefinition, "main"> | undefined;
     static SCRIPT_STARTED_MESSAGE_TYPE: string;
-    constructor(contentScriptName: string);
+    constructor(contentScriptName: string, options?: Omit<ContentScriptDefinition, "main"> | undefined);
     get isInvalid(): boolean;
     get isValid(): boolean;
     /**
@@ -444,6 +445,18 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      * @default "ISOLATED"
      */
     world?: 'ISOLATED' | 'MAIN';
+    /**
+     * Customize how imported/generated styles are injected with the content script. Regardless of the
+     * mode selected, CSS will always be built and included in the output directory.
+     *
+     * - `"manifest"` - Include the CSS in the manifest, under the content script's `css` array.
+     * - `"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
+     *
+     * @default "manifest"
+     */
+    cssInjectionMode?: 'manifest' | 'manual' | 'ui';
     /**
      * Main function executed when the content script is loaded.
      */
@@ -548,7 +561,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.6.6";
+var version = "0.7.1-alpha1";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.d.ts

@@ -14,8 +14,9 @@ import { PluginVisualizerOptions } from 'rollup-plugin-visualizer';
 declare class ContentScriptContext extends AbortController {
     #private;
     private readonly contentScriptName;
+    readonly options?: Omit<ContentScriptDefinition, "main"> | undefined;
     static SCRIPT_STARTED_MESSAGE_TYPE: string;
-    constructor(contentScriptName: string);
+    constructor(contentScriptName: string, options?: Omit<ContentScriptDefinition, "main"> | undefined);
     get isInvalid(): boolean;
     get isValid(): boolean;
     /**
@@ -444,6 +445,18 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      * @default "ISOLATED"
      */
     world?: 'ISOLATED' | 'MAIN';
+    /**
+     * Customize how imported/generated styles are injected with the content script. Regardless of the
+     * mode selected, CSS will always be built and included in the output directory.
+     *
+     * - `"manifest"` - Include the CSS in the manifest, under the content script's `css` array.
+     * - `"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
+     *
+     * @default "manifest"
+     */
+    cssInjectionMode?: 'manifest' | 'manual' | 'ui';
     /**
      * Main function executed when the content script is loaded.
      */
@@ -548,7 +561,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.6.6";
+var version = "0.7.1-alpha1";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.js

@@ -1347,13 +1347,15 @@ function getEntrypointGlobals(config, entrypointName) {
 // src/core/utils/getInternalConfig.ts
 async function getInternalConfig(inlineConfig, command) {
   let userConfig = {};
+  let userConfigMetadata;
   if (inlineConfig.configFile !== false) {
-    const loaded = await loadConfig({
+    const { config: loadedConfig, ...metadata } = await loadConfig({
       name: "wxt",
       cwd: inlineConfig.root ?? process.cwd(),
       rcFile: false
     });
-    userConfig = loaded.config ?? {};
+    userConfig = loadedConfig ?? {};
+    userConfigMetadata = metadata;
   }
   const mergedConfig = mergeInlineConfig(inlineConfig, userConfig);
   const debug = mergedConfig.debug ?? false;
@@ -1415,7 +1417,8 @@ async function getInternalConfig(inlineConfig, command) {
     analysis: {
       enabled: mergedConfig.analysis?.enabled ?? false,
       template: mergedConfig.analysis?.template ?? "treemap"
-    }
+    },
+    userConfigMetadata: userConfigMetadata ?? {}
   };
   finalConfig.vite = (env2) => resolveInternalViteConfig(env2, mergedConfig, finalConfig);
   return finalConfig;
@@ -1701,10 +1704,15 @@ async function buildSingleEntrypoint(entrypoint, config) {
             config.outDir,
             ".js"
           ),
-          // Output content script CSS to assets/ with a hash to prevent conflicts. Defaults to
-          // "[name].[ext]" in lib mode, which usually results in "style.css". That means multiple
-          // content scripts with styles would overwrite each other if it weren't changed below.
-          assetFileNames: `assets/${entrypoint.name}.[ext]`
+          // Output content script CSS to `content-scripts/`, but all other scripts are written to
+          // `assets/`.
+          assetFileNames: ({ name }) => {
+            if (entrypoint.type === "content-script" && name?.endsWith("css")) {
+              return `content-scripts/${entrypoint.name}.[ext]`;
+            } else {
+              return `assets/${entrypoint.name}.[ext]`;
+            }
+          }
         }
       }
     },
@@ -2331,14 +2339,14 @@ async function writeTsConfigFile(mainReference, config) {
     "lib": ["DOM", "WebWorker"],
     "skipLibCheck": true,
     "paths": {
-      "@@": ["${rootPath}"],
-      "@@/*": ["${rootPath}/*"],
-      "~~": ["${rootPath}"],
-      "~~/*": ["${rootPath}/*"],
       "@": ["${srcPath}"],
       "@/*": ["${srcPath}/*"],
       "~": ["${srcPath}"],
-      "~/*": ["${srcPath}/*"]
+      "~/*": ["${srcPath}/*"],
+      "@@": ["${rootPath}"],
+      "@@/*": ["${rootPath}/*"],
+      "~~": ["${rootPath}"],
+      "~~/*": ["${rootPath}/*"]
     }
   },
   "include": [
@@ -2452,6 +2460,7 @@ async function getPackageJson(config) {
 
 // src/core/utils/manifest.ts
 import { produce } from "immer";
+import * as vite4 from "vite";
 async function writeManifest(manifest, output, config) {
   const str = config.mode === "production" ? JSON.stringify(manifest) : JSON.stringify(manifest, null, 2);
   await fs12.ensureDir(config.outDir);
@@ -2466,34 +2475,37 @@ async function writeManifest(manifest, output, config) {
 }
 async function generateMainfest(entrypoints, buildOutput, config) {
   const pkg = await getPackageJson(config);
-  const manifest = Object.assign(
-    {
-      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,
-      short_name: pkg?.shortName,
-      icons: discoverIcons(buildOutput)
-    },
-    config.manifest
+  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,
+    short_name: pkg?.shortName,
+    icons: discoverIcons(buildOutput)
+  };
+  const userManifest = config.manifest;
+  const manifest = vite4.mergeConfig(
+    baseManifest,
+    userManifest
   );
   addEntrypoints(manifest, entrypoints, buildOutput, config);
   if (config.command === "serve")
     addDevModeCsp(manifest, config);
   if (config.command === "serve")
     addDevModePermissions(manifest, config);
-  if (manifest.name == null)
+  const finalManifest = produce(manifest, config.transformManifest);
+  if (finalManifest.name == null)
     throw Error(
       "Manifest 'name' is missing. Either:\n1. Set the name in your <rootDir>/package.json\n2. Set a name via the manifest option in your wxt.config.ts"
     );
-  if (manifest.version == null) {
+  if (finalManifest.version == null) {
     throw Error(
       "Manifest 'version' is missing. Either:\n1. Add a version in your <rootDir>/package.json\n2. Pass the version via the manifest option in your wxt.config.ts"
     );
   }
-  return produce(manifest, config.transformManifest);
+  return finalManifest;
 }
 function simplifyVersion(versionName) {
   const version3 = /^((0|[1-9][0-9]{0,8})([.](0|[1-9][0-9]{0,8})){0,3}).*$/.exec(
@@ -2646,6 +2658,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
     }
   }
   if (contentScripts?.length) {
+    const cssMap = getContentScriptsCssMap(buildOutput, contentScripts);
     if (config.command === "serve" && config.manifestVersion === 3) {
       const hostPermissions = new Set(manifest.host_permissions ?? []);
       contentScripts.forEach((script) => {
@@ -2670,7 +2683,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
           ...mapWxtOptionsToContentScript(scripts[0].options),
           // TOOD: Sorting css and js arrays here so we get consistent test results... but we
           // shouldn't have to. Where is the inconsistency coming from?
-          css: getContentScriptCssFiles(scripts, buildOutput)?.sort(),
+          css: getContentScriptCssFiles(scripts, cssMap)?.sort(),
           js: scripts.map(
             (entry) => getEntrypointBundlePath(entry, config.outDir, ".js")
           ).sort()
@@ -2681,6 +2694,15 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
         manifest.content_scripts.push(...newContentScripts);
       }
     }
+    const contentScriptCssResources = getContentScriptCssWebAccessibleResources(
+      config,
+      contentScripts,
+      cssMap
+    );
+    if (contentScriptCssResources.length > 0) {
+      manifest.web_accessible_resources ??= [];
+      manifest.web_accessible_resources.push(...contentScriptCssResources);
+    }
   }
 }
 function discoverIcons(buildOutput) {
@@ -2745,20 +2767,52 @@ function addDevModePermissions(manifest, config) {
   if (config.manifestVersion === 3)
     addPermission(manifest, "scripting");
 }
-function getContentScriptCssFiles(contentScripts, buildOutput) {
+function getContentScriptCssFiles(contentScripts, contentScriptCssMap) {
   const css = [];
-  const allChunks = buildOutput.steps.flatMap((step) => step.chunks);
   contentScripts.forEach((script) => {
-    const relatedCss = allChunks.find(
-      (chunk) => chunk.fileName === `assets/${script.name}.css`
-    );
-    if (relatedCss)
-      css.push(relatedCss.fileName);
+    if (script.options.cssInjectionMode === "manual" || script.options.cssInjectionMode === "ui")
+      return;
+    const cssFile = contentScriptCssMap[script.name];
+    if (cssFile == null)
+      return;
+    if (cssFile)
+      css.push(cssFile);
   });
   if (css.length > 0)
     return css;
   return void 0;
 }
+function getContentScriptCssWebAccessibleResources(config, contentScripts, contentScriptCssMap) {
+  const resources = [];
+  contentScripts.forEach((script) => {
+    if (script.options.cssInjectionMode !== "ui")
+      return;
+    const cssFile = contentScriptCssMap[script.name];
+    if (cssFile == null)
+      return;
+    if (config.manifestVersion === 2) {
+      resources.push(cssFile);
+    } else {
+      resources.push({
+        resources: [cssFile],
+        matches: script.options.matches
+      });
+    }
+  });
+  return resources;
+}
+function getContentScriptsCssMap(buildOutput, scripts) {
+  const map = {};
+  const allChunks = buildOutput.steps.flatMap((step) => step.chunks);
+  scripts.forEach((script) => {
+    const relatedCss = allChunks.find(
+      (chunk) => chunk.fileName === `content-scripts/${script.name}.css`
+    );
+    if (relatedCss != null)
+      map[script.name] = relatedCss.fileName;
+  });
+  return map;
+}
 function addPermission(manifest, permission) {
   manifest.permissions ??= [];
   if (manifest.permissions.includes(permission))
@@ -2774,7 +2828,7 @@ function addHostPermission(manifest, hostPermission) {
 
 // src/core/build.ts
 import pc3 from "picocolors";
-import * as vite4 from "vite";
+import * as vite5 from "vite";
 import fs14 from "fs-extra";
 
 // src/core/utils/groupEntrypoints.ts
@@ -4078,7 +4132,7 @@ async function buildInternal(config) {
   const target = `${config.browser}-mv${config.manifestVersion}`;
   config.logger.info(
     `${verb} ${pc3.cyan(target)} for ${pc3.cyan(config.mode)} with ${pc3.green(
-      `Vite ${vite4.version}`
+      `Vite ${vite5.version}`
     )}`
   );
   const startTime = Date.now();
@@ -4156,7 +4210,7 @@ async function combineAnalysisStats(config) {
 }
 
 // src/core/server.ts
-import * as vite5 from "vite";
+import * as vite6 from "vite";
 
 // src/core/runners/wsl.ts
 import { relative as relative5 } from "node:path";
@@ -4301,8 +4355,8 @@ async function getServerInfo() {
 }
 async function setupServer(serverInfo, config) {
   const runner = await createExtensionRunner(config);
-  const viteServer = await vite5.createServer(
-    vite5.mergeConfig(serverInfo, await config.vite(config.env))
+  const viteServer = await vite6.createServer(
+    vite6.mergeConfig(serverInfo, await config.vite(config.env))
   );
   const start = async () => {
     await viteServer.listen(server.port);
@@ -4347,10 +4401,15 @@ function reloadContentScripts(steps, config, server) {
       if (Array.isArray(entry) || entry.type !== "content-script")
         return;
       const js = [getEntrypointBundlePath(entry, config.outDir, ".js")];
-      const css = getContentScriptCssFiles([entry], server.currentOutput);
-      const { include: _1, exclude: _2, ...options } = entry.options;
+      const cssMap = getContentScriptsCssMap(server.currentOutput, [entry]);
+      const css = getContentScriptCssFiles([entry], cssMap);
       server.reloadContentScript({
-        ...options,
+        allFrames: entry.options.allFrames,
+        excludeMatches: entry.options.excludeMatches,
+        matches: entry.options.matches,
+        runAt: entry.options.runAt,
+        // @ts-expect-error: Chrome accepts this, not typed in webextension-polyfill (https://developer.chrome.com/docs/extensions/reference/scripting/#type-RegisteredContentScript)
+        world: entry.options.world,
         js,
         css
       });
@@ -4402,7 +4461,7 @@ async function clean(root = process.cwd()) {
 }
 
 // package.json
-var version2 = "0.6.6";
+var version2 = "0.7.1-alpha1";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {