wxt 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vite from 'vite';
-import { Manifest } from 'webextension-polyfill';
+import { Manifest, Scripting } from 'webextension-polyfill';
 import { UnimportOptions } from 'unimport';
 
 interface InlineConfig {
@@ -146,7 +146,7 @@ interface WxtDevServer extends vite.ViteDevServer {
      *
      * @param contentScript The manifest definition for a content script
      */
-    reloadContentScript: (contentScript: Manifest.ContentScript) => void;
+    reloadContentScript: (contentScript: Omit<Scripting.RegisteredContentScript, 'id'>) => void;
 }
 type TargetBrowser = 'chrome' | 'firefox' | 'safari' | 'edge' | 'opera';
 type TargetManifestVersion = 2 | 3;
@@ -224,11 +224,50 @@ interface OptionsEntrypoint extends BaseEntrypoint {
 type Entrypoint = GenericEntrypoint | BackgroundEntrypoint | ContentScriptEntrypoint | PopupEntrypoint | OptionsEntrypoint;
 type OnContentScriptStopped = (cb: () => void) => void;
 interface ContentScriptDefinition {
-    matches: string[];
-    runAt?: 'document_start' | 'document_end' | 'document_idle';
-    matchAboutBlank?: boolean;
+    matches: Manifest.ContentScript['matches'];
+    /**
+     * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+     * @default "documentIdle"
+     */
+    runAt?: Manifest.ContentScript['run_at'];
+    /**
+     * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+     * @default false
+     */
+    matchAboutBlank?: Manifest.ContentScript['match_about_blank'];
+    /**
+     * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+     * @default []
+     */
+    excludeMatches?: Manifest.ContentScript['exclude_matches'];
+    /**
+     * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+     * @default []
+     */
+    includeGlobs?: Manifest.ContentScript['include_globs'];
+    /**
+     * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+     * @default []
+     */
+    excludeGlobs?: Manifest.ContentScript['exclude_globs'];
+    /**
+     * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+     * @default false
+     */
+    allFrames?: Manifest.ContentScript['all_frames'];
+    /**
+     * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+     * @default false
+     */
     matchOriginAsFallback?: boolean;
+    /**
+     * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
+     * @default "ISOLATED"
+     */
     world?: 'ISOLATED' | 'MAIN';
+    /**
+     * Main function executed when the content script is loaded.
+     */
     main(): void | Promise<void>;
 }
 interface BackgroundScriptDefintition {
@@ -314,7 +353,7 @@ interface ExtensionRunnerConfig {
 
 type EntrypointGroup = Entrypoint | Entrypoint[];
 
-var version = "0.2.0";
+var version = "0.2.2";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.js

@@ -297,23 +297,6 @@ function tsconfigPaths(config) {
   });
 }
 
-// src/core/vite-plugins/hmrLogger.ts
-import { relative as relative3 } from "path";
-import pc from "picocolors";
-function hmrLogger(config) {
-  return {
-    name: "wxt:hmr-logger",
-    apply: "serve",
-    handleHotUpdate(ctx) {
-      if (ctx.file.startsWith(config.srcDir) && !ctx.file.startsWith(config.wxtDir) && !ctx.file.endsWith(".html")) {
-        config.logger.info(
-          "Hot reload: " + pc.dim(relative3(process.cwd(), ctx.file))
-        );
-      }
-    }
-  };
-}
-
 // src/core/utils/createFsCache.ts
 import fs3, { ensureDir as ensureDir2 } from "fs-extra";
 import { dirname as dirname3, resolve as resolve5 } from "path";
@@ -467,7 +450,6 @@ async function getInternalConfig(config, command) {
   );
   finalConfig.vite.plugins.push(devServerGlobals(finalConfig));
   finalConfig.vite.plugins.push(tsconfigPaths(finalConfig));
-  finalConfig.vite.plugins.push(hmrLogger(finalConfig));
   finalConfig.vite.define ??= {};
   getGlobals(finalConfig).forEach((global) => {
     finalConfig.vite.define[global.name] = JSON.stringify(global.value);
@@ -479,7 +461,7 @@ async function resolveManifestConfig(env, manifest) {
 }
 
 // src/index.ts
-import pc4 from "picocolors";
+import pc3 from "picocolors";
 import * as vite5 from "vite";
 
 // src/core/utils/arrays.ts
@@ -576,7 +558,7 @@ function findEffectedSteps(changedFile, currentOutput) {
 // src/index.ts
 import { Mutex } from "async-mutex";
 import { consola as consola2 } from "consola";
-import { relative as relative7 } from "node:path";
+import { relative as relative6 } from "node:path";
 
 // src/core/build/buildEntrypoints.ts
 import * as vite2 from "vite";
@@ -710,7 +692,7 @@ async function copyPublicDirectory(config) {
 }
 
 // src/core/build/findEntrypoints.ts
-import { relative as relative4, resolve as resolve9 } from "path";
+import { relative as relative3, resolve as resolve9 } from "path";
 import fs7 from "fs-extra";
 import picomatch from "picomatch";
 import { parseHTML as parseHTML2 } from "linkedom";
@@ -821,8 +803,8 @@ ${JSON.stringify(
       if (withSameName) {
         throw Error(
           `Multiple entrypoints with the name "${entrypoint.name}" detected, but only one is allowed: ${[
-            relative4(config.root, withSameName.inputPath),
-            relative4(config.root, entrypoint.inputPath)
+            relative3(config.root, withSameName.inputPath),
+            relative3(config.root, entrypoint.inputPath)
           ].join(", ")}`
         );
       }
@@ -951,7 +933,7 @@ var PATH_GLOB_TO_TYPE_MAP = {
 // src/core/build/generateTypesDir.ts
 import { createUnimport as createUnimport3 } from "unimport";
 import fs8 from "fs-extra";
-import { relative as relative5, resolve as resolve10 } from "path";
+import { relative as relative4, resolve as resolve10 } from "path";
 async function generateTypesDir(entrypoints, config) {
   await fs8.ensureDir(config.typesDir);
   const references = [];
@@ -1018,7 +1000,7 @@ async function writeMainDeclarationFile(references, config) {
       "// Generated by wxt",
       `/// <reference types="vite/client" />`,
       ...references.map(
-        (ref) => `/// <reference types="./${relative5(dir, ref)}" />`
+        (ref) => `/// <reference types="./${relative4(dir, ref)}" />`
       )
     ].join("\n") + "\n"
   );
@@ -1045,23 +1027,23 @@ async function writeTsConfigFile(mainReference, config) {
     "skipLibCheck": true,
 
     /* Aliases */
-    "baseUrl": "${relative5(dir, config.root)}",
+    "baseUrl": "${relative4(dir, config.root)}",
     "paths": {
       "@@": ["."],
       "@@/*": ["./*"],
       "~~": ["."],
       "~~/*": ["./*"],
-      "@": ["${relative5(config.root, config.srcDir)}"],
-      "@/*": ["${relative5(config.root, config.srcDir)}/*"],
-      "~": ["${relative5(config.root, config.srcDir)}"],
-      "~/*": ["${relative5(config.root, config.srcDir)}/*"]
+      "@": ["${relative4(config.root, config.srcDir)}"],
+      "@/*": ["${relative4(config.root, config.srcDir)}/*"],
+      "~": ["${relative4(config.root, config.srcDir)}"],
+      "~/*": ["${relative4(config.root, config.srcDir)}/*"]
     }
   },
   "include": [
-    "${relative5(dir, config.root)}/**/*",
-    "./${relative5(dir, mainReference)}"
+    "${relative4(dir, config.root)}/**/*",
+    "./${relative4(dir, mainReference)}"
   ],
-  "exclude": ["${relative5(dir, config.outBaseDir)}"]
+  "exclude": ["${relative4(dir, config.outBaseDir)}"]
 }`
   );
 }
@@ -1113,6 +1095,44 @@ var ContentSecurityPolicy = class _ContentSecurityPolicy {
   }
 };
 
+// src/core/utils/content-scripts.ts
+function hashContentScriptOptions(options) {
+  const withDefaults = {
+    excludeGlobs: [],
+    excludeMatches: [],
+    includeGlobs: [],
+    matchAboutBlank: false,
+    matchOriginAsFallback: false,
+    runAt: "document_idle",
+    allFrames: false,
+    world: "ISOLATED",
+    // TODO: strip undefined fields from options object to improve content script grouping.
+    ...options
+  };
+  return JSON.stringify(
+    Object.entries(withDefaults).map(([key, value]) => {
+      if (Array.isArray(value))
+        return [key, value.sort()];
+      else
+        return [key, value];
+    }).sort((l, r) => l[0].localeCompare(r[0]))
+  );
+}
+function mapWxtOptionsToContentScript(options) {
+  return {
+    matches: options.matches,
+    all_frames: options.allFrames,
+    match_about_blank: options.matchAboutBlank,
+    exclude_globs: options.excludeGlobs,
+    exclude_matches: options.excludeMatches,
+    include_globs: options.includeGlobs,
+    run_at: options.runAt,
+    // @ts-expect-error: untyped chrome options
+    match_origin_as_fallback: options.matchOriginAsFallback,
+    world: options.world
+  };
+}
+
 // src/core/utils/manifest.ts
 async function writeManifest(manifest, output, config) {
   const str = config.mode === "production" ? JSON.stringify(manifest) : JSON.stringify(manifest, null, 2);
@@ -1315,7 +1335,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
       );
     } else {
       const hashToEntrypointsMap = contentScripts.reduce((map, script) => {
-        const hash = JSON.stringify(script.options);
+        const hash = hashContentScriptOptions(script.options);
         if (map.has(hash))
           map.get(hash)?.push(script);
         else
@@ -1324,7 +1344,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput, config) {
       }, /* @__PURE__ */ new Map());
       manifest.content_scripts = Array.from(hashToEntrypointsMap.entries()).map(
         ([, scripts]) => ({
-          ...scripts[0].options,
+          ...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(),
@@ -1393,7 +1413,7 @@ function addHostPermission(manifest, hostPermission) {
 }
 
 // src/core/build.ts
-import pc3 from "picocolors";
+import pc2 from "picocolors";
 import * as vite3 from "vite";
 import fs11 from "fs-extra";
 
@@ -1443,7 +1463,7 @@ function formatDuration(duration) {
 }
 
 // src/core/log/printBuildSummary.ts
-import path4, { relative as relative6, resolve as resolve12 } from "path";
+import path4, { relative as relative5, resolve as resolve12 } from "path";
 
 // src/core/log/printTable.ts
 function printTable(log, rows, gap = 2) {
@@ -1472,7 +1492,7 @@ function printTable(log, rows, gap = 2) {
 }
 
 // src/core/log/printBuildSummary.ts
-import pc2 from "picocolors";
+import pc from "picocolors";
 import fs10 from "fs-extra";
 import { filesize } from "filesize";
 async function printBuildSummary(output, config) {
@@ -1491,7 +1511,7 @@ async function printBuildSummary(output, config) {
   const chunkRows = await Promise.all(
     chunks.map(async (chunk, i) => {
       const file = [
-        relative6(process.cwd(), config.outDir) + path4.sep,
+        relative5(process.cwd(), config.outDir) + path4.sep,
         chunk.fileName
       ];
       const prefix = i === chunks.length - 1 ? "  \u2514\u2500" : "  \u251C\u2500";
@@ -1500,14 +1520,14 @@ async function printBuildSummary(output, config) {
       totalSize += stats.size;
       const size = String(filesize(stats.size));
       return [
-        `${pc2.gray(prefix)} ${pc2.dim(file[0])}${color(file[1])}`,
-        pc2.dim(size)
+        `${pc.gray(prefix)} ${pc.dim(file[0])}${color(file[1])}`,
+        pc.dim(size)
       ];
     })
   );
   printTable(config.logger.log, chunkRows);
   config.logger.log(
-    `${pc2.cyan("\u03A3 Total size:")} ${String(filesize(totalSize))}`
+    `${pc.cyan("\u03A3 Total size:")} ${String(filesize(totalSize))}`
   );
 }
 var DEFAULT_SORT_WEIGHT = 100;
@@ -1523,12 +1543,12 @@ function getChunkSortWeight(filename) {
     ([key]) => filename.endsWith(key)
   )?.[1] ?? DEFAULT_SORT_WEIGHT;
 }
-var DEFAULT_COLOR = pc2.blue;
+var DEFAULT_COLOR = pc.blue;
 var CHUNK_COLORS = {
-  ".js.map": pc2.gray,
-  ".html": pc2.green,
-  ".css": pc2.magenta,
-  ".js": pc2.cyan
+  ".js.map": pc.gray,
+  ".html": pc.green,
+  ".css": pc.magenta,
+  ".js": pc.cyan
 };
 function getChunkColor(filename) {
   return Object.entries(CHUNK_COLORS).find(([key]) => filename.endsWith(key))?.[1] ?? DEFAULT_COLOR;
@@ -1539,7 +1559,7 @@ async function buildInternal(config) {
   const verb = config.command === "serve" ? "Pre-rendering" : "Building";
   const target = `${config.browser}-mv${config.manifestVersion}`;
   config.logger.info(
-    `${verb} ${pc3.cyan(target)} for ${pc3.cyan(config.mode)} with ${pc3.green(
+    `${verb} ${pc2.cyan(target)} for ${pc2.cyan(config.mode)} with ${pc2.green(
       `Vite ${vite3.version}`
     )}`
   );
@@ -1741,9 +1761,9 @@ function reloadContentScripts(steps, config, server) {
       const js = [getEntrypointBundlePath(entry, config.outDir, ".js")];
       const css = getContentScriptCssFiles([entry], server.currentOutput);
       server.reloadContentScript({
+        ...entry.options,
         js,
-        css,
-        ...entry.options
+        css
       });
     });
   } else {
@@ -1758,7 +1778,7 @@ function reloadHtmlPages(groups, server, config) {
 }
 
 // package.json
-var version2 = "0.2.0";
+var version2 = "0.2.2";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {
@@ -1802,13 +1822,13 @@ async function createServer2(config) {
       if (changes.type === "no-change")
         return;
       internalConfig.logger.info(
-        `Changed: ${Array.from(new Set(fileChanges.map((change) => change[1]))).map((file) => pc4.dim(relative7(internalConfig.root, file))).join(", ")}`
+        `Changed: ${Array.from(new Set(fileChanges.map((change) => change[1]))).map((file) => pc3.dim(relative6(internalConfig.root, file))).join(", ")}`
       );
       const rebuiltNames = changes.rebuildGroups.flat().map((entry) => {
-        return pc4.cyan(
-          relative7(internalConfig.outDir, getEntrypointOutputFile(entry, ""))
+        return pc3.cyan(
+          relative6(internalConfig.outDir, getEntrypointOutputFile(entry, ""))
         );
-      }).join(pc4.dim(", "));
+      }).join(pc3.dim(", "));
       internalConfig = await getLatestInternalConfig();
       internalConfig.server = server;
       const { output: newOutput } = await rebuild(