Bump version for testing

Co-authored-by: Aaron Klinker <aaronklinker1@gmail.com>

docs/.vitepress/components/UsingWxtSection.vue

@@ -18,6 +18,8 @@ const chromeExtensionIds = [
   'lknmjhcajhfbbglglccadlfdjbaiifig', // tl;dv - Record, Transcribe & ChatGPT for Google Meet
   'youtube中文配音/oglffgiaiekgeicdgkdlnlkhliajdlja', // Youtube中文配音
   'agjnjboanicjcpenljmaaigopkgdnihi', // PreMiD
+  'aiakblgmlabokilgljkglggnpflljdgp', // Markdown Sticky Notes
+  'nomnkbngkijpffepcgbbofhcnafpkiep', // DocVersionRedirector
 ];
 
 const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);

docs/.vitepress/config.ts

@@ -19,7 +19,7 @@ const title = 'Next-gen Web Extension Framework';
 const titleSuffix = ' – WXT';
 
 const description =
-  "WXT provides the best developer experience, making it quick, easy, and fun to develop chrome extensions for all browsers. With built-in utilties for building, zipping, and publishing your extension, it's easy to get started.";
+  "WXT provides the best developer experience, making it quick, easy, and fun to develop chrome extensions for all browsers. With built-in utilities for building, zipping, and publishing your extension, it's easy to get started.";
 const ogTitle = `${title}${titleSuffix}`;
 const ogUrl = 'https://wxt.dev';
 const ogImage = 'https://wxt.dev/social-preview.png';
@@ -124,7 +124,7 @@ export default defineConfig({
             { text: 'Options', link: '/entrypoints/options.md' },
             { text: 'Popup', link: '/entrypoints/popup.md' },
             { text: 'Sandbox', link: '/entrypoints/sandbox.md' },
-            { text: 'Sidepanel', link: '/entrypoints/sidepanel.md' },
+            { text: 'Side Panel', link: '/entrypoints/sidepanel.md' },
             { text: 'Unlisted Pages', link: '/entrypoints/unlisted-pages.md' },
             {
               text: 'Unlisted Scripts',

docs/entrypoints/content-scripts.md

@@ -52,9 +52,11 @@ When defining multiple content scripts, content script entrypoints that have the
 
 ## Context
 
-Old content scripts are not automatically stopped when an extension updates and reloads. Often, this leads to "Invalidated context" errors in production when a content script from an old version of your extension tries to use a extension API.
+Old content scripts are not automatically stopped when an extension updates and reloads. 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 (ie, the `browser` or `chrome` globals).
 
-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.
+WXT provides a utility for handling this process: `ContentScriptContext`. An instance of this class is provided to you automatically inside the `main` function of your content script.
+
+When your extension updates or is uninstalled, the context will become invalidated, and will trigger any `ctx.onInvalidated` listeners you add:
 
 ```ts
 export default defineContentScript({
@@ -65,26 +67,33 @@ export default defineContentScript({
       // ...
     });
 
-    // Stop fetch requests
-    fetch('...url', { signal: ctx.signal });
-
-    // Timeout utilities
+    // Timeout utilities that are automatically cleared when invalidated
     ctx.setTimeout(() => {
       // ...
     }, 5e3);
     ctx.setInterval(() => {
       // ...
     }, 60e3);
+
+    // Or add event listeners that get removed when invalidated
+    ctx.addEventListener(document, 'visibilitychange', (event) => {
+      // ...
+    });
+
+    // You can also stop fetch requests
+    fetch('...url', { signal: ctx.signal });
   },
 });
 ```
 
 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
+:::warning
 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.
+
+If you're using a framework like React, Vue, Svelte, etc., make sure you're unmounting your UI properly in the `onRemove` option of [`createShadowRootUi`](https://wxt.dev/guide/content-script-ui.html#shadow-root).
 :::
 
 ## CSS

docs/guide/compare.md

@@ -1,39 +1,40 @@
 # Compare
 
-Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework), another web extension framework.
+Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework) (another web extension framework) and [CRXJS](https://crxjs.dev/vite-plugin) (the most popular bundler plugin).
 
 ## Overview
 
-| Features                                             |             WXT             |                  Plasmo                  |
-| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: |
-| Supports all browsers                                |             ✅              |                    ✅                    |
-| MV2 Support                                          |             ✅              |                    ✅                    |
-| MV3 Support                                          |             ✅              |                    ✅                    |
-| Create Extension ZIPs                                |             ✅              |                    ✅                    |
-| Create Firefox Sources ZIP                           |             ✅              |                    ❌                    |
-| First-class TypeScript support                       |             ✅              |                    ✅                    |
-| File based entrypoint discovery                      |             ✅              |                    ✅                    |
-| Inline entrypoint config                             |             ✅              |                    ✅                    |
-| Auto-imports                                         |             ✅              |                    ❌                    |
-| Supports all frontend frameworks                     |             ✅              |      🟡 Only React, Vue, and Svelte      |
-| Framework specific entrypoints (like `Popup.tsx`)    |   🟡 `.html` `.ts` `.tsx`   | ✅ `.html` `.ts` `.tsx` `.vue` `.svelte` |
-| Automated publishing                                 |       🟡 Coming soon        |                    ✅                    |
-| Remote Code Bundling (Google Analytics)              |             ✅              |                    ✅                    |
+| Features                                             |             WXT             |                  Plasmo                  |                                  CRXJS                                  |
+| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: | :---------------------------------------------------------------------: |
+| Supports all browsers                                |             ✅              |                    ✅                    | ❌ See [#56](https://github.com/crxjs/chrome-extension-tools/issues/56) |
+| MV2 Support                                          |             ✅              |                    ✅                    |                          🟡 Either MV2 or MV3                           |
+| MV3 Support                                          |             ✅              |                    ✅                    |                          🟡 Either MV2 or MV3                           |
+| Create Extension ZIPs                                |             ✅              |                    ✅                    |                                   ❌                                    |
+| Create Firefox Sources ZIP                           |             ✅              |                    ❌                    |                                   ❌                                    |
+| First-class TypeScript support                       |             ✅              |                    ✅                    |                                   ✅                                    |
+| Entrypoint discovery                                 |         File based          |                File based                |                                   ❌                                    |
+| Inline entrypoint config                             |             ✅              |                    ✅                    |                             Manifest based                              |
+| Auto-imports                                         |             ✅              |                    ❌                    |                                   ❌                                    |
+| Supports all frontend frameworks                     |             ✅              |      🟡 Only React, Vue, and Svelte      |                                   ✅                                    |
+| Framework specific entrypoints (like `Popup.tsx`)    |   🟡 `.html` `.ts` `.tsx`   | ✅ `.html` `.ts` `.tsx` `.vue` `.svelte` |                                   ❌                                    |
+| Automated publishing                                 |             ✅              |                    ✅                    |                                   ❌                                    |
+| Remote Code Bundling (Google Analytics)              |             ✅              |                    ✅                    |                                   ❌                                    |
 | <strong style="opacity: 50%">Dev Mode</strong>       |                             |                                          |
-| `.env` Files                                         |             ✅              |                    ✅                    |
-| Opens browser and install extension                  |             ✅              |                    ❌                    |
-| HMR for UIs                                          |             ✅              |              🟡 React only               |
-| Reload HTML Files on Change                          |             ✅              |       🟡 Reloads entire extension        |
-| Reload Content Scripts on Change                     |             ✅              |       🟡 Reloads entire extension        |
-| Reload Background on Change                          | 🟡 Reloads entire extension |       🟡 Reloads entire extension        |
-| <strong style="opacity: 50%">Built-in Utils</strong> |                             |                                          |
-| Storage                                              |             ✅              |                    ✅                    |
-| Messaging                                            |       🟡 Coming soon        |                    ✅                    |
-| Content Script UI                                    |             ✅              |                    ✅                    |
+| `.env` Files                                         |             ✅              |                    ✅                    |                                   ✅                                    |
+| Opens browser and install extension                  |             ✅              |                    ❌                    |                                   ❌                                    |
+| HMR for UIs                                          |             ✅              |              🟡 React only               |                                   ✅                                    |
+| Reload HTML Files on Change                          |             ✅              |       🟡 Reloads entire extension        |                                   ✅                                    |
+| Reload Content Scripts on Change                     |             ✅              |       🟡 Reloads entire extension        |                                   ✅                                    |
+| Reload Background on Change                          | 🟡 Reloads entire extension |       🟡 Reloads entire extension        |                       🟡 Reloads entire extension                       |
+| Respects Content Script `run_at`                     |             ✅              |                    ✅                    |                 ❌ ESM-style loaders run asynchronously                 |
+| <strong style="opacity: 50%">Built-in Utils</strong> |                             |                                          |                                                                         |
+| Storage                                              |             ✅              |                    ✅                    |                                   ❌                                    |
+| Messaging                                            |             ❌              |                    ✅                    |                                   ❌                                    |
+| Content Script UI                                    |             ✅              |                    ✅                    |                                   ❌                                    |
 
-## Dev Mode
+## Why use WXT?
 
-WXT's main goal is improving the development experience (DX) of creating web extensions. There are two things WXT does differently:
+WXT's main goal is improving the development experience (DX) of creating web extensions, while not sacrificing support. There are two things WXT does differently:
 
 1. Automatically opens a browser with the extension installed when starting development
 2. Reload each part of the extension individually rather than reloading the entire extension

e2e/tests/init.test.ts

@@ -25,6 +25,7 @@ describe('Init command', () => {
         "assets/vue.svg",
         "components/HelloWorld.vue",
         "entrypoints/background.ts",
+        "entrypoints/content.ts",
         "entrypoints/popup/App.vue",
         "entrypoints/popup/index.html",
         "entrypoints/popup/main.ts",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.17.3",
+  "version": "0.17.4-alpha1",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",

src/client/content-scripts/content-script-context.ts

@@ -10,6 +10,29 @@ import { createLocationWatcher } from './location-watcher';
  *
  * 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 class ContentScriptContext implements AbortController {
   private static SCRIPT_STARTED_MESSAGE_TYPE = 'wxt:content-script-started';

src/core/builders/vite/plugins/devHtmlPrerender.ts

@@ -16,8 +16,8 @@ export function devHtmlPrerender(
 ): vite.PluginOption {
   const htmlReloadId = '@wxt/reload-html';
   const resolvedHtmlReloadId = resolve(
-    config.root,
-    'node_modules/wxt/dist/virtual/reload-html.js',
+    config.wxtModuleDir,
+    'dist/virtual/reload-html.js',
   );
   const virtualReactRefreshId = '@wxt/virtual-react-refresh';
   const resolvedVirtualReactRefreshId = '\0' + virtualReactRefreshId;

src/core/builders/vite/plugins/virtualEntrypoint.ts

@@ -30,10 +30,7 @@ export function virtualEntrypoint(
 
       const inputPath = id.replace(resolvedVirtualId, '');
       const template = await fs.readFile(
-        resolve(
-          config.root,
-          `node_modules/wxt/dist/virtual/${type}-entrypoint.js`,
-        ),
+        resolve(config.wxtModuleDir, `dist/virtual/${type}-entrypoint.js`),
         'utf-8',
       );
       return template.replace(`virtual:user-${type}`, inputPath);

src/core/builders/vite/plugins/webextensionPolyfillMock.ts

@@ -26,8 +26,8 @@ export function webextensionPolyfillMock(
           alias: {
             // Alias to use a mocked version of the polyfill
             'webextension-polyfill': path.resolve(
-              config.root,
-              'node_modules/wxt/dist/virtual/mock-browser',
+              config.wxtModuleDir,
+              'dist/virtual/mock-browser',
             ),
           },
         },

src/core/utils/building/import-entrypoint.ts

@@ -52,8 +52,8 @@ export async function importEntrypointFile<T>(path: string): Promise<T> {
       esmResolve: true,
       alias: {
         'webextension-polyfill': resolve(
-          wxt.config.root,
-          'node_modules/wxt/dist/virtual/mock-browser.js',
+          wxt.config.wxtModuleDir,
+          'dist/virtual/mock-browser.js',
         ),
       },
       // Continue using node to load TS files even if `bun run --bun` is detected. Jiti does not

src/core/utils/building/resolve-config.ts

@@ -71,6 +71,7 @@ export async function resolveConfig(
     inlineConfig.root ?? userConfig.root ?? process.cwd(),
   );
   const wxtDir = path.resolve(root, '.wxt');
+  const wxtModuleDir = resolveWxtModuleDir();
   const srcDir = path.resolve(root, mergedConfig.srcDir ?? root);
   const entrypointsDir = path.resolve(
     srcDir,
@@ -127,6 +128,7 @@ export async function resolveConfig(
     outBaseDir,
     outDir,
     publicDir,
+    wxtModuleDir,
     root,
     runnerConfig,
     srcDir,
@@ -322,3 +324,11 @@ async function getUnimportOptions(
     defaultOptions,
   );
 }
+
+/**
+ * Returns the path to `node_modules/wxt`.
+ */
+export function resolveWxtModuleDir() {
+  // require.resolve returns the wxt/dist/index file
+  return path.resolve(require.resolve('wxt'), '../..');
+}

src/core/utils/testing/fake-objects.ts

@@ -262,6 +262,7 @@ export const fakeResolvedConfig = fakeObjectCreator<ResolvedConfig>(() => {
     outDir: fakeDir(),
     publicDir: fakeDir(),
     root: fakeDir(),
+    wxtModuleDir: fakeDir(),
     runnerConfig: {
       config: {},
     },

src/types/index.ts

@@ -963,6 +963,10 @@ export interface ResolvedConfig {
   outBaseDir: string;
   outDir: string;
   debug: boolean;
+  /**
+   * Directory pointing to `node_modules/wxt`, wherever WXT is installed.
+   */
+  wxtModuleDir: string;
   mode: string;
   command: 'build' | 'serve';
   browser: TargetBrowser;

templates/react/entrypoints/content.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});

templates/solid/entrypoints/content.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});

templates/svelte/src/entrypoints/content.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});

templates/vanilla/entrypoints/content.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});

templates/vue/entrypoints/content.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});