Background scripts for Firefox result in build error when using Manifest V3

[circuitwarden]

🐛 bug report

Firefox requires background scripts to be included in the manifest.json using 'background.scripts' instead of 'background.service_worker':

"background": {
  "scripts": ["background-script.js"]
}

Including the above 'scripts' object in the manifest file results in 'Invalid Web Extension manifest' build failure.

🎛 Configuration (.babelrc, package.json, cli command)

Error encountered when running command: 'npm run build'

{
	"mangle": false,
	"output": {
		"beautify": true,
		"indent_level": 2
	}
}

// package.json
{
	"private": true,
	"scripts": {
		"build": "parcel build source/manifest.json --no-content-hash --no-source-maps --dist-dir distribution --no-cache --detailed-report 0",
		"lint": "run-p lint:*",
		"lint-fix": "run-p 'lint:* -- --fix'",
		"lint:css": "stylelint source/**/*.css",
		"lint:js": "xo",
		"test": "run-p lint:* build",
		"watch": "parcel watch source/manifest.json --dist-dir distribution --no-cache --no-hmr"
	},
	"browserslist": [
		"last 1 Chrome version",
		"last 1 Firefox version"
	],
	"xo": {
		"envs": [
			"browser",
			"webextensions"
		]
	},
	"stylelint": {
		"extends": "stylelint-config-xo"
	},
	"dependencies": {
		"webext-base-css": "^1.4.1",
		"webext-options-sync": "^3.1.0"
	},
	"devDependencies": {
		"@parcel/config-webextension": "^2.6.2",
		"npm-run-all": "^4.1.5",
		"parcel": "^2.6.2",
		"process": "^0.11.10",
		"stylelint": "^14.9.1",
		"stylelint-config-xo": "^0.21.0",
		"xo": "^0.50.0"
	},
	"webExt": {
		"sourceDir": "distribution",
		"run": {
			"startUrl": [
				"https://github.com/fregante/browser-extension-template"
			]
		}
	},
	"@parcel/bundler-default-bug": "https://github.com/parcel-bundler/parcel/issues/8071",
	"@parcel/bundler-default": {
		"minBundles": 10000000
	}
}

🤔 Expected Behavior

Parcel does not require Chrome specific manifest v3 parameters, including 'background.service_worker'

😯 Current Behavior

Parcel supports Chrome manifest v3 extensions, but does not seem to support Firefox's version of manifest v3.

Parcel build fails when background.service_worker is excluded from manifest.json in favor of Firefox's preferred background.scripts

**Build Error:**

🚨 Build failed.

@parcel/transformer-webextension: Invalid Web Extension manifest

  /....../source/manifest.json:38:18
    37 |       },
  > 38 |     "background": {
  >    |                   ^
  > 39 |     "scripts": ["background.js"]
  >    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 40 |     }
  >    | ^^^^^ Missing property service\_worker
    41 | 
    42 | }

💁 Possible Solution

A couple solutions come to mind:

1. Skip Chrome-specific validations for manifest files using v3 (remove validations of 'background' object)
2. Add support for background.script object in the manifest file for v3
3. Number 2 + include support for multiple named manifest files
   -- Included as a nice-to-have: without support for named manifest files changes to the manifest will be required each time the extension is built for Firefox

🔦 Context

I have created a new browser extension using Parcel and manifest V3. I primarily used Chrome documentation when building the extension. When attempting to test and build the extension for use on Firefox, I noticed this issue with Parcel's support for manifest v3 using Firefox.

Firefox added support for manifest v3 on January 17, 2023 in Firefox 109.

Prevents Parcel from being used for Firefox extensions when creating a Manifest v3 extension using background scripts.

Relevant Mozilla developer docs.

💻 Code Sample

"background": {
  "scripts": ["background.js"]
}

See other samples in this S/O post.

🌍 Your Environment

Software	Version(s)
Parcel	2.6.2
Node	19.4.0
npm	9.2.0
Operating System	MacOS 13.1

[kuroppe1819]

I am interested, so I would like to work on this.

[fregante]

I think the change is similar to #8867, with the exception that the key here also points to a file that needs to be bundled (but that code should already be there)

[tdriley]

From PR #9068:

this was released as part of 2.10.0

...but using version 2.10.3 of parcel and @parcel/config-webextension, I'm seeing this issue very similar to the description here.

> parcel watch src/manifest.json --host localhost --config @parcel/config-webextension

🚨 Build failed.

@parcel/transformer-webextension: Invalid Web Extension manifest

  ...src/manifest.json:22:9
    21 |     "background": {
  > 22 |         "scripts": ["background.js"],
  >    |         ^^^^^^^^^ Possible values: "type"
    23 |         "service_worker": "background.js"
    24 |     },

Was this functionality actually not merged in PR #9068 ?

Currently it seems it is not possible to use parcel to set up a usable cross-browser extension, because it doesn't support the background.scripts manifest property, and Firefox does not currently have (as of FF 121) allowing background.service_worker switched on by default.

[Wexcode]

Adding the Error details text to this issue so it's searchable:

background.service_worker is currently disabled

[Wexcode]

I came up with a temporary solution in src/manifest.json that works for my use-case:

  "background": {
    "scripts": []
  }

This works for my case where:

• I am building an extension for Firefox
• I don't have a background script that needs to run

[tdriley]

I came up with a temporary solution in src/manifest.json that works for my use-case:

Yes this will allow you to run the build for a Firefox extension with parcel, but not being able to have any type of background script/worker is a show stopper for me. I'd like to be able to use parcel for a cross-browser extension but if this cannot be fixed, then back to webpack :(

Hopefully Firefox will speed up their promised support for background.service_worker, and this problem will go away, but it is unclear when they will do that.

[fregante]

This issue was about supporting background.scripts in MV3, this works.

I opened a separate issue in order to allow both keys in the manifest:

• [webextensions] Parcel doesn't accept manifest v3 with both service_worker and scripts #9458

I came up with a temporary solution in src/manifest.json that works for my use-case:

What for? Parcel does not require background scripts to be set. If you don't need it, remove the background property altogether.

[tdriley]

@fregante Thanks for clearing that up and creating the new issue. I had missed that I can currently use parcel to build both if I start with a separate manifest.json for each browser.

So, for Firefox src/firefox/manifest.json:

    ...
    "background": {
        "scripts": ["../background.js"]
    },
    ....

And for Chrome src/chrome/manifest.json:

    ...
    "background": {
        "service_worker": "../background.js",
        "type": "module"
    },
    ...

Then in package.json scripts:

  ...
  "scripts": {
    "watch:chrome": "parcel watch src/chrome/manifest.json --dist-dir dist-chrome --host localhost --config @parcel/config-webextension",
    "build:chrome": "parcel build src/chrome/manifest.json --dist-dir dist-chrome --config @parcel/config-webextension",
    "watch:firefox": "parcel watch src/firefox/manifest.json --dist-dir dist-firefox --host localhost --config @parcel/config-webextension",
    "build:firefox": "parcel build src/firefox/manifest.json --dist-dir dist-firefox --config @parcel/config-webextension"
  },
  ...