chore(release): v0.14.5

CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## v0.14.5
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.14.4...v0.14.5)
+
+### 🚀 Enhancements
+
+- Add `dev.reloadCommand` config ([#362](https://github.com/wxt-dev/wxt/pull/362))
+
+### 🩹 Fixes
+
+- Disable reload dev command when 4 commands are already registered ([#361](https://github.com/wxt-dev/wxt/pull/361))
+
+## v0.14.4
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.14.3...v0.14.4)
+
+### 🩹 Fixes
+
+- Allow requiring built-in node modules from ESM CLI ([#356](https://github.com/wxt-dev/wxt/pull/356))
+
+### 🏡 Chore
+
+- Add unit tests for passing flags via the CLI ([#354](https://github.com/wxt-dev/wxt/pull/354))
+
+## v0.14.3
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.14.2...v0.14.3)
+
+### 🩹 Fixes
+
+- Make `getArrayFromFlags` result can be undefined ([#352](https://github.com/wxt-dev/wxt/pull/352))
+
+### ❤️ Contributors
+
+- Yuns ([@yunsii](http://github.com/yunsii))
+
 ## v0.14.2
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.14.1...v0.14.2)

package.json

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

scripts/build.ts

@@ -97,6 +97,11 @@ const config: tsup.Options[] = [
       cli: 'src/cli.ts',
     },
     format: ['esm'],
+    banner: {
+      // Fixes dynamic require of nodejs modules. See https://github.com/wxt-dev/wxt/issues/355
+      // https://github.com/evanw/esbuild/issues/1921#issuecomment-1152991694
+      js: "import { createRequire } from 'module';const require = createRequire(import.meta.url);",
+    },
   },
 ];
 

src/__tests__/cli.test.ts

@@ -0,0 +1,376 @@
+import { describe, it, vi, beforeEach, expect } from 'vitest';
+import { build } from '../core/build';
+import { createServer } from '../core/create-server';
+import { zip } from '../core/zip';
+import { prepare } from '../core/prepare';
+import { clean } from '../core/clean';
+import { initialize } from '../core/initialize';
+import { mock } from 'vitest-mock-extended';
+import consola from 'consola';
+
+vi.mock('../core/build');
+const buildMock = vi.mocked(build);
+
+vi.mock('../core/create-server');
+const createServerMock = vi.mocked(createServer);
+
+vi.mock('../core/zip');
+const zipMock = vi.mocked(zip);
+
+vi.mock('../core/prepare');
+const prepareMock = vi.mocked(prepare);
+
+vi.mock('../core/clean');
+const cleanMock = vi.mocked(clean);
+
+vi.mock('../core/initialize');
+const initializeMock = vi.mocked(initialize);
+
+consola.wrapConsole();
+
+const ogArgv = process.argv;
+
+function mockArgv(...args: string[]) {
+  process.argv = ['/bin/node', 'bin/wxt.mjs', ...args];
+}
+
+describe('CLI', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    process.argv = ogArgv;
+    createServerMock.mockResolvedValue(mock());
+  });
+
+  describe('dev', () => {
+    it('should not pass any config when no flags are passed', async () => {
+      mockArgv();
+      await import('../cli');
+
+      expect(createServerMock).toBeCalledWith({});
+    });
+
+    it('should respect passing a custom root', async () => {
+      mockArgv('path/to/root');
+      await import('../cli');
+
+      expect(createServerMock).toBeCalledWith({
+        root: 'path/to/root',
+      });
+    });
+
+    it('should respect a custom config file', async () => {
+      mockArgv('-c', './path/to/config.ts');
+      await import('../cli');
+
+      expect(createServerMock).toBeCalledWith({
+        configFile: './path/to/config.ts',
+      });
+    });
+
+    it('should respect passing a custom mode', async () => {
+      mockArgv('-m', 'development');
+      await import('../cli');
+
+      expect(createServerMock).toBeCalledWith({
+        mode: 'development',
+      });
+    });
+
+    it('should respect passing a custom browser', async () => {
+      mockArgv('-b', 'firefox');
+      await import('../cli');
+
+      expect(createServerMock).toBeCalledWith({
+        browser: 'firefox',
+      });
+    });
+
+    it('should pass correct filtered entrypoints', async () => {
+      mockArgv('-e', 'popup', '-e', 'options');
+      await import('../cli');
+
+      expect(createServerMock).toBeCalledWith({
+        filterEntrypoints: ['popup', 'options'],
+      });
+    });
+
+    it('should respect passing --mv2', async () => {
+      mockArgv('--mv2');
+      await import('../cli');
+
+      expect(createServerMock).toBeCalledWith({
+        manifestVersion: 2,
+      });
+    });
+
+    it('should respect passing --mv3', async () => {
+      mockArgv('--mv3');
+      await import('../cli');
+
+      expect(createServerMock).toBeCalledWith({
+        manifestVersion: 3,
+      });
+    });
+
+    it('should respect passing --debug', async () => {
+      mockArgv('--debug');
+      await import('../cli');
+
+      expect(createServerMock).toBeCalledWith({
+        debug: true,
+      });
+    });
+  });
+
+  describe('build', () => {
+    it('should not pass any config when no flags are passed', async () => {
+      mockArgv('build');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({});
+    });
+
+    it('should respect passing a custom root', async () => {
+      mockArgv('build', 'path/to/root');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({
+        root: 'path/to/root',
+      });
+    });
+
+    it('should respect a custom config file', async () => {
+      mockArgv('build', '-c', './path/to/config.ts');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({
+        configFile: './path/to/config.ts',
+      });
+    });
+
+    it('should respect passing a custom mode', async () => {
+      mockArgv('build', '-m', 'development');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({
+        mode: 'development',
+      });
+    });
+
+    it('should respect passing a custom browser', async () => {
+      mockArgv('build', '-b', 'firefox');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({
+        browser: 'firefox',
+      });
+    });
+
+    it('should pass correct filtered entrypoints', async () => {
+      mockArgv('build', '-e', 'popup', '-e', 'options');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({
+        filterEntrypoints: ['popup', 'options'],
+      });
+    });
+
+    it('should respect passing --mv2', async () => {
+      mockArgv('build', '--mv2');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({
+        manifestVersion: 2,
+      });
+    });
+
+    it('should respect passing --mv3', async () => {
+      mockArgv('build', '--mv3');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({
+        manifestVersion: 3,
+      });
+    });
+
+    it('should include analysis in the build', async () => {
+      mockArgv('build', '--analyze');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({
+        analysis: {
+          enabled: true,
+        },
+      });
+    });
+
+    it('should respect passing --debug', async () => {
+      mockArgv('build', '--debug');
+      await import('../cli');
+
+      expect(buildMock).toBeCalledWith({
+        debug: true,
+      });
+    });
+  });
+
+  describe('zip', () => {
+    it('should not pass any config when no flags are passed', async () => {
+      mockArgv('zip');
+      await import('../cli');
+
+      expect(zipMock).toBeCalledWith({});
+    });
+
+    it('should respect passing a custom root', async () => {
+      mockArgv('zip', 'path/to/root');
+      await import('../cli');
+
+      expect(zipMock).toBeCalledWith({
+        root: 'path/to/root',
+      });
+    });
+
+    it('should respect a custom config file', async () => {
+      mockArgv('zip', '-c', './path/to/config.ts');
+      await import('../cli');
+
+      expect(zipMock).toBeCalledWith({
+        configFile: './path/to/config.ts',
+      });
+    });
+
+    it('should respect passing a custom mode', async () => {
+      mockArgv('zip', '-m', 'development');
+      await import('../cli');
+
+      expect(zipMock).toBeCalledWith({
+        mode: 'development',
+      });
+    });
+
+    it('should respect passing a custom browser', async () => {
+      mockArgv('zip', '-b', 'firefox');
+      await import('../cli');
+
+      expect(zipMock).toBeCalledWith({
+        browser: 'firefox',
+      });
+    });
+
+    it('should respect passing --mv2', async () => {
+      mockArgv('zip', '--mv2');
+      await import('../cli');
+
+      expect(zipMock).toBeCalledWith({
+        manifestVersion: 2,
+      });
+    });
+
+    it('should respect passing --mv3', async () => {
+      mockArgv('zip', '--mv3');
+      await import('../cli');
+
+      expect(zipMock).toBeCalledWith({
+        manifestVersion: 3,
+      });
+    });
+
+    it('should respect passing --debug', async () => {
+      mockArgv('zip', '--debug');
+      await import('../cli');
+
+      expect(zipMock).toBeCalledWith({
+        debug: true,
+      });
+    });
+  });
+
+  describe('prepare', () => {
+    it('should not pass any config when no flags are passed', async () => {
+      mockArgv('prepare');
+      await import('../cli');
+
+      expect(prepareMock).toBeCalledWith({});
+    });
+
+    it('should respect passing a custom root', async () => {
+      mockArgv('prepare', 'path/to/root');
+      await import('../cli');
+
+      expect(prepareMock).toBeCalledWith({
+        root: 'path/to/root',
+      });
+    });
+
+    it('should respect a custom config file', async () => {
+      mockArgv('prepare', '-c', './path/to/config.ts');
+      await import('../cli');
+
+      expect(prepareMock).toBeCalledWith({
+        configFile: './path/to/config.ts',
+      });
+    });
+
+    it('should respect passing --debug', async () => {
+      mockArgv('prepare', '--debug');
+      await import('../cli');
+
+      expect(prepareMock).toBeCalledWith({
+        debug: true,
+      });
+    });
+  });
+
+  describe('clean', () => {
+    it('should not pass any config when no flags are passed', async () => {
+      mockArgv('clean');
+      await import('../cli');
+
+      expect(cleanMock).toBeCalledWith(undefined);
+    });
+
+    it('should respect passing a custom root', async () => {
+      mockArgv('clean', 'path/to/root');
+      await import('../cli');
+
+      expect(cleanMock).toBeCalledWith('path/to/root');
+    });
+  });
+
+  describe('init', () => {
+    it('should not pass any options when no flags are passed', async () => {
+      mockArgv('init');
+      await import('../cli');
+
+      expect(initializeMock).toBeCalledWith({});
+    });
+
+    it('should respect the provided folder', async () => {
+      mockArgv('init', 'path/to/folder');
+      await import('../cli');
+
+      expect(initializeMock).toBeCalledWith({
+        directory: 'path/to/folder',
+      });
+    });
+
+    it('should respect passing --template', async () => {
+      mockArgv('init', '-t', 'vue');
+      await import('../cli');
+
+      expect(initializeMock).toBeCalledWith({
+        template: 'vue',
+      });
+    });
+
+    it('should respect passing --pm', async () => {
+      mockArgv('init', '--pm', 'pnpm');
+      await import('../cli');
+
+      expect(initializeMock).toBeCalledWith({
+        packageManager: 'pnpm',
+      });
+    });
+  });
+});

src/cli.ts

@@ -70,9 +70,7 @@ cli
         manifestVersion: flags.mv3 ? 3 : flags.mv2 ? 2 : undefined,
         configFile: flags.config,
         debug: flags.debug,
-        analysis: {
-          enabled: flags.analyze,
-        },
+        analysis: flags.analyze ? { enabled: true } : undefined,
         filterEntrypoints: getArrayFromFlags(flags, 'filterEntrypoint'),
       });
     }),
@@ -141,7 +139,7 @@ cli
     ),
   );
 
-cli.parse();
+cli.parse(process.argv);
 
 /**
  * Wrap an action handler to add a timer, error handling, and maybe enable debug mode.
@@ -188,5 +186,6 @@ function wrapAction(
  */
 function getArrayFromFlags<T>(flags: any, name: string): T[] | undefined {
   const array = [flags[name]].flat() as Array<T | undefined>;
-  return array.filter((item) => item != null) as T[];
+  const result = array.filter((item) => item != null) as T[];
+  return result.length ? result : undefined;
 }

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

@@ -6,6 +6,7 @@ import {
   fakeBuildOutput,
   fakeEntrypoint,
   fakeInternalConfig,
+  fakeManifestCommand,
   fakeOptionsEntrypoint,
   fakePopupEntrypoint,
 } from '../testing/fake-objects';
@@ -52,7 +53,11 @@ describe('Manifest Utils', () => {
           },
         };
 
-        const actual = await generateManifest([popup], buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          [popup],
+          buildOutput,
+          config,
+        );
 
         expect(actual).toMatchObject(expected);
       });
@@ -79,7 +84,11 @@ describe('Manifest Utils', () => {
             default_popup: 'popup.html',
           };
 
-          const actual = await generateManifest([popup], buildOutput, config);
+          const { manifest: actual } = await generateManifest(
+            [popup],
+            buildOutput,
+            config,
+          );
 
           expect(actual[expectedType]).toEqual(expected);
         },
@@ -102,7 +111,11 @@ describe('Manifest Utils', () => {
           action: config.manifest.action,
         };
 
-        const actual = await generateManifest([], buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          [],
+          buildOutput,
+          config,
+        );
 
         expect(actual).toMatchObject(expected);
       });
@@ -131,7 +144,11 @@ describe('Manifest Utils', () => {
           page: 'options.html',
         };
 
-        const actual = await generateManifest([options], buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          [options],
+          buildOutput,
+          config,
+        );
 
         expect(actual.options_ui).toEqual(expected);
       });
@@ -149,7 +166,11 @@ describe('Manifest Utils', () => {
           page: 'options.html',
         };
 
-        const actual = await generateManifest([options], buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          [options],
+          buildOutput,
+          config,
+        );
 
         expect(actual.options_ui).toEqual(expected);
       });
@@ -179,7 +200,7 @@ describe('Manifest Utils', () => {
               service_worker: 'background.js',
             };
 
-            const actual = await generateManifest(
+            const { manifest: actual } = await generateManifest(
               [background],
               buildOutput,
               config,
@@ -201,7 +222,7 @@ describe('Manifest Utils', () => {
             scripts: ['background.js'],
           };
 
-          const actual = await generateManifest(
+          const { manifest: actual } = await generateManifest(
             [background],
             buildOutput,
             config,
@@ -226,7 +247,7 @@ describe('Manifest Utils', () => {
               scripts: ['background.js'],
             };
 
-            const actual = await generateManifest(
+            const { manifest: actual } = await generateManifest(
               [background],
               buildOutput,
               config,
@@ -248,7 +269,7 @@ describe('Manifest Utils', () => {
             scripts: ['background.js'],
           };
 
-          const actual = await generateManifest(
+          const { manifest: actual } = await generateManifest(
             [background],
             buildOutput,
             config,
@@ -274,7 +295,11 @@ describe('Manifest Utils', () => {
         });
         const config = fakeInternalConfig();
 
-        const actual = await generateManifest(entrypoints, buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+          config,
+        );
 
         expect(actual.icons).toEqual({
           16: 'icon-16.png',
@@ -296,7 +321,11 @@ describe('Manifest Utils', () => {
         });
         const config = fakeInternalConfig();
 
-        const actual = await generateManifest(entrypoints, buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+          config,
+        );
 
         expect(actual.icons).toBeUndefined();
       });
@@ -323,7 +352,11 @@ describe('Manifest Utils', () => {
           },
         });
 
-        const actual = await generateManifest(entrypoints, buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+          config,
+        );
 
         expect(actual.icons).toEqual(expected);
       });
@@ -423,7 +456,11 @@ describe('Manifest Utils', () => {
           ],
         };
 
-        const actual = await generateManifest(entrypoints, buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+          config,
+        );
 
         expect(actual.content_scripts).toContainEqual({
           matches: ['*://google.com/*'],
@@ -480,7 +517,11 @@ describe('Manifest Utils', () => {
           },
         });
 
-        const actual = await generateManifest(entrypoints, buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+          config,
+        );
 
         expect(actual.content_scripts).toContainEqual(userContentScript);
         expect(actual.content_scripts).toContainEqual(generatedContentScript);
@@ -516,7 +557,7 @@ describe('Manifest Utils', () => {
               command: 'build',
             });
 
-            const actual = await generateManifest(
+            const { manifest: actual } = await generateManifest(
               entrypoints,
               buildOutput,
               config,
@@ -561,7 +602,7 @@ describe('Manifest Utils', () => {
               command: 'build',
             });
 
-            const actual = await generateManifest(
+            const { manifest: actual } = await generateManifest(
               entrypoints,
               buildOutput,
               config,
@@ -604,7 +645,7 @@ describe('Manifest Utils', () => {
             manifestVersion: 3,
           });
 
-          const actual = await generateManifest(
+          const { manifest: actual } = await generateManifest(
             entrypoints,
             buildOutput,
             config,
@@ -646,7 +687,7 @@ describe('Manifest Utils', () => {
             manifestVersion: 2,
           });
 
-          const actual = await generateManifest(
+          const { manifest: actual } = await generateManifest(
             entrypoints,
             buildOutput,
             config,
@@ -685,7 +726,7 @@ describe('Manifest Utils', () => {
             manifestVersion: 3,
           });
 
-          const actual = await generateManifest(
+          const { manifest: actual } = await generateManifest(
             entrypoints,
             buildOutput,
             config,
@@ -735,7 +776,11 @@ describe('Manifest Utils', () => {
           },
         });
 
-        const actual = await generateManifest(entrypoints, buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+          config,
+        );
 
         expect(actual.web_accessible_resources).toEqual([
           { resources: ['one.png'], matches: ['*://one.com/*'] },
@@ -777,7 +822,11 @@ describe('Manifest Utils', () => {
           },
         });
 
-        const actual = await generateManifest(entrypoints, buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+          config,
+        );
 
         expect(actual.web_accessible_resources).toEqual([
           'one.png',
@@ -800,7 +849,11 @@ describe('Manifest Utils', () => {
           author: newAuthor,
         };
 
-        const actual = await generateManifest(entrypoints, buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+          config,
+        );
 
         expect(actual).toMatchObject(expected);
       });
@@ -822,7 +875,7 @@ describe('Manifest Utils', () => {
             },
           });
 
-          const actual = await generateManifest(
+          const { manifest: actual } = await generateManifest(
             entrypoints,
             buildOutput,
             config,
@@ -848,7 +901,7 @@ describe('Manifest Utils', () => {
             },
           });
 
-          const actual = await generateManifest(
+          const { manifest: actual } = await generateManifest(
             entrypoints,
             buildOutput,
             config,
@@ -873,7 +926,7 @@ describe('Manifest Utils', () => {
             },
           });
 
-          const actual = await generateManifest(
+          const { manifest: actual } = await generateManifest(
             entrypoints,
             buildOutput,
             config,
@@ -894,7 +947,11 @@ describe('Manifest Utils', () => {
           },
         });
 
-        const actual = await generateManifest(entrypoints, buildOutput, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          buildOutput,
+          config,
+        );
 
         expect(actual.version).toBe('0.0.0');
         expect(actual.version_name).toBeUndefined();
@@ -908,6 +965,7 @@ describe('Manifest Utils', () => {
     describe('commands', () => {
       const reloadCommandName = 'wxt:reload-extension';
       const reloadCommand = {
+        description: expect.any(String),
         suggested_key: {
           default: 'Alt+R',
         },
@@ -918,21 +976,65 @@ describe('Manifest Utils', () => {
         const output = fakeBuildOutput();
         const entrypoints = fakeArray(fakeEntrypoint);
 
-        const actual = await generateManifest(entrypoints, output, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          output,
+          config,
+        );
 
-        expect(actual.commands).toMatchObject({
+        expect(actual.commands).toEqual({
           [reloadCommandName]: reloadCommand,
         });
       });
 
+      it('should customize the reload commands key binding if passing a custom command', async () => {
+        const config = fakeInternalConfig({
+          command: 'serve',
+          dev: {
+            reloadCommand: 'Ctrl+E',
+          },
+        });
+        const output = fakeBuildOutput();
+        const entrypoints = fakeArray(fakeEntrypoint);
+
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          output,
+          config,
+        );
+
+        expect(actual.commands).toEqual({
+          [reloadCommandName]: {
+            ...reloadCommand,
+            suggested_key: {
+              default: 'Ctrl+E',
+            },
+          },
+        });
+      });
+
+      it("should not include the reload command when it's been disabled", async () => {
+        const config = fakeInternalConfig({
+          command: 'serve',
+          dev: {
+            reloadCommand: false,
+          },
+        });
+        const output = fakeBuildOutput();
+        const entrypoints = fakeArray(fakeEntrypoint);
+
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          output,
+          config,
+        );
+
+        expect(actual.commands).toBeUndefined();
+      });
+
       it('should not override any existing commands when adding the one to reload the extension', async () => {
         const customCommandName = 'custom-command';
-        const customCommand = {
-          description: 'Some other command',
-          suggested_key: {
-            default: 'Ctrl+H',
-          },
-        };
+        const customCommand = fakeManifestCommand();
         const config = fakeInternalConfig({
           command: 'serve',
           manifest: {
@@ -944,20 +1046,52 @@ describe('Manifest Utils', () => {
         const output = fakeBuildOutput();
         const entrypoints = fakeArray(fakeEntrypoint);
 
-        const actual = await generateManifest(entrypoints, output, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          output,
+          config,
+        );
 
-        expect(actual.commands).toMatchObject({
+        expect(actual.commands).toEqual({
           [reloadCommandName]: reloadCommand,
           [customCommandName]: customCommand,
         });
       });
 
+      it('should not include the command if there are already 4 others (the max)', async () => {
+        const commands = {
+          command1: fakeManifestCommand(),
+          command2: fakeManifestCommand(),
+          command3: fakeManifestCommand(),
+          command4: fakeManifestCommand(),
+        };
+        const config = fakeInternalConfig({
+          command: 'serve',
+          manifest: { commands },
+        });
+        const output = fakeBuildOutput();
+        const entrypoints = fakeArray(fakeEntrypoint);
+
+        const { manifest: actual, warnings } = await generateManifest(
+          entrypoints,
+          output,
+          config,
+        );
+
+        expect(actual.commands).toEqual(commands);
+        expect(warnings).toHaveLength(1);
+      });
+
       it('should not include the command when building an extension', async () => {
         const config = fakeInternalConfig({ command: 'build' });
         const output = fakeBuildOutput();
         const entrypoints = fakeArray(fakeEntrypoint);
 
-        const actual = await generateManifest(entrypoints, output, config);
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          output,
+          config,
+        );
 
         expect(actual.commands).toBeUndefined();
       });

src/core/utils/building/get-internal-config.ts

@@ -79,6 +79,7 @@ export async function getInternalConfig(
   const typesDir = path.resolve(wxtDir, 'types');
   const outBaseDir = path.resolve(root, mergedConfig.outDir ?? '.output');
   const outDir = path.resolve(outBaseDir, `${browser}-mv${manifestVersion}`);
+  const reloadCommand = mergedConfig.dev?.reloadCommand ?? 'Alt+R';
 
   const runnerConfig = await loadConfig<ExtensionRunnerConfig>({
     name: 'web-ext',
@@ -136,6 +137,9 @@ export async function getInternalConfig(
         mergedConfig.experimental?.includeBrowserPolyfill ?? true,
     },
     server,
+    dev: {
+      reloadCommand,
+    },
   };
 
   const builder = await createViteBuilder(
@@ -221,6 +225,10 @@ function mergeInlineConfig(
     },
     vite: undefined,
     transformManifest: undefined,
+    dev: {
+      ...userConfig.dev,
+      ...inlineConfig.dev,
+    },
   };
 }
 

src/core/utils/building/internal-build.ts

@@ -38,7 +38,12 @@ export async function internalBuild(
   const entrypoints = await findEntrypoints(config);
   config.logger.debug('Detected entrypoints:', entrypoints);
   const groups = groupEntrypoints(entrypoints);
-  const { output } = await rebuild(config, entrypoints, groups, undefined);
+  const { output, warnings } = await rebuild(
+    config,
+    entrypoints,
+    groups,
+    undefined,
+  );
 
   // Post-build
   await printBuildSummary(
@@ -48,6 +53,10 @@ export async function internalBuild(
     config,
   );
 
+  for (const warning of warnings) {
+    config.logger.warn(...warning);
+  }
+
   if (config.analysis.enabled) {
     await combineAnalysisStats(config);
     config.logger.info(

src/core/utils/building/rebuild.ts

@@ -33,7 +33,11 @@ export async function rebuild(
     steps: [],
     publicAssets: [],
   },
-): Promise<{ output: BuildOutput; manifest: Manifest.WebExtensionManifest }> {
+): Promise<{
+  output: BuildOutput;
+  manifest: Manifest.WebExtensionManifest;
+  warnings: any[][];
+}> {
   const { default: ora } = await import('ora');
   const spinner = ora(`Preparing...`).start();
 
@@ -51,11 +55,8 @@ export async function rebuild(
     publicAssets: [...existingOutput.publicAssets, ...newOutput.publicAssets],
   };
 
-  const newManifest = await generateManifest(
-    allEntrypoints,
-    mergedOutput,
-    config,
-  );
+  const { manifest: newManifest, warnings: manifestWarnings } =
+    await generateManifest(allEntrypoints, mergedOutput, config);
   const finalOutput: BuildOutput = {
     manifest: newManifest,
     ...newOutput,
@@ -77,5 +78,6 @@ export async function rebuild(
       ],
     },
     manifest: newManifest,
+    warnings: manifestWarnings,
   };
 }

src/core/utils/manifest.ts

@@ -54,7 +54,8 @@ export async function generateManifest(
   entrypoints: Entrypoint[],
   buildOutput: Omit<BuildOutput, 'manifest'>,
   config: InternalConfig,
-): Promise<Manifest.WebExtensionManifest> {
+): Promise<{ manifest: Manifest.WebExtensionManifest; warnings: any[][] }> {
+  const warnings: any[][] = [];
   const pkg = await getPackageJson(config);
 
   let versionName =
@@ -75,16 +76,6 @@ export async function generateManifest(
     short_name: pkg?.shortName,
     icons: discoverIcons(buildOutput),
   };
-  if (config.command === 'serve') {
-    baseManifest.commands = {
-      'wxt:reload-extension': {
-        description: 'Reload the extension during development',
-        suggested_key: {
-          default: 'Alt+R',
-        },
-      },
-    };
-  }
   const userManifest = config.manifest;
 
   const manifest = defu(
@@ -92,6 +83,23 @@ export async function generateManifest(
     baseManifest,
   ) as Manifest.WebExtensionManifest;
 
+  // Add reload command in dev mode
+  if (config.command === 'serve' && config.dev.reloadCommand) {
+    if (manifest.commands && Object.keys(manifest.commands).length >= 4) {
+      warnings.push([
+        "Extension already has 4 registered commands, WXT's reload command is disabled",
+      ]);
+    } else {
+      manifest.commands ??= {};
+      manifest.commands['wxt:reload-extension'] = {
+        description: 'Reload the extension during development',
+        suggested_key: {
+          default: config.dev.reloadCommand,
+        },
+      };
+    }
+  }
+
   // Apply the final version fields after merging the user manifest
   manifest.version = version;
   manifest.version_name =
@@ -117,7 +125,10 @@ export async function generateManifest(
     );
   }
 
-  return finalManifest;
+  return {
+    manifest: finalManifest,
+    warnings,
+  };
 }
 
 /**

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

@@ -4,7 +4,7 @@
 import { resolve } from 'path';
 import { faker } from '@faker-js/faker';
 import merge from 'lodash.merge';
-import type { Manifest } from '~/browser';
+import { Commands, type Manifest } from '~/browser';
 import {
   FsCache,
   InternalConfig,
@@ -244,6 +244,9 @@ export const fakeInternalConfig = fakeObjectCreator<InternalConfig>(() => {
       includeBrowserPolyfill: true,
     },
     builder: mock(),
+    dev: {
+      reloadCommand: 'Alt+R',
+    },
   };
 });
 
@@ -257,3 +260,11 @@ export const fakeBuildStepOutput = fakeObjectCreator<BuildStepOutput>(() => ({
   chunks: fakeArray(fakeOutputChunk),
   entrypoints: fakeArray(fakeEntrypoint),
 }));
+
+export const fakeManifestCommand = fakeObjectCreator<Commands.Command>(() => ({
+  description: faker.string.sample(),
+  shortcut: `${faker.helpers.arrayElement(['ctrl', 'alt'])}+${faker.number.int({
+    min: 0,
+    max: 9,
+  })}`,
+}));

src/types/external.ts

@@ -229,6 +229,24 @@ export interface InlineConfig {
      */
     includeBrowserPolyfill?: boolean;
   };
+  /**
+   * Config effecting dev mode only.
+   */
+  dev?: {
+    /**
+     * Controls whether a custom keyboard shortcut command, `Alt+R`, is added during dev mode to
+     * quickly reload the extension.
+     *
+     * If false, the shortcut is not added during development.
+     *
+     * If set to a custom string, you can override the key combo used. See
+     * [Chrome's command docs](https://developer.chrome.com/docs/extensions/reference/api/commands)
+     * for available options.
+     *
+     * @default "Alt+R"
+     */
+    reloadCommand?: string | false;
+  };
 }
 
 // TODO: Extract to @wxt/vite-builder and use module augmentation to include the vite field

src/types/internal.ts

@@ -57,6 +57,9 @@ export interface InternalConfig {
     includeBrowserPolyfill: boolean;
   };
   builder: WxtBuilder;
+  dev: {
+    reloadCommand: string | false;
+  };
 }
 
 export interface FsCache {