wxt 0.18.15 → 0.19.0

package/bin/wxt.mjs

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import '../dist/cli.js';
+import '../dist/cli/index.mjs';

package/dist/browser/chrome.d.ts

@@ -0,0 +1,17 @@
+/**
+ * EXPERIMENTAL
+ *
+ * Includes the `chrome` API and types when using `extensionApi: 'chrome'`.
+ *
+ * @module wxt/browser/chrome
+ */
+export interface WxtRuntime {
+}
+export interface WxtI18n {
+}
+export type Chrome = typeof chrome;
+export type WxtBrowser = Omit<Chrome, 'runtime' | 'i18n'> & {
+    runtime: WxtRuntime & Omit<Chrome['runtime'], 'getURL'>;
+    i18n: WxtI18n & Omit<Chrome['i18n'], 'getMessage'>;
+};
+export declare const browser: WxtBrowser;

package/dist/browser/chrome.mjs

@@ -0,0 +1,7 @@
+export const browser = (
+  // @ts-expect-error
+  globalThis.browser?.runtime?.id == null ? globalThis.chrome : (
+    // @ts-expect-error
+    globalThis.browser
+  )
+);

package/dist/browser/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Includes the `browser` API and types when using `extensionApi: 'webextension-polyfill'` (the default).
+ *
+ * @module wxt/browser
+ */
+import { Browser, Runtime, I18n } from 'webextension-polyfill';
+export interface AugmentedBrowser extends Browser {
+    runtime: WxtRuntime;
+    i18n: WxtI18n;
+}
+export interface WxtRuntime extends Runtime.Static {
+}
+export interface WxtI18n extends I18n.Static {
+}
+export declare const browser: AugmentedBrowser;
+/** @ignore */
+export type { ActivityLog, Alarms, Bookmarks, Action, BrowserAction, BrowserSettings, BrowsingData, CaptivePortal, Clipboard, Commands, ContentScripts, ContextualIdentities, Cookies, DeclarativeNetRequest, Devtools, Dns, Downloads, Events, Experiments, Extension, ExtensionTypes, Find, GeckoProfiler, History, I18n, Identity, Idle, Management, Manifest, // TODO: Export custom manifest types that are valid for both Chrome and Firefox.
+ContextMenus, Menus, NetworkStatus, NormandyAddonStudy, Notifications, Omnibox, PageAction, Permissions, Pkcs11, Privacy, Proxy, Runtime, Scripting, Search, Sessions, SidebarAction, Storage, Tabs, Theme, TopSites, Types, Urlbar, UserScripts, WebNavigation, WebRequest, Windows, } from 'webextension-polyfill';

package/dist/browser/index.mjs

@@ -0,0 +1,2 @@
+import originalBrowser from "webextension-polyfill";
+export const browser = originalBrowser;

package/dist/builtin-modules/index.d.ts

@@ -0,0 +1,2 @@
+import { WxtModule } from '../types';
+export declare const builtinModules: WxtModule<any>[];

package/dist/builtin-modules/index.mjs

@@ -0,0 +1,2 @@
+import unimport from "./unimport.mjs";
+export const builtinModules = [unimport];

package/dist/builtin-modules/unimport.d.ts

@@ -0,0 +1,8 @@
+import type { EslintGlobalsPropValue, WxtDirFileEntry, WxtModule, WxtResolvedUnimportOptions } from '../types';
+import { type Unimport } from 'unimport';
+import { Plugin } from 'vite';
+declare const _default: WxtModule<import("../types").WxtModuleOptions>;
+export default _default;
+export declare function vitePlugin(unimport: Unimport): Plugin;
+export declare function getEslint8ConfigEntry(options: WxtResolvedUnimportOptions, globals: Record<string, EslintGlobalsPropValue>): WxtDirFileEntry;
+export declare function getEslint9ConfigEntry(options: WxtResolvedUnimportOptions, globals: Record<string, EslintGlobalsPropValue>): WxtDirFileEntry;

package/dist/builtin-modules/unimport.mjs

@@ -0,0 +1,99 @@
+import { addViteConfig, defineWxtModule } from "../modules.mjs";
+import { createUnimport } from "unimport";
+import { extname } from "node:path";
+export default defineWxtModule({
+  name: "wxt:built-in:unimport",
+  setup(wxt) {
+    const options = wxt.config.imports;
+    if (options === false) return;
+    let unimport;
+    wxt.hooks.hook("ready", () => {
+      const addModuleImports = (module) => {
+        if (!module.imports) return;
+        options.imports ??= [];
+        options.imports.push(...module.imports);
+      };
+      wxt.config.builtinModules.forEach(addModuleImports);
+      wxt.config.userModules.forEach(addModuleImports);
+    });
+    wxt.hooks.afterEach((event) => {
+      if (event.name === "ready") {
+        unimport = createUnimport(options);
+      }
+    });
+    wxt.hooks.hook("prepare:types", async (_, entries) => {
+      await unimport.init();
+      entries.push(await getImportsDeclarationEntry(unimport));
+      if (options.eslintrc.enabled === false) return;
+      entries.push(
+        await getEslintConfigEntry(unimport, options.eslintrc.enabled, options)
+      );
+    });
+    addViteConfig(wxt, () => ({
+      plugins: [vitePlugin(unimport)]
+    }));
+  }
+});
+export function vitePlugin(unimport) {
+  const ENABLED_EXTENSIONS = /* @__PURE__ */ new Set([
+    ".js",
+    ".jsx",
+    ".ts",
+    ".tsx",
+    ".vue",
+    ".svelte"
+  ]);
+  return {
+    name: "wxt:unimport",
+    async transform(code, id) {
+      if (id.includes("node_modules")) return;
+      if (!ENABLED_EXTENSIONS.has(extname(id))) return;
+      const injected = await unimport.injectImports(code, id);
+      return {
+        code: injected.code,
+        map: injected.s.generateMap({ hires: "boundary", source: id })
+      };
+    }
+  };
+}
+async function getImportsDeclarationEntry(unimport) {
+  await unimport.init();
+  return {
+    path: "types/imports.d.ts",
+    text: [
+      "// Generated by wxt",
+      await unimport.generateTypeDeclarations(),
+      ""
+    ].join("\n"),
+    tsReference: true
+  };
+}
+async function getEslintConfigEntry(unimport, version, options) {
+  const globals = (await unimport.getImports()).map((i) => i.as ?? i.name).filter(Boolean).sort().reduce((globals2, name) => {
+    globals2[name] = options.eslintrc.globalsPropValue;
+    return globals2;
+  }, {});
+  if (version <= 8) return getEslint8ConfigEntry(options, globals);
+  else return getEslint9ConfigEntry(options, globals);
+}
+export function getEslint8ConfigEntry(options, globals) {
+  return {
+    path: options.eslintrc.filePath,
+    text: JSON.stringify({ globals }, null, 2) + "\n"
+  };
+}
+export function getEslint9ConfigEntry(options, globals) {
+  return {
+    path: options.eslintrc.filePath,
+    text: `const globals = ${JSON.stringify(globals, null, 2)}
+
+export default {
+  name: "wxt/auto-imports",
+  languageOptions: {
+    globals,
+    sourceType: "module",
+  },
+};
+`
+  };
+}

package/dist/cli/cli-utils.d.ts

@@ -0,0 +1,25 @@
+import { CAC, Command } from 'cac';
+/**
+ * Wrap an action handler to add a timer, error handling, and maybe enable debug mode.
+ */
+export declare function wrapAction(cb: (...args: any[]) => void | {
+    isOngoing?: boolean;
+} | Promise<void | {
+    isOngoing?: boolean;
+}>, options?: {
+    disableFinishedLog?: boolean;
+}): (...args: any[]) => Promise<void>;
+/**
+ * Array flags, when not passed, are either `undefined` or `[undefined]`. This function filters out
+ * the
+ */
+export declare function getArrayFromFlags<T>(flags: any, name: string): T[] | undefined;
+/**
+ * @param base Command to add this one to
+ * @param name The command name to add
+ * @param alias The CLI tool being aliased
+ * @param bin The CLI tool binary name. Usually the same as the alias
+ * @param docsUrl URL to the docs for the aliased CLI tool
+ */
+export declare function createAliasedCommand(base: CAC, name: string, alias: string, bin: string, docsUrl: string): void;
+export declare function isAliasedCommand(command: Command | undefined): boolean;

package/dist/cli/cli-utils.mjs

@@ -0,0 +1,58 @@
+import consola, { LogLevels } from "consola";
+import { filterTruthy, toArray } from "../core/utils/arrays.mjs";
+import { printHeader } from "../core/utils/log/index.mjs";
+import { formatDuration } from "../core/utils/time.mjs";
+import { ValidationError } from "../core/utils/validation.mjs";
+import { registerWxt } from "../core/wxt.mjs";
+export function wrapAction(cb, options) {
+  return async (...args) => {
+    const isDebug = !!args.find((arg) => arg?.debug);
+    if (isDebug) {
+      consola.level = LogLevels.debug;
+    }
+    const startTime = Date.now();
+    try {
+      printHeader();
+      const status = await cb(...args);
+      if (!status?.isOngoing && !options?.disableFinishedLog)
+        consola.success(
+          `Finished in ${formatDuration(Date.now() - startTime)}`
+        );
+    } catch (err) {
+      consola.fail(
+        `Command failed after ${formatDuration(Date.now() - startTime)}`
+      );
+      if (err instanceof ValidationError) {
+      } else {
+        consola.error(err);
+      }
+      process.exit(1);
+    }
+  };
+}
+export function getArrayFromFlags(flags, name) {
+  const array = toArray(flags[name]);
+  const result = filterTruthy(array);
+  return result.length ? result : void 0;
+}
+const aliasCommandNames = /* @__PURE__ */ new Set();
+export function createAliasedCommand(base, name, alias, bin, docsUrl) {
+  const aliasedCommand = base.command(name, `Alias for ${alias} (${docsUrl})`).allowUnknownOptions().action(async () => {
+    try {
+      await registerWxt("build");
+      const args = process.argv.slice(
+        process.argv.indexOf(aliasedCommand.name) + 1
+      );
+      const { execa } = await import("execa");
+      await execa(bin, args, {
+        stdio: "inherit"
+      });
+    } catch {
+      process.exit(1);
+    }
+  });
+  aliasCommandNames.add(aliasedCommand.name);
+}
+export function isAliasedCommand(command) {
+  return !!command && aliasCommandNames.has(command.name);
+}

package/dist/cli/commands.d.ts

@@ -0,0 +1,2 @@
+declare const cli: import("cac").CAC;
+export default cli;

package/dist/cli/commands.mjs

@@ -0,0 +1,104 @@
+import cac from "cac";
+import { build, clean, createServer, initialize, prepare, zip } from "../core/index.mjs";
+import {
+  createAliasedCommand,
+  getArrayFromFlags,
+  wrapAction
+} from "./cli-utils.mjs";
+const cli = cac("wxt");
+cli.option("--debug", "enable debug mode");
+cli.command("[root]", "start dev server").option("-c, --config <file>", "use specified config file").option("-m, --mode <mode>", "set env mode").option("-b, --browser <browser>", "specify a browser").option("-p, --port <port>", "specify a port for the dev server").option(
+  "-e, --filter-entrypoint <entrypoint>",
+  "only build specific entrypoints",
+  {
+    type: []
+  }
+).option("--mv3", "target manifest v3").option("--mv2", "target manifest v2").action(
+  wrapAction(async (root, flags) => {
+    const server = await createServer({
+      root,
+      mode: flags.mode,
+      browser: flags.browser,
+      manifestVersion: flags.mv3 ? 3 : flags.mv2 ? 2 : void 0,
+      configFile: flags.config,
+      debug: flags.debug,
+      filterEntrypoints: getArrayFromFlags(flags, "filterEntrypoint"),
+      dev: flags.port == null ? void 0 : {
+        server: {
+          port: parseInt(flags.port)
+        }
+      }
+    });
+    await server.start();
+    return { isOngoing: true };
+  })
+);
+cli.command("build [root]", "build for production").option("-c, --config <file>", "use specified config file").option("-m, --mode <mode>", "set env mode").option("-b, --browser <browser>", "specify a browser").option(
+  "-e, --filter-entrypoint <entrypoint>",
+  "only build specific entrypoints",
+  {
+    type: []
+  }
+).option("--mv3", "target manifest v3").option("--mv2", "target manifest v2").option("--analyze", "visualize extension bundle").option("--analyze-open", "automatically open stats.html in browser").action(
+  wrapAction(async (root, flags) => {
+    await build({
+      root,
+      mode: flags.mode,
+      browser: flags.browser,
+      manifestVersion: flags.mv3 ? 3 : flags.mv2 ? 2 : void 0,
+      configFile: flags.config,
+      debug: flags.debug,
+      analysis: flags.analyze ? {
+        enabled: true,
+        open: flags.analyzeOpen
+      } : void 0,
+      filterEntrypoints: getArrayFromFlags(flags, "filterEntrypoint")
+    });
+  })
+);
+cli.command("zip [root]", "build for production and zip output").option("-c, --config <file>", "use specified config file").option("-m, --mode <mode>", "set env mode").option("-b, --browser <browser>", "specify a browser").option("--mv3", "target manifest v3").option("--mv2", "target manifest v2").action(
+  wrapAction(async (root, flags) => {
+    await zip({
+      root,
+      mode: flags.mode,
+      browser: flags.browser,
+      manifestVersion: flags.mv3 ? 3 : flags.mv2 ? 2 : void 0,
+      configFile: flags.config,
+      debug: flags.debug
+    });
+  })
+);
+cli.command("prepare [root]", "prepare typescript project").option("-c, --config <file>", "use specified config file").action(
+  wrapAction(async (root, flags) => {
+    await prepare({
+      root,
+      configFile: flags.config,
+      debug: flags.debug
+    });
+  })
+);
+cli.command("clean [root]", "clean generated files and caches").alias("cleanup").option("-c, --config <file>", "use specified config file").action(
+  wrapAction(async (root, flags) => {
+    await clean({ root, configFile: flags.config, debug: flags.debug });
+  })
+);
+cli.command("init [directory]", "initialize a new project").option("-t, --template <template>", "template to use").option("--pm <packageManager>", "which package manager to use").action(
+  wrapAction(
+    async (directory, flags) => {
+      await initialize({
+        directory,
+        template: flags.template,
+        packageManager: flags.pm
+      });
+    },
+    { disableFinishedLog: true }
+  )
+);
+createAliasedCommand(
+  cli,
+  "submit",
+  "publish-extension",
+  "wxt-publish-extension",
+  "https://www.npmjs.com/publish-browser-extension"
+);
+export default cli;

package/dist/cli/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cli/index.mjs

@@ -0,0 +1,11 @@
+import cli from "./commands.mjs";
+import { version } from "../version.mjs";
+import { isAliasedCommand } from "./cli-utils.mjs";
+process.env.VITE_CJS_IGNORE_WARNING = "true";
+cli.parse(process.argv, { run: false });
+if (!isAliasedCommand(cli.matchedCommand)) {
+  cli.help();
+  cli.version(version);
+  cli.parse(process.argv, { run: false });
+}
+await cli.runMatchedCommand();

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

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

package/dist/client/app-config.mjs

@@ -0,0 +1,4 @@
+import appConfig from "virtual:app-config";
+export function useAppConfig() {
+  return appConfig;
+}

package/dist/client/content-scripts/content-script-context.d.ts

@@ -0,0 +1,114 @@
+import { ContentScriptDefinition } from '../../types';
+import { WxtLocationChangeEvent } from './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.
+ *
+ * It also provides several utilities like `ctx.setTimeout` and `ctx.setInterval` that should be used in
+ * content scripts instead of `window.setTimeout` or `window.setInterval`.
+ *
+ * To create context for testing, you can use the class's constructor:
+ *
+ * ```ts
+ * import { ContentScriptContext } from 'wxt/client';
+ *
+ * test("storage listener should be removed when context is invalidated", () => {
+ *   const ctx = new ContentScriptContext('test');
+ *   const item = storage.defineItem("local:count", { defaultValue: 0 });
+ *   const watcher = vi.fn();
+ *
+ *   const unwatch = item.watch(watcher);
+ *   ctx.onInvalidated(unwatch); // Listen for invalidate here
+ *
+ *   await item.setValue(1);
+ *   expect(watcher).toBeCalledTimes(1);
+ *   expect(watcher).toBeCalledWith(1, 0);
+ *
+ *   ctx.notifyInvalidated(); // Use this function to invalidate the context
+ *   await item.setValue(2);
+ *   expect(watcher).toBeCalledTimes(1);
+ * });
+ * ```
+ */
+export declare class ContentScriptContext implements AbortController {
+    #private;
+    private readonly contentScriptName;
+    readonly options?: Omit<ContentScriptDefinition, "main"> | undefined;
+    private static SCRIPT_STARTED_MESSAGE_TYPE;
+    constructor(contentScriptName: string, options?: Omit<ContentScriptDefinition, "main"> | undefined);
+    get signal(): AbortSignal;
+    abort(reason?: any): void;
+    get isInvalid(): boolean;
+    get isValid(): boolean;
+    /**
+     * Add a listener that is called when the content script's context is invalidated.
+     *
+     * @returns A function to remove the listener.
+     *
+     * @example
+     * browser.runtime.onMessage.addListener(cb);
+     * const removeInvalidatedListener = ctx.onInvalidated(() => {
+     *   browser.runtime.onMessage.removeListener(cb);
+     * })
+     * // ...
+     * removeInvalidatedListener();
+     */
+    onInvalidated(cb: () => void): () => void;
+    /**
+     * Return a promise that never resolves. Useful if you have an async function that shouldn't run
+     * after the context is expired.
+     *
+     * @example
+     * const getValueFromStorage = async () => {
+     *   if (ctx.isInvalid) return ctx.block();
+     *
+     *   // ...
+     * }
+     */
+    block<T>(): Promise<T>;
+    /**
+     * Wrapper around `window.setInterval` that automatically clears the interval when invalidated.
+     */
+    setInterval(handler: () => void, timeout?: number): number;
+    /**
+     * Wrapper around `window.setTimeout` that automatically clears the interval when invalidated.
+     */
+    setTimeout(handler: () => void, timeout?: number): number;
+    /**
+     * Wrapper around `window.requestAnimationFrame` that automatically cancels the request when
+     * invalidated.
+     */
+    requestAnimationFrame(callback: FrameRequestCallback): number;
+    /**
+     * Wrapper around `window.requestIdleCallback` that automatically cancels the request when
+     * invalidated.
+     */
+    requestIdleCallback(callback: IdleRequestCallback, options?: IdleRequestOptions): number;
+    /**
+     * Call `target.addEventListener` and remove the event listener when the context is invalidated.
+     *
+     * Includes additional events useful for content scripts:
+     *
+     * - `"wxt:locationchange"` - Triggered when HTML5 history mode is used to change URL. Content
+     *   scripts are not reloaded when navigating this way, so this can be used to reset the content
+     *   script state on URL change, or run custom code.
+     *
+     * @example
+     * ctx.addEventListener(document, "visibilitychange", () => {
+     *   // ...
+     * });
+     * ctx.addEventListener(document, "wxt:locationchange", () => {
+     *   // ...
+     * });
+     */
+    addEventListener<TTarget extends EventTarget, TType extends keyof WxtContentScriptEventMap>(target: TTarget, type: TType, handler: (event: WxtContentScriptEventMap[TType]) => void, options?: AddEventListenerOptions): void;
+    /**
+     * @internal
+     * Abort the abort controller and execute all `onInvalidated` listeners.
+     */
+    notifyInvalidated(): void;
+}
+interface WxtContentScriptEventMap extends WindowEventMap {
+    'wxt:locationchange': WxtLocationChangeEvent;
+}
+export {};

package/dist/client/content-scripts/content-script-context.mjs

@@ -0,0 +1,169 @@
+import { browser } from "wxt/browser";
+import { logger } from "../../sandbox/utils/logger.mjs";
+import { getUniqueEventName } from "./custom-events.mjs";
+import { createLocationWatcher } from "./location-watcher.mjs";
+export class ContentScriptContext {
+  constructor(contentScriptName, options) {
+    this.contentScriptName = contentScriptName;
+    this.options = options;
+    this.#abortController = new AbortController();
+    if (this.#isTopFrame) {
+      this.#stopOldScripts();
+    }
+    this.setTimeout(() => {
+      this.#listenForNewerScripts();
+    });
+  }
+  static SCRIPT_STARTED_MESSAGE_TYPE = "wxt:content-script-started";
+  #isTopFrame = window.self === window.top;
+  #abortController;
+  #locationWatcher = createLocationWatcher(this);
+  get signal() {
+    return this.#abortController.signal;
+  }
+  abort(reason) {
+    return this.#abortController.abort(reason);
+  }
+  get isInvalid() {
+    if (browser.runtime.id == null) {
+      this.notifyInvalidated();
+    }
+    return this.signal.aborted;
+  }
+  get isValid() {
+    return !this.isInvalid;
+  }
+  /**
+   * Add a listener that is called when the content script's context is invalidated.
+   *
+   * @returns A function to remove the listener.
+   *
+   * @example
+   * browser.runtime.onMessage.addListener(cb);
+   * const removeInvalidatedListener = ctx.onInvalidated(() => {
+   *   browser.runtime.onMessage.removeListener(cb);
+   * })
+   * // ...
+   * removeInvalidatedListener();
+   */
+  onInvalidated(cb) {
+    this.signal.addEventListener("abort", cb);
+    return () => this.signal.removeEventListener("abort", cb);
+  }
+  /**
+   * Return a promise that never resolves. Useful if you have an async function that shouldn't run
+   * after the context is expired.
+   *
+   * @example
+   * const getValueFromStorage = async () => {
+   *   if (ctx.isInvalid) return ctx.block();
+   *
+   *   // ...
+   * }
+   */
+  block() {
+    return new Promise(() => {
+    });
+  }
+  /**
+   * Wrapper around `window.setInterval` that automatically clears the interval when invalidated.
+   */
+  setInterval(handler, timeout) {
+    const id = setInterval(() => {
+      if (this.isValid) handler();
+    }, timeout);
+    this.onInvalidated(() => clearInterval(id));
+    return id;
+  }
+  /**
+   * Wrapper around `window.setTimeout` that automatically clears the interval when invalidated.
+   */
+  setTimeout(handler, timeout) {
+    const id = setTimeout(() => {
+      if (this.isValid) handler();
+    }, timeout);
+    this.onInvalidated(() => clearTimeout(id));
+    return id;
+  }
+  /**
+   * Wrapper around `window.requestAnimationFrame` that automatically cancels the request when
+   * invalidated.
+   */
+  requestAnimationFrame(callback) {
+    const id = requestAnimationFrame((...args) => {
+      if (this.isValid) callback(...args);
+    });
+    this.onInvalidated(() => cancelAnimationFrame(id));
+    return id;
+  }
+  /**
+   * Wrapper around `window.requestIdleCallback` that automatically cancels the request when
+   * invalidated.
+   */
+  requestIdleCallback(callback, options) {
+    const id = requestIdleCallback((...args) => {
+      if (!this.signal.aborted) callback(...args);
+    }, options);
+    this.onInvalidated(() => cancelIdleCallback(id));
+    return id;
+  }
+  /**
+   * Call `target.addEventListener` and remove the event listener when the context is invalidated.
+   *
+   * Includes additional events useful for content scripts:
+   *
+   * - `"wxt:locationchange"` - Triggered when HTML5 history mode is used to change URL. Content
+   *   scripts are not reloaded when navigating this way, so this can be used to reset the content
+   *   script state on URL change, or run custom code.
+   *
+   * @example
+   * ctx.addEventListener(document, "visibilitychange", () => {
+   *   // ...
+   * });
+   * ctx.addEventListener(document, "wxt:locationchange", () => {
+   *   // ...
+   * });
+   */
+  addEventListener(target, type, handler, options) {
+    if (type === "wxt:locationchange") {
+      if (this.isValid) this.#locationWatcher.run();
+    }
+    target.addEventListener?.(
+      type.startsWith("wxt:") ? getUniqueEventName(type) : type,
+      // @ts-expect-error: Event don't match, but that's OK, EventTarget doesn't allow custom types in the callback
+      handler,
+      {
+        ...options,
+        signal: this.signal
+      }
+    );
+  }
+  /**
+   * @internal
+   * Abort the abort controller and execute all `onInvalidated` listeners.
+   */
+  notifyInvalidated() {
+    this.abort("Content script context invalidated");
+    logger.debug(
+      `Content script "${this.contentScriptName}" context invalidated`
+    );
+  }
+  #stopOldScripts() {
+    window.postMessage(
+      {
+        type: ContentScriptContext.SCRIPT_STARTED_MESSAGE_TYPE,
+        contentScriptName: this.contentScriptName
+      },
+      "*"
+    );
+  }
+  #listenForNewerScripts() {
+    const cb = (event) => {
+      if (event.data?.type === ContentScriptContext.SCRIPT_STARTED_MESSAGE_TYPE && event.data?.contentScriptName === this.contentScriptName) {
+        this.notifyInvalidated();
+      }
+    };
+    addEventListener("message", cb);
+    this.onInvalidated(() => removeEventListener("message", cb));
+  }
+}