wxt 0.16.8 → 0.16.10

package/dist/cli.js

@@ -229,6 +229,14 @@ function resolvePerBrowserOption(option, browser) {
     return option[browser];
   return option;
 }
+function resolvePerBrowserOptions(options, browser) {
+  return Object.fromEntries(
+    Object.entries(options).map(([key, value]) => [
+      key,
+      key === "defaultIcon" ? value : resolvePerBrowserOption(value, browser)
+    ])
+  );
+}
 
 // src/core/utils/constants.ts
 var VIRTUAL_NOOP_BACKGROUND_MODULE_ID = "virtual:user-background";
@@ -267,6 +275,8 @@ async function findEntrypoints() {
       switch (type) {
         case "popup":
           return await getPopupEntrypoint(info);
+        case "sidepanel":
+          return await getSidepanelEntrypoint(info);
         case "options":
           return await getOptionsEntrypoint(info);
         case "background":
@@ -377,100 +387,66 @@ function preventNoEntrypoints(files) {
     throw Error(`No entrypoints found in ${wxt.config.entrypointsDir}`);
   }
 }
-function getHtmlBaseOptions(document) {
-  const options = {};
-  const includeContent = document.querySelector("meta[name='manifest.include']")?.getAttribute("content");
-  if (includeContent) {
-    options.include = JSON5.parse(includeContent);
-  }
-  const excludeContent = document.querySelector("meta[name='manifest.exclude']")?.getAttribute("content");
-  if (excludeContent) {
-    options.exclude = JSON5.parse(excludeContent);
-  }
-  return options;
-}
-async function getPopupEntrypoint({
-  inputPath,
-  name,
-  skipped
-}) {
-  const content = await fs3.readFile(inputPath, "utf-8");
-  const { document } = parseHTML(content);
-  const options = getHtmlBaseOptions(document);
-  const title = document.querySelector("title");
-  if (title != null)
-    options.defaultTitle = title.textContent ?? void 0;
-  const defaultIconContent = document.querySelector("meta[name='manifest.default_icon']")?.getAttribute("content");
-  if (defaultIconContent) {
-    try {
-      options.defaultIcon = JSON5.parse(defaultIconContent);
-    } catch (err) {
-      wxt.logger.fatal(
-        `Failed to parse default_icon meta tag content as JSON5. content=${defaultIconContent}`,
-        err
-      );
+async function getPopupEntrypoint(info) {
+  const options = await getHtmlEntrypointOptions(
+    info,
+    {
+      browserStyle: "browse_style",
+      exclude: "exclude",
+      include: "include",
+      defaultIcon: "default_icon",
+      defaultTitle: "default_title",
+      mv2Key: "type"
+    },
+    {
+      defaultTitle: (document) => document.querySelector("title")?.textContent || void 0
+    },
+    {
+      defaultTitle: (content) => content,
+      mv2Key: (content) => content === "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",
     name: "popup",
-    options,
-    inputPath,
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    inputPath: info.inputPath,
     outputDir: wxt.config.outDir,
-    skipped
+    skipped: info.skipped
   };
 }
-async function getOptionsEntrypoint({
-  inputPath,
-  name,
-  skipped
-}) {
-  const content = await fs3.readFile(inputPath, "utf-8");
-  const { document } = parseHTML(content);
-  const options = getHtmlBaseOptions(document);
-  const openInTabContent = document.querySelector("meta[name='manifest.open_in_tab']")?.getAttribute("content");
-  if (openInTabContent) {
-    options.openInTab = openInTabContent === "true";
-  }
-  const chromeStyleContent = document.querySelector("meta[name='manifest.chrome_style']")?.getAttribute("content");
-  if (chromeStyleContent) {
-    options.chromeStyle = chromeStyleContent === "true";
-  }
-  const browserStyleContent = document.querySelector("meta[name='manifest.browser_style']")?.getAttribute("content");
-  if (browserStyleContent) {
-    options.browserStyle = browserStyleContent === "true";
-  }
+async function getOptionsEntrypoint(info) {
+  const options = await getHtmlEntrypointOptions(
+    info,
+    {
+      browserStyle: "browse_style",
+      chromeStyle: "chrome_style",
+      exclude: "exclude",
+      include: "include",
+      openInTab: "open_in_tab"
+    }
+  );
   return {
     type: "options",
     name: "options",
-    options,
-    inputPath,
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    inputPath: info.inputPath,
     outputDir: wxt.config.outDir,
-    skipped
+    skipped: info.skipped
   };
 }
-async function getUnlistedPageEntrypoint({
-  inputPath,
-  name,
-  skipped
-}) {
-  const content = await fs3.readFile(inputPath, "utf-8");
-  const { document } = parseHTML(content);
+async function getUnlistedPageEntrypoint(info) {
+  const options = await getHtmlEntrypointOptions(info, {
+    exclude: "exclude",
+    include: "include"
+  });
   return {
     type: "unlisted-page",
-    name: getEntrypointName(wxt.config.entrypointsDir, inputPath),
-    inputPath,
+    name: info.name,
+    inputPath: info.inputPath,
     outputDir: wxt.config.outDir,
-    options: getHtmlBaseOptions(document),
-    skipped
+    options,
+    skipped: info.skipped
   };
 }
 async function getUnlistedScriptEntrypoint({
@@ -484,14 +460,13 @@ async function getUnlistedScriptEntrypoint({
       `${name}: Default export not found, did you forget to call "export default defineUnlistedScript(...)"?`
     );
   }
-  const { main: _, ...moduleOptions } = defaultExport;
-  const options = moduleOptions;
+  const { main: _, ...options } = defaultExport;
   return {
     type: "unlisted-script",
     name,
     inputPath,
     outputDir: wxt.config.outDir,
-    options,
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
     skipped
   };
 }
@@ -519,14 +494,7 @@ async function getBackgroundEntrypoint({
     name,
     inputPath,
     outputDir: wxt.config.outDir,
-    options: {
-      ...options,
-      type: resolvePerBrowserOption(options.type, wxt.config.browser),
-      persistent: resolvePerBrowserOption(
-        options.persistent,
-        wxt.config.browser
-      )
-    },
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
     skipped
   };
 }
@@ -546,10 +514,58 @@ async function getContentScriptEntrypoint({
     name,
     inputPath,
     outputDir: resolve3(wxt.config.outDir, CONTENT_SCRIPT_OUT_DIR),
-    options,
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
     skipped
   };
 }
+async function getSidepanelEntrypoint(info) {
+  const options = await getHtmlEntrypointOptions(
+    info,
+    {
+      browserStyle: "browse_style",
+      exclude: "exclude",
+      include: "include",
+      defaultIcon: "default_icon",
+      defaultTitle: "default_title",
+      openAtInstall: "open_at_install"
+    },
+    {
+      defaultTitle: (document) => document.querySelector("title")?.textContent || void 0
+    },
+    {
+      defaultTitle: (content) => content
+    }
+  );
+  return {
+    type: "sidepanel",
+    name: info.name,
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    inputPath: info.inputPath,
+    outputDir: wxt.config.outDir,
+    skipped: info.skipped
+  };
+}
+async function getHtmlEntrypointOptions(info, keyMap, queries, parsers) {
+  const content = await fs3.readFile(info.inputPath, "utf-8");
+  const { document } = parseHTML(content);
+  const options = {};
+  const defaultQuery = (manifestKey) => document.querySelector(`meta[name='manifest.${manifestKey}']`)?.getAttribute("content");
+  Object.entries(keyMap).forEach(([_key, manifestKey]) => {
+    const key = _key;
+    const content2 = queries?.[key] ? queries[key](document, manifestKey) : defaultQuery(manifestKey);
+    if (content2) {
+      try {
+        options[key] = (parsers?.[key] ?? JSON5.parse)(content2);
+      } catch (err) {
+        wxt.logger.fatal(
+          `Failed to parse meta tag content. Usually this means you have invalid JSON5 content (content=${content2})`,
+          err
+        );
+      }
+    }
+  });
+  return options;
+}
 var PATH_GLOB_TO_TYPE_MAP = {
   "sandbox.html": "sandbox",
   "sandbox/index.html": "sandbox",
@@ -1655,6 +1671,7 @@ async function resolveConfig(inlineConfig, command, server) {
   let userConfigMetadata;
   if (inlineConfig.configFile !== false) {
     const { config: loadedConfig, ...metadata } = await loadConfig({
+      configFile: inlineConfig.configFile,
       name: "wxt",
       cwd: inlineConfig.root ?? process.cwd(),
       rcFile: false,
@@ -2033,7 +2050,12 @@ function getEsbuildOptions(opts) {
   return {
     format: "cjs",
     loader: isJsx ? "tsx" : "ts",
-    jsx: isJsx ? "automatic" : void 0
+    ...isJsx ? {
+      // `h` and `Fragment` are undefined, but that's OK because JSX is never evaluated while
+      // grabbing the entrypoint's options.
+      jsxFactory: "h",
+      jsxFragment: "Fragment"
+    } : void 0
   };
 }
 
@@ -2152,7 +2174,7 @@ function getChunkSortWeight(filename) {
 import pc4 from "picocolors";
 
 // package.json
-var version = "0.16.8";
+var version = "0.16.10";
 
 // src/core/utils/log/printHeader.ts
 import { consola as consola2 } from "consola";
@@ -2213,7 +2235,11 @@ var ContentSecurityPolicy = class _ContentSecurityPolicy {
 
 // src/core/utils/content-scripts.ts
 function hashContentScriptOptions(options) {
-  const simplifiedOptions = mapWxtOptionsToContentScript(options);
+  const simplifiedOptions = mapWxtOptionsToContentScript(
+    options,
+    void 0,
+    void 0
+  );
   Object.keys(simplifiedOptions).forEach((key) => {
     if (simplifiedOptions[key] == null)
       delete simplifiedOptions[key];
@@ -2239,32 +2265,31 @@ function hashContentScriptOptions(options) {
     }).sort((l, r) => l[0].localeCompare(r[0]))
   );
 }
-function mapWxtOptionsToContentScript(options) {
+function mapWxtOptionsToContentScript(options, js, css) {
   return {
-    matches: resolvePerBrowserOption(options.matches, wxt.config.browser),
-    all_frames: resolvePerBrowserOption(options.allFrames, wxt.config.browser),
-    match_about_blank: resolvePerBrowserOption(
-      options.matchAboutBlank,
-      wxt.config.browser
-    ),
-    exclude_globs: resolvePerBrowserOption(
-      options.excludeGlobs,
-      wxt.config.browser
-    ),
-    exclude_matches: resolvePerBrowserOption(
-      options.excludeMatches,
-      wxt.config.browser
-    ),
-    include_globs: resolvePerBrowserOption(
-      options.includeGlobs,
-      wxt.config.browser
-    ),
-    run_at: resolvePerBrowserOption(options.runAt, wxt.config.browser),
+    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,
+    css,
+    js,
     // @ts-expect-error: untyped chrome options
-    match_origin_as_fallback: resolvePerBrowserOption(
-      options.matchOriginAsFallback,
-      wxt.config.browser
-    ),
+    match_origin_as_fallback: options.matchOriginAsFallback,
+    world: options.world
+  };
+}
+function mapWxtOptionsToRegisteredContentScript(options, js, css) {
+  return {
+    allFrames: options.allFrames,
+    excludeMatches: options.excludeMatches,
+    matches: options.matches,
+    runAt: options.runAt,
+    js,
+    css,
+    // @ts-expect-error: Chrome accepts this, not typed in webextension-polyfill (https://developer.chrome.com/docs/extensions/reference/scripting/#type-RegisteredContentScript)
     world: options.world
   };
 }
@@ -2499,9 +2524,11 @@ function addEntrypoints(manifest, entrypoints, buildOutput) {
     );
     if (wxt.config.browser === "firefox") {
       manifest.sidebar_action = {
-        // TODO: Add options to side panel
-        // ...defaultSidepanel.options,
-        default_panel: page
+        default_panel: page,
+        browser_style: defaultSidepanel.options.browserStyle,
+        default_icon: defaultSidepanel.options.defaultIcon,
+        default_title: defaultSidepanel.options.defaultTitle,
+        open_at_install: defaultSidepanel.options.openAtInstall
       };
     } else if (wxt.config.manifestVersion === 3) {
       manifest.side_panel = {
@@ -2516,21 +2543,13 @@ function addEntrypoints(manifest, entrypoints, buildOutput) {
   if (contentScripts?.length) {
     const cssMap = getContentScriptsCssMap(buildOutput, contentScripts);
     if (wxt.config.command === "serve" && wxt.config.manifestVersion === 3) {
-      const hostPermissions = new Set(manifest.host_permissions ?? []);
       contentScripts.forEach((script) => {
-        const matches = resolvePerBrowserOption(
-          script.options.matches,
-          wxt.config.browser
-        );
-        matches.forEach((matchPattern) => {
-          hostPermissions.add(matchPattern);
+        script.options.matches.forEach((matchPattern) => {
+          addHostPermission(manifest, matchPattern);
         });
       });
-      hostPermissions.forEach(
-        (permission) => addHostPermission(manifest, permission)
-      );
     } else {
-      const hashToEntrypointsMap = contentScripts.reduce((map, script) => {
+      const hashToEntrypointsMap = contentScripts.filter((cs) => cs.options.registration !== "runtime").reduce((map, script) => {
         const hash = hashContentScriptOptions(script.options);
         if (map.has(hash))
           map.get(hash)?.push(script);
@@ -2538,19 +2557,34 @@ function addEntrypoints(manifest, entrypoints, buildOutput) {
           map.set(hash, [script]);
         return map;
       }, /* @__PURE__ */ new Map());
-      const newContentScripts = Array.from(hashToEntrypointsMap.entries()).map(
-        ([, scripts]) => ({
-          ...mapWxtOptionsToContentScript(scripts[0].options),
-          css: getContentScriptCssFiles(scripts, cssMap),
-          js: scripts.map(
+      const manifestContentScripts = Array.from(
+        hashToEntrypointsMap.values()
+      ).map(
+        (scripts) => mapWxtOptionsToContentScript(
+          scripts[0].options,
+          scripts.map(
             (entry) => getEntrypointBundlePath(entry, wxt.config.outDir, ".js")
-          )
-        })
+          ),
+          getContentScriptCssFiles(scripts, cssMap)
+        )
       );
-      if (newContentScripts.length >= 0) {
+      if (manifestContentScripts.length >= 0) {
         manifest.content_scripts ??= [];
-        manifest.content_scripts.push(...newContentScripts);
+        manifest.content_scripts.push(...manifestContentScripts);
       }
+      const runtimeContentScripts = contentScripts.filter(
+        (cs) => cs.options.registration === "runtime"
+      );
+      if (runtimeContentScripts.length > 0 && wxt.config.manifestVersion === 2) {
+        throw Error(
+          'Cannot use `registration: "runtime"` with MV2 content scripts, it is a MV3-only feature.'
+        );
+      }
+      runtimeContentScripts.forEach((script) => {
+        script.options.matches.forEach((matchPattern) => {
+          addHostPermission(manifest, matchPattern);
+        });
+      });
     }
     const contentScriptCssResources = getContentScriptCssWebAccessibleResources(
       contentScripts,
@@ -2649,10 +2683,9 @@ function getContentScriptCssWebAccessibleResources(contentScripts, contentScript
       return;
     resources.push({
       resources: [cssFile],
-      matches: resolvePerBrowserOption(
-        script.options.matches,
-        wxt.config.browser
-      ).map((matchPattern) => stripPathFromMatchPattern(matchPattern))
+      matches: script.options.matches.map(
+        (matchPattern) => stripPathFromMatchPattern(matchPattern)
+      )
     });
   });
   return resources;
@@ -3266,25 +3299,9 @@ function reloadContentScripts(steps, server) {
       const js = [getEntrypointBundlePath(entry, wxt.config.outDir, ".js")];
       const cssMap = getContentScriptsCssMap(server.currentOutput, [entry]);
       const css = getContentScriptCssFiles([entry], cssMap);
-      server.reloadContentScript({
-        allFrames: resolvePerBrowserOption(
-          entry.options.allFrames,
-          wxt.config.browser
-        ),
-        excludeMatches: resolvePerBrowserOption(
-          entry.options.excludeMatches,
-          wxt.config.browser
-        ),
-        matches: resolvePerBrowserOption(
-          entry.options.matches,
-          wxt.config.browser
-        ),
-        runAt: resolvePerBrowserOption(entry.options.runAt, wxt.config.browser),
-        // @ts-expect-error: Chrome accepts this, not typed in webextension-polyfill (https://developer.chrome.com/docs/extensions/reference/scripting/#type-RegisteredContentScript)
-        world: resolvePerBrowserOption(entry.options.world, wxt.config.browser),
-        js,
-        css
-      });
+      server.reloadContentScript(
+        mapWxtOptionsToRegisteredContentScript(entry.options, js, css)
+      );
     });
   } else {
     server.reloadExtension();

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import { a as ContentScriptContext } from './index-TYmXqKVq.js';
+import { a as ContentScriptContext } from './index-v_64CCcw.js';
 import 'webextension-polyfill';
 
 interface IntegratedContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {

package/dist/client.js

@@ -299,13 +299,13 @@ async function createShadowRootUi(ctx, options) {
   shadowHost.setAttribute("data-wxt-shadow-root", "");
   let mounted;
   const mount = () => {
-    mounted = options.onMount(uiContainer, shadow, shadowHost);
     mountUi(shadowHost, options);
     applyPosition(shadowHost, shadow.querySelector("html"), options);
+    mounted = options.onMount(uiContainer, shadow, shadowHost);
   };
   const remove = () => {
-    shadowHost.remove();
     options.onRemove?.(mounted);
+    shadowHost.remove();
     while (uiContainer.lastChild)
       uiContainer.removeChild(uiContainer.lastChild);
   };