wxt 0.7.0 → 0.7.1

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;
     /**
@@ -455,7 +456,7 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      *
      * @default "manifest"
      */
-    cssInjectionMode?: 'manifest' | 'manual';
+    cssInjectionMode?: 'manifest' | 'manual' | 'ui';
     /**
      * Main function executed when the content script is loaded.
      */
@@ -560,7 +561,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.7.0";
+var version = "0.7.1";
 
 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;
     /**
@@ -455,7 +456,7 @@ interface ContentScriptDefinition extends ExcludableEntrypoint {
      *
      * @default "manifest"
      */
-    cssInjectionMode?: 'manifest' | 'manual';
+    cssInjectionMode?: 'manifest' | 'manual' | 'ui';
     /**
      * Main function executed when the content script is loaded.
      */
@@ -560,7 +561,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.7.0";
+var version = "0.7.1";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.js

@@ -2460,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);
@@ -2474,18 +2475,20 @@ 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")
@@ -2655,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) => {
@@ -2679,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()
@@ -2690,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) {
@@ -2754,22 +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) => {
-    if (script.options.cssInjectionMode === "manual")
+    if (script.options.cssInjectionMode === "manual" || script.options.cssInjectionMode === "ui")
       return;
-    const relatedCss = allChunks.find(
-      (chunk) => chunk.fileName === `content-scripts/${script.name}.css`
-    );
-    if (relatedCss)
-      css.push(relatedCss.fileName);
+    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))
@@ -2785,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
@@ -4089,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();
@@ -4167,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";
@@ -4312,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);
@@ -4358,7 +4401,8 @@ 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 cssMap = getContentScriptsCssMap(server.currentOutput, [entry]);
+      const css = getContentScriptCssFiles([entry], cssMap);
       server.reloadContentScript({
         allFrames: entry.options.allFrames,
         excludeMatches: entry.options.excludeMatches,
@@ -4417,7 +4461,7 @@ async function clean(root = process.cwd()) {
 }
 
 // package.json
-var version2 = "0.7.0";
+var version2 = "0.7.1";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {