fix: Generate valid manifest for Firefox MV3 (#229)

e2e/tests/manifest-content.test.ts

@@ -104,26 +104,64 @@ describe('Manifest Content', () => {
       })
     `;
 
-    it('should include a background script for mv2', async () => {
+    it.each(['chrome', 'safari'])(
+      'should include scripts and persistent for %s mv2',
+      async (browser) => {
+        const project = new TestProject();
+        project.addFile('entrypoints/background.ts', backgroundContent);
+
+        await project.build({ browser, manifestVersion: 2 });
+        const manifest = await project.getOutputManifest(
+          `.output/${browser}-mv2/manifest.json`,
+        );
+
+        expect(manifest.background).toEqual({
+          persistent: true,
+          scripts: ['background.js'],
+        });
+      },
+    );
+
+    it.each(['chrome', 'safari'])(
+      'should include a service worker and type for %s mv3',
+      async (browser) => {
+        const project = new TestProject();
+        project.addFile('entrypoints/background.ts', backgroundContent);
+
+        await project.build({ browser, manifestVersion: 3 });
+        const manifest = await project.getOutputManifest(
+          `.output/${browser}-mv3/manifest.json`,
+        );
+
+        expect(manifest.background).toEqual({
+          type: 'module',
+          service_worker: 'background.js',
+        });
+      },
+    );
+
+    it('should include a background script and type for firefox mv3', async () => {
       const project = new TestProject();
       project.addFile('entrypoints/background.ts', backgroundContent);
 
-      await project.build();
-      const manifest = await project.getOutputManifest();
+      await project.build({ browser: 'firefox', manifestVersion: 3 });
+      const manifest = await project.getOutputManifest(
+        '.output/firefox-mv3/manifest.json',
+      );
 
       expect(manifest.background).toEqual({
         type: 'module',
-        service_worker: 'background.js',
+        scripts: ['background.js'],
       });
     });
 
-    it('should include a options_ui and browser_style for firefox', async () => {
+    it('should include a background script and persistent for firefox mv2', async () => {
       const project = new TestProject();
       project.addFile('entrypoints/background.ts', backgroundContent);
 
-      await project.build({ manifestVersion: 2 });
+      await project.build({ browser: 'firefox', manifestVersion: 2 });
       const manifest = await project.getOutputManifest(
-        '.output/chrome-mv2/manifest.json',
+        '.output/firefox-mv2/manifest.json',
       );
 
       expect(manifest.background).toEqual({

src/core/runners/web-ext.ts

@@ -11,6 +11,12 @@ export function createWebExtRunner(): ExtensionRunner {
     async openBrowser(config) {
       config.logger.info('Opening browser...');
 
+      if (config.browser === 'firefox' && config.manifestVersion === 3) {
+        throw Error(
+          'Dev mode does not support Firefox MV3. For alternatives, see https://github.com/wxt-dev/wxt/issues/230#issuecomment-1806881653',
+        );
+      }
+
       // Use the plugin's logger instead of web-ext's built-in one.
       const webExtLogger = await import('web-ext-run/util/logger');
       webExtLogger.consoleStream.write = ({ level, msg, name }) => {

src/core/utils/manifest.ts

@@ -154,7 +154,12 @@ function addEntrypoints(
 
   if (background) {
     const script = getEntrypointBundlePath(background, config.outDir, '.js');
-    if (manifest.manifest_version === 3) {
+    if (config.browser === 'firefox' && config.manifestVersion === 3) {
+      manifest.background = {
+        type: background.options.type,
+        scripts: [script],
+      };
+    } else if (config.manifestVersion === 3) {
       manifest.background = {
         type: background.options.type,
         service_worker: script,