wxt 0.19.22 → 0.20.0-beta1

package/dist/core/utils/testing/fake-objects.mjs

@@ -160,13 +160,11 @@ export const fakeOutputAsset = fakeObjectCreator(() => ({
 export function fakeOutputFile() {
   return faker.helpers.arrayElement([fakeOutputAsset(), fakeOutputChunk()]);
 }
-export const fakeManifest = fakeObjectCreator(
-  () => ({
-    manifest_version: faker.helpers.arrayElement([2, 3]),
-    name: faker.string.alphanumeric(),
-    version: `${faker.number.int()}.${faker.number.int()}.${faker.number.int()}`
-  })
-);
+export const fakeManifest = fakeObjectCreator(() => ({
+  manifest_version: faker.helpers.arrayElement([2, 3]),
+  name: faker.string.alphanumeric(),
+  version: `${faker.number.int()}.${faker.number.int()}.${faker.number.int()}`
+}));
 export const fakeUserManifest = fakeObjectCreator(() => ({
   name: faker.string.alphanumeric(),
   version: `${faker.number.int()}.${faker.number.int()}.${faker.number.int()}`
@@ -193,6 +191,7 @@ export const fakeResolvedConfig = fakeObjectCreator(() => {
     env: { browser, command, manifestVersion, mode },
     fsCache: mock(),
     imports: {
+      disabled: faker.datatype.boolean(),
       eslintrc: {
         enabled: faker.helpers.arrayElement([false, 8, 9]),
         filePath: fakeFile(),
@@ -244,12 +243,8 @@ export const fakeResolvedConfig = fakeObjectCreator(() => {
       compressionLevel: 9,
       zipSources: false
     },
-    transformManifest: () => {
-    },
     userConfigMetadata: {},
     alias: {},
-    extensionApi: "webextension-polyfill",
-    entrypointLoader: "vite-node",
     experimental: {},
     dev: {
       reloadCommand: "Alt+R"
@@ -299,17 +294,19 @@ export const fakeBuildStepOutput = fakeObjectCreator(() => ({
   chunks: fakeArray(fakeOutputChunk),
   entrypoints: fakeArray(fakeEntrypoint)
 }));
-export const fakeManifestCommand = fakeObjectCreator(() => ({
-  description: faker.string.sample(),
-  suggested_key: {
-    default: `${faker.helpers.arrayElement(["ctrl", "alt"])}+${faker.number.int(
-      {
-        min: 0,
-        max: 9
-      }
-    )}`
-  }
-}));
+export const fakeManifestCommand = fakeObjectCreator(
+  () => ({
+    description: faker.string.sample(),
+    suggested_key: {
+      default: `${faker.helpers.arrayElement(["ctrl", "alt"])}+${faker.number.int(
+        {
+          min: 0,
+          max: 9
+        }
+      )}`
+    }
+  })
+);
 export const fakeDevServer = fakeObjectCreator(() => ({
   hostname: "localhost",
   origin: "http://localhost",

package/dist/core/utils/transform.d.ts

@@ -3,7 +3,7 @@
  * 1. Removes or clears out `main` function from returned object
  * 2. Removes any unused functions/variables outside the definition that aren't being called/used
  * 3. Removes unused imports
- * 3. Removes value-less, side-effect only imports (like `import "./styles.css"` or `import "webextension-polyfill"`)
+ * 3. Removes value-less, side-effect only imports (like `import "./styles.css"` or `import "polyfill"`)
  */
 export declare function removeMainFunctionCode(code: string): {
     code: string;

package/dist/core/utils/types.d.ts

@@ -8,3 +8,5 @@
 export type NullablyRequired<T> = {
     [K in keyof Required<T>]: T[K];
 };
+export type ManifestContentScript = NonNullable<chrome.runtime.Manifest['content_scripts']>[number];
+export type ManifestV3WebAccessibleResource = NonNullable<chrome.runtime.ManifestV3['web_accessible_resources']>[number];

package/dist/core/utils/validation.mjs

@@ -21,10 +21,10 @@ export function validateEntrypoints(entrypoints) {
 }
 function validateContentScriptEntrypoint(definition) {
   const errors = validateBaseEntrypoint(definition);
-  if (definition.options.matches == null) {
+  if (definition.options.registration !== "runtime" && definition.options.matches == null) {
     errors.push({
       type: "error",
-      message: "`matches` is required",
+      message: "`matches` is required for manifest registered content scripts",
       value: definition.options.matches,
       entrypoint: definition
     });

package/dist/index.d.ts

@@ -1,4 +1,9 @@
 /**
+ * This module contains:
+ * - JS APIs used by the CLI to build extensions or start dev mode.
+ * - Helper functions for defining project config.
+ * - Types for building and extension or configuring WXT.
+ *
  * @module wxt
  */
 export * from './core';

package/dist/modules.d.ts

@@ -1,5 +1,5 @@
 /**
- * Utilities for creating reusable, build-time modules for WXT.
+ * Utilities for creating [WXT Modules](https://wxt.dev/guide/essentials/wxt-modules.html).
  *
  * @module wxt/modules
  */

package/dist/testing/index.d.ts

@@ -1,4 +1,5 @@
 /**
+ * Utilities for unit testing WXT extensions.
  * @module wxt/testing
  */
 export * from './fake-browser';

package/dist/testing/wxt-vitest-plugin.mjs

@@ -17,10 +17,8 @@ export async function WxtVitest(inlineConfig) {
     resolveAppConfig(wxt.config),
     extensionApiMock(wxt.config)
   ];
-  if (wxt.config.imports !== false) {
-    const unimport = createUnimport(wxt.config.imports);
-    await unimport.init();
-    plugins.push(unimportPlugin(unimport));
-  }
+  const unimport = createUnimport(wxt.config.imports);
+  await unimport.init();
+  plugins.push(unimportPlugin(unimport, !wxt.config.imports.disabled));
   return plugins;
 }

package/dist/types.d.ts

@@ -1,13 +1,13 @@
 import type * as vite from 'vite';
-import type { Manifest, Scripting } from 'wxt/browser';
 import { UnimportOptions, Import } from 'unimport';
 import { LogLevel } from 'consola';
-import type { ContentScriptContext } from './client/content-scripts/content-script-context';
+import type { ContentScriptContext } from './utils/content-script-context';
 import type { PluginVisualizerOptions } from '@aklinker1/rollup-plugin-visualizer';
 import type { FSWatcher } from 'chokidar';
 import { ResolvedConfig as C12ResolvedConfig } from 'c12';
 import { Hookable, NestedHooks } from 'hookable';
 import type * as Nypm from 'nypm';
+import { ManifestContentScript } from './core/utils/types';
 export interface InlineConfig {
     /**
      * Your project's root directory containing the `package.json` used to fill out the
@@ -37,7 +37,7 @@ export interface InlineConfig {
      */
     entrypointsDir?: string;
     /**
-     * @default "${config.srcDir}/modules"
+     * @default "${config.root}/modules"
      */
     modulesDir?: string;
     /**
@@ -62,8 +62,8 @@ export interface InlineConfig {
      * - <span v-pre>`{{modeSuffix}}`</span>: A suffix based on the mode ('-dev' for development, '' for production)
      * - <span v-pre>`{{command}}`</span>: The WXT command being run (e.g., 'build', 'serve')
      *
-     * @example "{{browser}}-mv{{manifestVersion}}{{modeSuffix}}"
-     * @default <span v-pre>`"{{browser}}-mv{{manifestVersion}}"`</span>
+     * @example "{{browser}}-mv{{manifestVersion}}"
+     * @default <span v-pre>`"{{browser}}-mv{{manifestVersion}}{{modeSuffix}}"`</span>
      */
     outDirTemplate?: string;
     /**
@@ -125,9 +125,13 @@ export interface InlineConfig {
      */
     manifest?: UserManifest | Promise<UserManifest> | UserManifestFn;
     /**
-     * Custom runner options. Options set here can be overridden in a `web-ext.config.ts` file.
+     * Configure browser startup. Options set here can be overridden in a `web-ext.config.ts` file.
      */
-    runner?: ExtensionRunnerConfig;
+    webExt?: WebExtConfig;
+    /**
+     * @deprecated Use `webExt` instead. Same option, just renamed.
+     */
+    runner?: WebExtConfig;
     zip?: {
         /**
          * Configure the filename output when zipping files.
@@ -248,25 +252,6 @@ export interface InlineConfig {
          */
         compressionLevel?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
     };
-    /**
-     * @deprecated Use `hooks.build.manifestGenerated` to modify your manifest instead. This option
-     *             will be removed in v1.0
-     *
-     * Transform the final manifest before it's written to the file system. Edit the `manifest`
-     * parameter directly, do not return a new object. Return values are ignored.
-     *
-     * @example
-     * defineConfig({
-     *   // Add a CSS-only content script.
-     *   transformManifest(manifest) {
-     *     manifest.content_scripts.push({
-     *       matches: ["*://google.com/*"],
-     *       css: ["content-scripts/some-example.css"],
-     *     });
-     *   }
-     * })
-     */
-    transformManifest?: (manifest: Manifest.WebExtensionManifest) => void;
     analysis?: {
         /**
          * Explicitly include bundle analysis when running `wxt build`. This can be overridden by the
@@ -324,30 +309,6 @@ export interface InlineConfig {
      * }
      */
     alias?: Record<string, string>;
-    /**
-     * Which extension API to use.
-     *
-     * - `"webextension-polyfill"`: Use `browser` and types from [`webextension-polyfill`](https://www.npmjs.com/package/webextension-polyfill).
-     * - `"chrome"`: Use the regular `chrome` (or `browser` for Firefox/Safari) globals provided by the browser. Types provided by [`@types/chrome`](https://www.npmjs.com/package/@types/chrome).
-     *
-     * @default "webextension-polyfill"
-     * @since 0.19.0
-     */
-    extensionApi?: 'webextension-polyfill' | 'chrome';
-    /**
-     * @deprecated Will be removed in v0.20.0, please migrate to using `vite-node`, the new default.
-     *
-     * Method used to import entrypoint files during the build process to extract their options.
-     *
-     * - `"vite-node"` (default as of 0.19.0): Uses `vite-node` to import the entrypoints. Automatically includes vite config based on your wxt.config.ts file
-     * - `"jiti"`: Simplest and fastest, but doesn't allow using any imported variables outside the entrypoint's main function
-     *
-     * @see {@link https://wxt.dev/guide/go-further/entrypoint-importers.html|Entrypoint Importers}
-     *
-     * @default "vite-node"
-     * @since 0.19.0
-     */
-    entrypointLoader?: 'vite-node' | 'jiti';
     /**
      * Experimental settings - use with caution.
      */
@@ -428,7 +389,7 @@ export interface WxtHooks {
     'vite:devServer:extendConfig': (config: vite.InlineConfig) => HookResult;
 }
 export interface BuildOutput {
-    manifest: Manifest.WebExtensionManifest;
+    manifest: chrome.runtime.Manifest;
     publicAssets: OutputAsset[];
     steps: BuildStepOutput[];
 }
@@ -509,7 +470,7 @@ export interface WxtDevServer extends Omit<WxtBuilderServer, 'listen' | 'close'>
 }
 export interface ReloadContentScriptPayload {
     registration?: BaseContentScriptEntrypointOptions['registration'];
-    contentScript: Omit<Scripting.RegisteredContentScript, 'id'>;
+    contentScript: Omit<chrome.scripting.RegisteredContentScript, 'id'>;
 }
 export type TargetBrowser = string;
 export type TargetManifestVersion = 2 | 3;
@@ -553,37 +514,37 @@ export interface BackgroundEntrypointOptions extends BaseEntrypointOptions {
     type?: PerBrowserOption<'module'>;
 }
 export interface BaseContentScriptEntrypointOptions extends BaseEntrypointOptions {
-    matches?: PerBrowserOption<Manifest.ContentScript['matches']>;
+    matches?: PerBrowserOption<NonNullable<ManifestContentScript['matches']>>;
     /**
      * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
      * @default "documentIdle"
      */
-    runAt?: PerBrowserOption<Manifest.ContentScript['run_at']>;
+    runAt?: PerBrowserOption<chrome.scripting.RegisteredContentScript['runAt']>;
     /**
      * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
      * @default false
      */
-    matchAboutBlank?: PerBrowserOption<Manifest.ContentScript['match_about_blank']>;
+    matchAboutBlank?: PerBrowserOption<ManifestContentScript['match_about_blank']>;
     /**
      * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
      * @default []
      */
-    excludeMatches?: PerBrowserOption<Manifest.ContentScript['exclude_matches']>;
+    excludeMatches?: PerBrowserOption<ManifestContentScript['exclude_matches']>;
     /**
      * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
      * @default []
      */
-    includeGlobs?: PerBrowserOption<Manifest.ContentScript['include_globs']>;
+    includeGlobs?: PerBrowserOption<ManifestContentScript['include_globs']>;
     /**
      * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
      * @default []
      */
-    excludeGlobs?: PerBrowserOption<Manifest.ContentScript['exclude_globs']>;
+    excludeGlobs?: PerBrowserOption<ManifestContentScript['exclude_globs']>;
     /**
      * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
      * @default false
      */
-    allFrames?: PerBrowserOption<Manifest.ContentScript['all_frames']>;
+    allFrames?: PerBrowserOption<ManifestContentScript['all_frames']>;
     /**
      * See https://developer.chrome.com/docs/extensions/mv3/content_scripts/
      * @default false
@@ -717,6 +678,12 @@ export interface SidepanelEntrypoint extends BaseEntrypoint {
     options: ResolvedPerBrowserOptions<SidepanelEntrypointOptions, 'defaultIcon'>;
 }
 export type Entrypoint = GenericEntrypoint | BackgroundEntrypoint | ContentScriptEntrypoint | PopupEntrypoint | OptionsEntrypoint | SidepanelEntrypoint;
+export interface EntrypointInfo {
+    name: string;
+    /** Absolute path to the entrypoint file. */
+    inputPath: string;
+    type: Entrypoint['type'];
+}
 export type EntrypointGroup = Entrypoint | Entrypoint[];
 export type OnContentScriptStopped = (cb: () => void) => void;
 export interface IsolatedWorldContentScriptDefinition extends IsolatedWorldContentScriptEntrypointOptions {
@@ -833,9 +800,13 @@ export interface ConfigEnv {
 }
 export type WxtCommand = 'build' | 'serve';
 /**
- * Configure how the browser starts up.
+ * @deprecated Use `WebExtConfig` instead.
+ */
+export type ExtensionRunnerConfig = WebExtConfig;
+/**
+ * Options for how [`web-ext`](https://github.com/mozilla/web-ext) starts the browser.
  */
-export interface ExtensionRunnerConfig {
+export interface WebExtConfig {
     /**
      * Whether or not to open the browser with the extension installed in dev mode.
      *
@@ -978,6 +949,7 @@ export interface WxtBuilderServer {
      * Chokidar file watcher instance.
      */
     watcher: FSWatcher;
+    on?(event: string, callback: () => void): void;
 }
 export interface ServerInfo {
     /**
@@ -1062,7 +1034,13 @@ export interface WxtHooks {
      * @param wxt The configured WXT object
      * @param manifest The manifest that was generated
      */
-    'build:manifestGenerated': (wxt: Wxt, manifest: Manifest.WebExtensionManifest) => HookResult;
+    'build:manifestGenerated': (wxt: Wxt, manifest: chrome.runtime.Manifest) => HookResult;
+    /**
+     * Called once the names and paths of all entrypoints have been resolved.
+     * @param wxt The configured WXT object
+     * @param infos List of entrypoints found in the project's `entrypoints` directory
+     */
+    'entrypoints:found': (wxt: Wxt, infos: EntrypointInfo[]) => HookResult;
     /**
      * Called once all entrypoints have been loaded from the `entrypointsDir`.
      * Use `wxt.builder.importEntrypoint` to load entrypoint options from the
@@ -1202,10 +1180,10 @@ export interface ResolvedConfig {
     manifestVersion: TargetManifestVersion;
     env: ConfigEnv;
     logger: Logger;
-    imports: false | WxtResolvedUnimportOptions;
+    imports: WxtResolvedUnimportOptions;
     manifest: UserManifest;
     fsCache: FsCache;
-    runnerConfig: C12ResolvedConfig<ExtensionRunnerConfig>;
+    runnerConfig: C12ResolvedConfig<WebExtConfig>;
     zip: {
         name?: string;
         artifactTemplate: string;
@@ -1222,10 +1200,6 @@ export interface ResolvedConfig {
          */
         zipSources: boolean;
     };
-    /**
-     * @deprecated Use `build:manifestGenerated` hook instead.
-     */
-    transformManifest?: (manifest: Manifest.WebExtensionManifest) => void;
     analysis: {
         enabled: boolean;
         open: boolean;
@@ -1243,8 +1217,6 @@ export interface ResolvedConfig {
      * Import aliases to absolute paths.
      */
     alias: Record<string, string>;
-    extensionApi: 'webextension-polyfill' | 'chrome';
-    entrypointLoader: 'vite-node' | 'jiti';
     experimental: {};
     dev: {
         /** Only defined during dev command */
@@ -1340,6 +1312,12 @@ export type WxtUnimportOptions = Partial<UnimportOptions> & {
     eslintrc?: Eslintrc;
 };
 export type WxtResolvedUnimportOptions = Partial<UnimportOptions> & {
+    /**
+     * Set to `true` when the user disabled auto-imports. We still use unimport for the #imports module, but other features should be disabled.
+     *
+     * You don't need to check this value before modifying the auto-import options. Even if `disabled` is `true`, there's no harm in adding imports to the config - they'll just be ignored.
+     */
+    disabled: boolean;
     eslintrc: ResolvedEslintrc;
 };
 /**

package/dist/utils/app-config.d.ts

@@ -0,0 +1,2 @@
+import type { WxtAppConfig } from '../utils/define-app-config';
+export declare function useAppConfig(): WxtAppConfig;

package/dist/{client/content-scripts → utils}/content-script-context.d.ts

@@ -1,5 +1,6 @@
-import { ContentScriptDefinition } from '../../types';
-import { WxtLocationChangeEvent } from './custom-events';
+/** @module wxt/utils/content-script-context */
+import { ContentScriptDefinition } from '../types';
+import { WxtLocationChangeEvent } from './internal/custom-events';
 /**
  * Implements [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController).
  * Used to detect and stop content script code when the script is invalidated.
@@ -10,7 +11,7 @@ import { WxtLocationChangeEvent } from './custom-events';
  * To create context for testing, you can use the class's constructor:
  *
  * ```ts
- * import { ContentScriptContext } from 'wxt/client';
+ * import { ContentScriptContext } from 'wxt/utils/content-scripts-context';
  *
  * test("storage listener should be removed when context is invalidated", () => {
  *   const ctx = new ContentScriptContext('test');

package/dist/{client/content-scripts → utils}/content-script-context.mjs

@@ -1,7 +1,9 @@
 import { browser } from "wxt/browser";
-import { logger } from "../../sandbox/utils/logger.mjs";
-import { getUniqueEventName } from "./custom-events.mjs";
-import { createLocationWatcher } from "./location-watcher.mjs";
+import { logger } from "../utils/internal/logger.mjs";
+import {
+  getUniqueEventName
+} from "./internal/custom-events.mjs";
+import { createLocationWatcher } from "./internal/location-watcher.mjs";
 export class ContentScriptContext {
   constructor(contentScriptName, options) {
     this.contentScriptName = contentScriptName;

package/dist/utils/content-script-ui/iframe.d.ts

@@ -0,0 +1,32 @@
+import { ContentScriptContext } from '../content-script-context';
+import type { ContentScriptUi, ContentScriptUiOptions } from './types';
+/**
+ * Create a content script UI using an iframe.
+ *
+ * @see https://wxt.dev/guide/essentials/content-scripts.html#iframe
+ */
+export declare function createIframeUi<TMounted>(ctx: ContentScriptContext, options: IframeContentScriptUiOptions<TMounted>): IframeContentScriptUi<TMounted>;
+export interface IframeContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
+    /**
+     * The iframe added to the DOM.
+     */
+    iframe: HTMLIFrameElement;
+    /**
+     * A wrapper div that assists in positioning.
+     */
+    wrapper: HTMLDivElement;
+}
+export type IframeContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+    /**
+     * The path to the HTML page that will be shown in the iframe. This string is passed into
+     * `browser.runtime.getURL`.
+     */
+    page: import('wxt/browser').HtmlPublicPath;
+    /**
+     * Callback executed when mounting the UI. Use this function to customize the iframe or wrapper
+     * element's appearance. It is called every time `ui.mount()` is called.
+     *
+     * Optionally return a value that can be accessed at `ui.mounted` or in the `onRemove` callback.
+     */
+    onMount?: (wrapper: HTMLElement, iframe: HTMLIFrameElement) => TMounted;
+};

package/dist/utils/content-script-ui/iframe.mjs

@@ -0,0 +1,30 @@
+import { browser } from "wxt/browser";
+import { applyPosition, createMountFunctions, mountUi } from "./shared.mjs";
+export function createIframeUi(ctx, options) {
+  const wrapper = document.createElement("div");
+  wrapper.setAttribute("data-wxt-iframe", "");
+  const iframe = document.createElement("iframe");
+  iframe.src = browser.runtime.getURL(options.page);
+  wrapper.appendChild(iframe);
+  let mounted = void 0;
+  const mount = () => {
+    applyPosition(wrapper, iframe, options);
+    mountUi(wrapper, options);
+    mounted = options.onMount?.(wrapper, iframe);
+  };
+  const remove = () => {
+    options.onRemove?.(mounted);
+    wrapper.remove();
+    mounted = void 0;
+  };
+  const mountFunctions = createMountFunctions({ mount, remove }, options);
+  ctx.onInvalidated(remove);
+  return {
+    get mounted() {
+      return mounted;
+    },
+    iframe,
+    wrapper,
+    ...mountFunctions
+  };
+}

package/dist/utils/content-script-ui/integrated.d.ts

@@ -0,0 +1,34 @@
+/** @module wxt/utils/content-script-ui/integrated */
+import { ContentScriptContext } from '../content-script-context';
+import type { ContentScriptUi, ContentScriptUiOptions } from './types';
+/**
+ * Create a content script UI without any isolation.
+ *
+ * @see https://wxt.dev/guide/essentials/content-scripts.html#integrated
+ */
+export declare function createIntegratedUi<TMounted>(ctx: ContentScriptContext, options: IntegratedContentScriptUiOptions<TMounted>): IntegratedContentScriptUi<TMounted>;
+/**
+ * Shared types for the different `wxt/utils/content-script-ui/*` modules.
+ * @module wxt/utils/content-script-ui/types
+ */
+export interface IntegratedContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
+    /**
+     * A wrapper div that assists in positioning.
+     */
+    wrapper: HTMLElement;
+}
+export type IntegratedContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+    /**
+     * Tag used to create the wrapper element.
+     *
+     * @default "div"
+     */
+    tag?: string;
+    /**
+     * Callback executed when mounting the UI. This function should create and append the UI to the
+     * `wrapper` element. It is called every time `ui.mount()` is called.
+     *
+     * Optionally return a value that can be accessed at `ui.mounted` or in the `onRemove` callback.
+     */
+    onMount: (wrapper: HTMLElement) => TMounted;
+};

package/dist/utils/content-script-ui/integrated.mjs

@@ -0,0 +1,32 @@
+import { applyPosition, createMountFunctions, mountUi } from "./shared.mjs";
+export function createIntegratedUi(ctx, options) {
+  const wrapper = document.createElement(options.tag || "div");
+  wrapper.setAttribute("data-wxt-integrated", "");
+  let mounted = void 0;
+  const mount = () => {
+    applyPosition(wrapper, void 0, options);
+    mountUi(wrapper, options);
+    mounted = options.onMount?.(wrapper);
+  };
+  const remove = () => {
+    options.onRemove?.(mounted);
+    wrapper.replaceChildren();
+    wrapper.remove();
+    mounted = void 0;
+  };
+  const mountFunctions = createMountFunctions(
+    {
+      mount,
+      remove
+    },
+    options
+  );
+  ctx.onInvalidated(remove);
+  return {
+    get mounted() {
+      return mounted;
+    },
+    wrapper,
+    ...mountFunctions
+  };
+}

package/dist/utils/content-script-ui/shadow-root.d.ts

@@ -0,0 +1,76 @@
+import { ContentScriptContext } from '../content-script-context';
+import type { ContentScriptUi, ContentScriptUiOptions } from './types';
+/**
+ * Create a content script UI inside a [`ShadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot).
+ *
+ * > This function is async because it has to load the CSS via a network call.
+ *
+ * @see https://wxt.dev/guide/essentials/content-scripts.html#shadow-root
+ */
+export declare function createShadowRootUi<TMounted>(ctx: ContentScriptContext, options: ShadowRootContentScriptUiOptions<TMounted>): Promise<ShadowRootContentScriptUi<TMounted>>;
+export interface ShadowRootContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
+    /**
+     * The `HTMLElement` hosting the shadow root used to isolate the UI's styles. This is the element
+     * that get's added to the DOM. This element's style is not isolated from the webpage.
+     */
+    shadowHost: HTMLElement;
+    /**
+     * The container element inside the `ShadowRoot` whose styles are isolated. The UI is mounted
+     * inside this `HTMLElement`.
+     */
+    uiContainer: HTMLElement;
+    /**
+     * The shadow root performing the isolation.
+     */
+    shadow: ShadowRoot;
+}
+export type ShadowRootContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+    /**
+     * The name of the custom component used to host the ShadowRoot. Must be kebab-case.
+     */
+    name: string;
+    /**
+     * Custom CSS text to apply to the UI. If your content script imports/generates CSS and you've
+     * set `cssInjectionMode: "ui"`, the imported CSS will be included automatically. You do not need
+     * to pass those styles in here. This is for any additional styles not in the imported CSS.
+     */
+    css?: string;
+    /**
+     * ShadowRoot's mode.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode
+     * @default "open"
+     */
+    mode?: 'open' | 'closed';
+    /**
+     * When enabled, `event.stopPropagation` will be called on events trying to bubble out of the
+     * shadow root.
+     *
+     * - Set to `true` to stop the propagation of a default set of events,
+     *   `["keyup", "keydown", "keypress"]`
+     * - Set to an array of event names to stop the propagation of a custom list of events
+     */
+    isolateEvents?: boolean | string[];
+    /**
+     * By default, WXT adds `all: initial` to the shadow root before the rest of
+     * your CSS. This resets any inheritable CSS styles that
+     * [normally pierce the Shadow DOM](https://open-wc.org/guides/knowledge/styling/styles-piercing-shadow-dom/).
+     *
+     * WXT resets everything but:
+     * - **`rem` Units**: they continue to scale based off the webpage's HTML `font-size`.
+     * - **CSS Variables/Custom Properties**: CSS variables defined outside the shadow root can be accessed inside it.
+     * - **`@font-face` Definitions**: Fonts defined outside the shadow root can be used inside it.
+     *
+     * To disable this behavior and inherit styles from the webpage, set `inheritStyles: true`.
+     *
+     * @default false
+     */
+    inheritStyles?: boolean;
+    /**
+     * Callback executed when mounting the UI. This function should create and append the UI to the
+     * `uiContainer` element. It is called every time `ui.mount()` is called.
+     *
+     * Optionally return a value that can be accessed at `ui.mounted` or in the `onRemove` callback.
+     */
+    onMount: (uiContainer: HTMLElement, shadow: ShadowRoot, shadowHost: HTMLElement) => TMounted;
+};