chore(release): wxt v0.20.24

Addresses
https://github.com/wxt-dev/wxt/issues/2180#issuecomment-4259430737

bun.lock

@@ -283,7 +283,7 @@
     },
     "packages/wxt": {
       "name": "wxt",
-      "version": "0.20.22",
+      "version": "0.20.24",
       "bin": {
         "wxt": "./bin/wxt.mjs",
         "wxt-publish-extension": "./bin/wxt-publish-extension.mjs",

docs/guide/essentials/wxt-modules.md

@@ -4,33 +4,21 @@ outline: deep
 
 # WXT Modules
 
-WXT provides a "module system" that let's you run code at different steps in the build process to modify it.
+WXT provides a "module system" that lets you run code at different steps in the build process to modify it.
 
 [[toc]]
 
-## Adding a Module
+## Installing a Module
 
-There are two ways to add a module to your project:
+To use a published module from NPM, install the package and add it to your config:
 
-1. **NPM**: install an NPM package, like [`@wxt-dev/auto-icons`](https://www.npmjs.com/package/@wxt-dev/auto-icons) and add it to your config:
+```ts [wxt.config.ts]
+export default defineConfig({
+  modules: ['@wxt-dev/auto-icons'],
+});
+```
 
-   ```ts [wxt.config.ts]
-   export default defineConfig({
-     modules: ['@wxt-dev/auto-icons'],
-   });
-   ```
-
-   > Searching for ["wxt module"](https://www.npmjs.com/search?q=wxt%20module) on NPM is a good way to find published WXT modules.
-
-2. **Local**: add a file to your project's `modules/` directory:
-
-   ```plaintext
-   <rootDir>/
-     modules/
-       my-module.ts
-   ```
-
-   > To learn more about writing your own modules, read the [Writing Modules](/guide/essentials/wxt-modules) docs.
+> Searching for ["wxt module"](https://www.npmjs.com/search?q=wxt%20module) on NPM is a good way to find published WXT modules.
 
 ## Module Options
 
@@ -49,7 +37,7 @@ Modules are loaded in the same order as hooks are executed. Refer to the [Hooks
 
 ## Writing Modules
 
-Here's what a basic WXT module looks like:
+If you need custom build logic for your project, you can write your own local module. Here's what a basic WXT module looks like:
 
 ```ts
 import { defineWxtModule } from 'wxt/modules';
@@ -61,6 +49,14 @@ export default defineWxtModule({
 });
 ```
 
+To add it to your project, place the file in the `modules/` directory at the root of your project. Any module file in this directory is **automatically discovered and loaded** — no additional configuration is needed:
+
+```plaintext
+<rootDir>/
+  modules/
+    my-module.ts    ← loaded automatically
+```
+
 Each module's setup function is executed after the `wxt.config.ts` file is loaded. The `wxt` object provides everything you need to write a module:
 
 - Use `wxt.hook(...)` to hook into the build's lifecycle and make changes

packages/wxt/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## v0.20.24
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.20.23...wxt-v0.20.24)
+
+### 🩹 Fixes
+
+- Correct `actionKey` for Firefox in MV3 ([#2274](https://github.com/wxt-dev/wxt/pull/2274))
+
+### ❤️ Contributors
+
+- John Wong <john_wong@live.com>
+
+## v0.20.23
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.20.22...wxt-v0.20.23)
+
+### 🩹 Fixes
+
+- Use correct color name ([6224ff49](https://github.com/wxt-dev/wxt/commit/6224ff49))
+
+### 📖 Documentation
+
+- Re-structure the WXT Modules documentation ([#2260](https://github.com/wxt-dev/wxt/pull/2260))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](https://github.com/aklinker1))
+
 ## v0.20.22
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.20.21...wxt-v0.20.22)

packages/wxt/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.20.22",
+  "version": "0.20.24",
   "description": "⚡ Next-gen Web Extension Framework",
   "license": "MIT",
   "scripts": {

packages/wxt/src/core/utils/__tests__/manifest.test.ts

@@ -34,6 +34,7 @@ describe('Manifest Utils', () => {
   describe('generateManifest', () => {
     describe('popup', () => {
       type ActionType = 'browser_action' | 'page_action';
+      type Mv3ActionType = 'action' | 'page_action';
       const popupEntrypoint = (type?: ActionType) =>
         fakePopupEntrypoint({
           options: {
@@ -107,29 +108,39 @@ describe('Manifest Utils', () => {
         },
       );
 
-      it('should allow converting action to page_action for Firefox MV3', async () => {
-        const popup = popupEntrypoint('page_action');
-        const buildOutput = fakeBuildOutput();
-        setFakeWxt({
-          config: {
-            manifestVersion: 3,
-            outDir,
-            browser: 'firefox',
-          },
-        });
-        const expected = {
-          default_icon: popup.options.defaultIcon,
-          default_title: popup.options.defaultTitle,
-          default_popup: 'popup.html',
-        };
+      it.each<{
+        inputType: ActionType | undefined;
+        expectedType: Mv3ActionType;
+      }>([
+        { inputType: undefined, expectedType: 'action' },
+        { inputType: 'browser_action', expectedType: 'action' },
+        { inputType: 'page_action', expectedType: 'page_action' },
+      ])(
+        'should use the correct action for Firefox in mv3: %j',
+        async ({ inputType, expectedType }) => {
+          const popup = popupEntrypoint(inputType);
+          const buildOutput = fakeBuildOutput();
+          setFakeWxt({
+            config: {
+              manifestVersion: 3,
+              outDir,
+              browser: 'firefox',
+            },
+          });
+          const expected = {
+            default_icon: popup.options.defaultIcon,
+            default_title: popup.options.defaultTitle,
+            default_popup: 'popup.html',
+          };
 
-        const { manifest: actual } = await generateManifest(
-          [popup],
-          buildOutput,
-        );
+          const { manifest: actual } = await generateManifest(
+            [popup],
+            buildOutput,
+          );
 
-        expect(actual.page_action).toEqual(expected);
-      });
+          expect(actual[expectedType]).toEqual(expected);
+        },
+      );
 
       it('should include default_area for Firefox in mv3', async () => {
         const popup = fakePopupEntrypoint({

packages/wxt/src/core/utils/log/printHeader.ts

@@ -4,6 +4,6 @@ import { styleText } from 'node:util';
 
 export function printHeader() {
   consola.log(
-    `\n${styleText('gray', 'WXT')} ${styleText(['bold', 'grey'], version)}`,
+    `\n${styleText('gray', 'WXT')} ${styleText(['bold', 'gray'], version)}`,
   );
 }

packages/wxt/src/core/utils/manifest.ts

@@ -307,8 +307,9 @@ function addEntrypoints(
     const actionKey =
       manifest.manifest_version === 2
         ? (popup.options.actionType ?? 'browser_action')
-        : wxt.config.browser === 'firefox'
-          ? (popup.options.actionType ?? 'action')
+        : wxt.config.browser === 'firefox' &&
+            popup.options.actionType === 'page_action'
+          ? 'page_action'
           : 'action';
 
     manifest[actionKey] = {

templates/react/package.json

@@ -23,6 +23,6 @@
     "@types/react-dom": "^19.2.3",
     "@wxt-dev/module-react": "^1.1.5",
     "typescript": "^5.9.3",
-    "wxt": "^0.20.22"
+    "wxt": "^0.20.24"
   }
 }

templates/solid/package.json

@@ -20,6 +20,6 @@
   "devDependencies": {
     "@wxt-dev/module-solid": "^1.1.4",
     "typescript": "^5.9.3",
-    "wxt": "^0.20.22"
+    "wxt": "^0.20.24"
   }
 }

templates/svelte/package.json

@@ -21,6 +21,6 @@
     "svelte-check": "^4.4.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "wxt": "^0.20.22"
+    "wxt": "^0.20.24"
   }
 }

templates/vanilla/package.json

@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "typescript": "^5.9.3",
-    "wxt": "^0.20.22"
+    "wxt": "^0.20.24"
   }
 }

templates/vue/package.json

@@ -21,6 +21,6 @@
     "@wxt-dev/module-vue": "^1.0.3",
     "typescript": "^5.9.3",
     "vue-tsc": "^3.2.5",
-    "wxt": "^0.20.22"
+    "wxt": "^0.20.24"
   }
 }