chore(release): v0.5.6

CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## v0.5.6
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.5...v0.5.6)
+
+### 🚀 Enhancements
+
+- Add `ContentScriptContext` util for stopping invalidated content scripts ([#120](https://github.com/wxt-dev/wxt/pull/120))
+
+### ❤️ Contributors
+
+- Aaron <aaronklinker1@gmail.com>
+
+## v0.5.5
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.4...v0.5.5)
+
+### 🩹 Fixes
+
+- Automatically replace vite's `process.env.NODE_ENV` output in lib mode with the mode ([92039b8](https://github.com/wxt-dev/wxt/commit/92039b8))
+
+### ❤️ Contributors
+
+- Aaron Klinker <aaronklinker1@gmail.com>
+
+## v0.5.4
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.3...v0.5.4)
+
+### 🩹 Fixes
+
+- Recognize `background/index.ts` as an entrypoint ([419fab8](https://github.com/wxt-dev/wxt/commit/419fab8))
+- Don't warn about deep entrypoint subdirectories not being recognized ([87e8df9](https://github.com/wxt-dev/wxt/commit/87e8df9))
+
+### ❤️ Contributors
+
+- Aaron Klinker <aaronklinker1@gmail.com>
+
 ## v0.5.3
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.5.2...v0.5.3)

demo/src/entrypoints/overlay.content/index.ts

@@ -2,9 +2,13 @@ import '../../common/style.css';
 
 export default defineContentScript({
   matches: ['*://*/*'],
-  async main() {
+  async main(ctx) {
     console.log(browser.runtime.id);
     logId();
+    const n = (Math.random() * 100).toFixed(1);
+    ctx.setInterval(() => {
+      console.log(n, browser.runtime.id);
+    }, 1e3);
     mountContentScriptUi();
   },
 });

docs/.vitepress/config.ts

@@ -11,6 +11,17 @@ export default defineConfig({
   description: 'Next gen framework for developing web extensions',
   lastUpdated: true,
 
+  head: [
+    [
+      "script",
+      {
+        async: "",
+        "data-website-id": "c1840c18-a12c-4a45-a848-55ae85ef7915",
+        src: "https://umami.aklinker1.io/script.js",
+      },
+    ],
+  ],
+
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     logo: '/logo.svg',

docs/guide/background.md

@@ -9,6 +9,7 @@ For MV2, the background is added as a script to the background page. For MV3, th
 <EntrypointPatterns
   :patterns="[
     ['background.ts', 'background.js'],
+    ['background/index.ts', 'background.js'],
   ]"
 />
 

docs/guide/content-scripts.md

@@ -34,7 +34,7 @@ export default defineContentScript({
   include: undefined | string[],
   exclude: undefined | string[],
 
-  main() {
+  main(ctx) {
     // Executed when content script is loaded
   },
 });
@@ -63,7 +63,7 @@ import './style.css';
 
 export default defineContentScript({
   matches: ['*://google.com/*', '*://duckduckgo.com/*'],
-  main() {
+  main(ctx) {
     // ...
   },
 });
@@ -83,3 +83,40 @@ Any styles imported in your content script will be added to that content script'
   ]
 }
 ```
+
+## Context
+
+Old content scripts are not automatically stopped when an extension updates and restarts. Often, this leads to "Invalidated context" errors in production when a content script from an old version of your extension tries to use a web extension API. Since it's not connected to the latest version of your extension, the browser decides to throw an error.
+
+WXT provides a utility for managing this process: `ContentScriptContext`. An instance of this class is provided to you automatically inside the `main` function of your content script.
+
+```ts
+export default defineContentScript({
+  // ...
+  main(ctx: ContentScriptContext) {
+    // Add custom listeners for stopping work
+    ctx.onInvalidated(() => {
+      // ...
+    });
+
+    // Stop fetch requests
+    fetch('...url', { signal: ctx.signal });
+
+    // Timeout utilities
+    ctx.setTimeout(() => {
+      // ...
+    }, 5e3);
+    ctx.setInterval(() => {
+      // ...
+    }, 60e3);
+  },
+});
+```
+
+The class extends [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) and provides other utilities for stopping a content script's logic once it becomes invalidated.
+
+:::tip
+When working with content scripts, **you should always use the `ctx` object to stop any async or future work.**
+
+This prevents old content scripts from interfering with new content scripts, and prevents error messages from the console in production.
+:::

e2e/tests/output-structure.test.ts

@@ -43,7 +43,12 @@ describe('Output Directory Structure', () => {
 
     await project.build();
 
-    expect(await project.serializeOutput()).toMatchInlineSnapshot(`
+    expect(
+      await project.serializeOutput([
+        '.output/chrome-mv3/content-scripts/one.js',
+        '.output/chrome-mv3/content-scripts/two.js',
+      ]),
+    ).toMatchInlineSnapshot(`
       ".output/chrome-mv3/assets/one.css
       ----------------------------------------
       body{color:#00f}
@@ -56,13 +61,11 @@ describe('Output Directory Structure', () => {
       ================================================================================
       .output/chrome-mv3/content-scripts/one.js
       ----------------------------------------
-      (function(){\\"use strict\\";function i(n){return n}const s=\\"\\",o={matches:[\\"*://*/*\\"],main:()=>{}};function t(n,...e){if(typeof e[0]==\\"string\\"){const c=e.shift();n(\`[wxt] \${c}\`,...e)}else n(\\"[wxt]\\",...e)}var r={debug:(...n)=>t(console.debug,...n),log:(...n)=>t(console.log,...n),warn:(...n)=>t(console.warn,...n),error:(...n)=>t(console.error,...n)};(async()=>{try{await o.main()}catch(n){r.error(\\"The content script crashed on startup!\\",n)}})()})();
-
+      <contents-ignored>
       ================================================================================
       .output/chrome-mv3/content-scripts/two.js
       ----------------------------------------
-      (function(){\\"use strict\\";function i(n){return n}const s=\\"\\",o={matches:[\\"*://*/*\\"],main:()=>{}};function t(n,...e){if(typeof e[0]==\\"string\\"){const c=e.shift();n(\`[wxt] \${c}\`,...e)}else n(\\"[wxt]\\",...e)}var r={debug:(...n)=>t(console.debug,...n),log:(...n)=>t(console.log,...n),warn:(...n)=>t(console.warn,...n),error:(...n)=>t(console.error,...n)};(async()=>{try{await o.main()}catch(n){r.error(\\"The content script crashed on startup!\\",n)}})()})();
-
+      <contents-ignored>
       ================================================================================
       .output/chrome-mv3/manifest.json
       ----------------------------------------
@@ -82,11 +85,14 @@ describe('Output Directory Structure', () => {
 
     await project.build();
 
-    expect(await project.serializeOutput()).toMatchInlineSnapshot(`
+    expect(
+      await project.serializeOutput([
+        '.output/chrome-mv3/content-scripts/overlay-one.js',
+      ]),
+    ).toMatchInlineSnapshot(`
       ".output/chrome-mv3/content-scripts/overlay-one.js
       ----------------------------------------
-      (function(){\\"use strict\\";function i(n){return n}const o={matches:[\\"*://*/*\\"],main:()=>{}};function t(n,...e){if(typeof e[0]==\\"string\\"){const c=e.shift();n(\`[wxt] \${c}\`,...e)}else n(\\"[wxt]\\",...e)}var r={debug:(...n)=>t(console.debug,...n),log:(...n)=>t(console.log,...n),warn:(...n)=>t(console.warn,...n),error:(...n)=>t(console.error,...n)};(async()=>{try{await o.main()}catch(n){r.error(\\"The content script crashed on startup!\\",n)}})()})();
-
+      <contents-ignored>
       ================================================================================
       .output/chrome-mv3/manifest.json
       ----------------------------------------

e2e/tests/typescript-project.test.ts

@@ -22,6 +22,7 @@ describe('TypeScript Project', () => {
         const __IS_EDGE__: boolean;
         const __IS_OPERA__: boolean;
         const __COMMAND__: \\"build\\" | \\"serve\\";
+        const __ENTRYPOINT__: string;
       }
       "
     `);

e2e/utils.ts

@@ -80,9 +80,12 @@ export class TestProject {
   /**
    * Read all the files from the test project's `.output` directory and combine them into a string
    * that can be used in a snapshot.
+   *
+   * Optionally, provide a list of filenames whose content is not printed (because it's inconsistent
+   * or not relevant to a test).
    */
-  serializeOutput(): Promise<string> {
-    return this.serializeDir('.output');
+  serializeOutput(ignoreContentsOfFilenames?: string[]): Promise<string> {
+    return this.serializeDir('.output', ignoreContentsOfFilenames);
   }
 
   /**
@@ -95,7 +98,16 @@ export class TestProject {
     );
   }
 
-  private async serializeDir(dir: string): Promise<string> {
+  /**
+   * Deeply print the filename and contents of all files in a directory.
+   *
+   * Optionally, provide a list of filenames whose content is not printed (because it's inconsistent
+   * or not relevant to a test).
+   */
+  private async serializeDir(
+    dir: string,
+    ignoreContentsOfFilenames?: string[],
+  ): Promise<string> {
     const outputFiles = await glob('**/*', {
       cwd: resolve(this.root, dir),
       ignore: ['**/node_modules', '**/.output'],
@@ -104,19 +116,24 @@ export class TestProject {
     const fileContents = [];
     for (const file of outputFiles) {
       const path = resolve(this.root, dir, file);
-      fileContents.push(await this.serializeFile(path));
+      const isContentIgnored = !!ignoreContentsOfFilenames?.find(
+        (ignoredFile) => normalizePath(path).endsWith(ignoredFile),
+      );
+      fileContents.push(await this.serializeFile(path, isContentIgnored));
     }
     return fileContents.join(`\n${''.padEnd(80, '=')}\n`);
   }
 
   /**
    * @param path An abosolute path to a file or a path relative to the root.
+   * @param ignoreContents An optional boolean that, when true, causes this function to not print
+   *                       the file contents.
    */
-  async serializeFile(path: string): Promise<string> {
+  async serializeFile(path: string, ignoreContents?: boolean): Promise<string> {
     const absolutePath = resolve(this.root, path);
     return [
       normalizePath(relative(this.root, absolutePath)),
-      await fs.readFile(absolutePath),
+      ignoreContents ? '<contents-ignored>' : await fs.readFile(absolutePath),
     ].join(`\n${''.padEnd(40, '-')}\n`);
   }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.5.3",
+  "version": "0.5.6",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18.16.0",

src/client/utils/ContentScriptContext.ts

@@ -0,0 +1,139 @@
+import { browser } from '../browser';
+import { logger } from './logger';
+
+/**
+ * Extends [`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`.
+ */
+export class ContentScriptContext extends AbortController {
+  static SCRIPT_STARTED_MESSAGE_TYPE = 'wxt:content-script-started';
+
+  #isTopFrame = window.self === window.top;
+
+  constructor(private readonly contentScriptName: string) {
+    super();
+
+    if (this.#isTopFrame) {
+      this.#stopOldScripts();
+    }
+    this.setTimeout(() => {
+      // Run on next tick so the listener it adds isn't triggered by stopOldScript
+      this.#listenForNewerScripts();
+    });
+  }
+
+  get isInvalid(): boolean {
+    if (browser.runtime.id == null) {
+      this.notifyInvalidated(); // Sets `signal.aborted` to true
+    }
+    return this.signal.aborted;
+  }
+
+  get isValid(): boolean {
+    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: () => void): () => void {
+    this.signal.addEventListener('abort', cb);
+    return () => this.signal.removeEventListener('abort', cb);
+  }
+
+  /**
+   * Wrapper around `window.setInterval` that automatically clears the interval when invalidated.
+   */
+  setInterval(handler: () => void, timeout?: number): number {
+    const id = setInterval(() => {
+      if (this.isValid) handler();
+    }, timeout) as unknown as number;
+    this.onInvalidated(() => clearInterval(id));
+    return id;
+  }
+
+  /**
+   * Wrapper around `window.setTimeout` that automatically clears the interval when invalidated.
+   */
+  setTimeout(handler: () => void, timeout?: number): number {
+    const id = setTimeout(() => {
+      if (this.isValid) handler();
+    }, timeout) as unknown as number;
+    this.onInvalidated(() => clearTimeout(id));
+    return id;
+  }
+
+  /**
+   * Wrapper around `window.requestAnimationFrame` that automatically cancels the request when
+   * invalidated.
+   */
+  requestAnimationFrame(callback: FrameRequestCallback): number {
+    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: IdleRequestCallback,
+    options?: IdleRequestOptions,
+  ): number {
+    const id = requestIdleCallback((...args) => {
+      if (!this.signal.aborted) callback(...args);
+    }, options);
+
+    this.onInvalidated(() => cancelIdleCallback(id));
+    return id;
+  }
+
+  /**
+   * 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() {
+    // Use postMessage so it get's sent to all the frames of the page.
+    window.postMessage({
+      event: ContentScriptContext.SCRIPT_STARTED_MESSAGE_TYPE,
+      contentScriptName: this.contentScriptName,
+    });
+  }
+
+  #listenForNewerScripts() {
+    const cb = (event: MessageEvent) => {
+      if (
+        event.data?.type === ContentScriptContext.SCRIPT_STARTED_MESSAGE_TYPE &&
+        event.data?.contentScriptName === this.contentScriptName
+      ) {
+        this.notifyInvalidated();
+      }
+    };
+
+    addEventListener('message', cb);
+    this.onInvalidated(() => removeEventListener('message', cb));
+  }
+}

src/client/virtual-modules/content-script-entrypoint.ts

@@ -1,9 +1,12 @@
 import definition from 'virtual:user-content-script';
 import { logger } from '../utils/logger';
+import { ContentScriptContext } from '../utils/ContentScriptContext';
 
 (async () => {
   try {
-    await definition.main();
+    const ctx = new ContentScriptContext(__ENTRYPOINT__);
+
+    await definition.main(ctx);
   } catch (err) {
     logger.error('The content script crashed on startup!', err);
   }

src/client/virtual-modules/virtual-module-globals.d.ts

@@ -21,3 +21,4 @@ declare const __DEV_SERVER_PROTOCOL__: string;
 declare const __DEV_SERVER_HOSTNAME__: string;
 declare const __DEV_SERVER_PORT__: string;
 declare const __MANIFEST_VERSION__: 2 | 3;
+declare const __ENTRYPOINT__: string;

src/core/build/__tests__/findEntrypoints.test.ts

@@ -214,6 +214,15 @@ describe('findEntrypoints', () => {
         outputDir: config.outDir,
       },
     ],
+    [
+      'background/index.ts',
+      {
+        type: 'background',
+        name: 'background',
+        inputPath: resolve(config.entrypointsDir, 'background/index.ts'),
+        outputDir: config.outDir,
+      },
+    ],
   ])(
     'should find and load background entrypoint config from %s',
     async (path, expected) => {

src/core/build/buildEntrypoints.ts

@@ -12,6 +12,7 @@ import { getEntrypointBundlePath } from '../utils/entrypoints';
 import fs from 'fs-extra';
 import { dirname, resolve } from 'path';
 import { getPublicFiles } from '../utils/public';
+import { getEntrypointGlobals } from '../utils/globals';
 
 export async function buildEntrypoints(
   groups: EntrypointGroup[],
@@ -78,7 +79,14 @@ async function buildSingleEntrypoint(
         },
       },
     },
+    define: {
+      // See https://github.com/aklinker1/vite-plugin-web-extension/issues/96
+      'process.env.NODE_ENV': JSON.stringify(config.mode),
+    },
   };
+  for (const global of getEntrypointGlobals(config, entrypoint.name)) {
+    libMode.define![global.name] = JSON.stringify(global.value);
+  }
   const entryConfig = vite.mergeConfig(
     libMode,
     config.vite,
@@ -116,7 +124,11 @@ async function buildMultipleEntrypoints(
         },
       },
     },
+    define: {},
   };
+  for (const global of getEntrypointGlobals(config, 'html')) {
+    multiPage.define![global.name] = JSON.stringify(global.value);
+  }
 
   const entryConfig = vite.mergeConfig(
     multiPage,

src/core/build/findEntrypoints.ts

@@ -350,6 +350,7 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
   'devtools/index.html': 'devtools',
 
   'background.ts': 'background',
+  'background/index.ts': 'background',
   [VIRTUAL_NOOP_BACKGROUND_MODULE_ID]: 'background',
 
   'content.ts?(x)': 'content-script',
@@ -374,8 +375,8 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
   [`*.${CSS_EXTENSIONS_PATTERN}`]: 'unlisted-style',
   [`*/index.${CSS_EXTENSIONS_PATTERN}`]: 'unlisted-style',
 
-  // Don't warn about any files in subdirectories, like CSS or JS entrypoints for HTML files
-  '*/*': 'ignored',
+  // Don't warn about any files in subdirectories, like CSS or JS entrypoints for HTML files or tests
+  '*/**': 'ignored',
 };
 
 const CONTENT_SCRIPT_OUT_DIR = 'content-scripts';

src/core/build/generateTypesDir.ts

@@ -4,7 +4,7 @@ import fs from 'fs-extra';
 import { relative, resolve } from 'path';
 import { getEntrypointBundlePath } from '../utils/entrypoints';
 import { getUnimportOptions } from '../utils/auto-imports';
-import { getGlobals } from '../utils/globals';
+import { getEntrypointGlobals, getGlobals } from '../utils/globals';
 import { getPublicFiles } from '../utils/public';
 import { normalizePath } from '../utils/paths';
 import path from 'node:path';
@@ -157,7 +157,7 @@ async function writeGlobalsDeclarationFile(
   config: InternalConfig,
 ): Promise<string> {
   const filePath = resolve(config.typesDir, 'globals.d.ts');
-  const globals = getGlobals(config);
+  const globals = [...getGlobals(config), ...getEntrypointGlobals(config, '')];
   await writeFileIfDifferent(
     filePath,
     [

src/core/types/external.ts

@@ -3,6 +3,7 @@ import { Manifest, Scripting } from 'webextension-polyfill';
 import { UnimportOptions } from 'unimport';
 import { EntrypointGroup } from '.';
 import { LogLevel } from 'consola';
+import { ContentScriptContext } from '../../client/utils/ContentScriptContext';
 
 export interface InlineConfig {
   /**
@@ -369,7 +370,7 @@ export interface ContentScriptDefinition extends ExcludableEntrypoint {
   /**
    * Main function executed when the content script is loaded.
    */
-  main(): void | Promise<void>;
+  main(ctx: ContentScriptContext): void | Promise<void>;
 }
 
 export interface BackgroundScriptDefintition extends ExcludableEntrypoint {

src/core/utils/globals.ts

@@ -46,3 +46,16 @@ export function getGlobals(
     },
   ];
 }
+
+export function getEntrypointGlobals(
+  config: InternalConfig,
+  entrypointName: string,
+) {
+  return [
+    {
+      name: '__ENTRYPOINT__',
+      value: entrypointName,
+      type: `string`,
+    },
+  ];
+}