Repository: parcel-bundler/parcel (JavaScript)

Issue:
[webextensions] Parcel doesn't accept manifest v3 with both `service_worker` and `scripts`
# 🐛 bug report

Parcel supports _either_ `background.service_worker` or `background.scripts`, but not both.

Firefox supports `background.scripts`, but warns that it doesn't support the other one.

Chrome won't load a manifest that has `background.scripts`

## 🎛 Configuration (.babelrc, package.json, cli command)

<!--- If describing a bug, tell us what your babel configuration looks like -->

```json
{
	"extends": "@parcel/config-webextension"
}
```
```json
{
	"name": "Awesome Extension",
	"version": "0.0.0",
	"description": "An awesome new browser extension",
	"manifest_version": 3,
	"background": {
		"service_worker": "background.js",
		"type": "module",
		"scripts": [ "background.js" ]
	}
}
```

## 🤔 Expected Behavior

Parcel should build both, so that the extension can (eventually) be loaded in both browsers

## 😯 Current Behavior

```js
🚨 Build failed.

@parcel/transformer-webextension: Invalid Web 
Extension manifest

  ./source/manifest.json:36:3
    35 |   "background": {
  > 36 |     "service_worker": "background.js",
  >    |     ^^^^^^^^^^^^^^^^ Possible values: "page", "persistent"
  > 37 |     "type": "module",
  >    |     ^^^^^^ Possible values: "page", "persistent"
    38 |     "scripts": [ "background.js" ]
    39 |   }
```

## 💁 Possible Solution

Allow and build both pages, ideally build a single `background.js` file without generating two separate bundles.

## 🔦 Context

Chrome has been open to allowing the `scripts` property in the manifest without throwing, however this hasn't been fixed in several months. It would be great for Parcel to start supporting it as soon as possible so that we don't have to wait any longer once Chrome supports it.

## 💻 Code Sample

1. Check this out https://github.com/fregante/browser-extension-template
2. Add `"scripts": ["background.js"],` to its manifest 

## 🌍 Your Environment

<!--- Include as many relevant details about the environment you experienced the bug in -->

| Software         | Version(s) |
| ---------------- | ---------- |
| Parcel           | 2.10.3
| Node             | 20
| npm/Yarn         | 10
| Operating System | macOS

<!-- Love parcel? Please consider supporting our collective:
👉  https://opencollective.com/parcel/donate -->



Discussion:
Additional relevant threads:

- Other report: https://github.com/parcel-bundler/parcel/issues/8785#issuecomment-1872618090
- Intent to ship in Chrome 121 (Tue, Jan 23, 2024) https://github.com/w3c/webextensions/issues/282#issuecomment-1786857524
- This bug blocks me: https://github.com/fregante/browser-extension-template/issues/78#issuecomment-1848921642
Chrome 121 is out and this is preventing me from building cross-browser MV3 extensions unfortunately.
Per https://stackoverflow.com/a/78088358/180709 both are valid and this *finally* allows truly cross-browser extension packaging with Parcel.

Please allow both keys.
> both are valid and this _finally_ allows truly cross-browser extension packaging with Parcel.

This is great news!

Official docs from Chrome about their MV3 manifest accepting the MV2 background values without erroring: https://developer.chrome.com/docs/extensions/whats-new#background-key-warning


Do you have any ETA when these changes will be released?



Patch:
diff --git a/packages/transformers/webextension/src/WebExtensionTransformer.js b/packages/transformers/webextension/src/WebExtensionTransformer.js
index 51cbe6a0ef7..3ee647fe8a9 100644
--- a/packages/transformers/webextension/src/WebExtensionTransformer.js
+++ b/packages/transformers/webextension/src/WebExtensionTransformer.js
@@ -273,7 +273,8 @@ async function collectDependencies(
         ...getJSONSourceLocation(ptrs['/background/page'], 'value'),
       },
     });
-  } else if (program.background?.service_worker) {
+  }
+  if (program.background?.service_worker) {
     program.background.service_worker = asset.addURLDependency(
       program.background.service_worker,
       {
diff --git a/packages/transformers/webextension/src/schema.js b/packages/transformers/webextension/src/schema.js
index 20f6dc6ca08..3f38853ef8b 100644
--- a/packages/transformers/webextension/src/schema.js
+++ b/packages/transformers/webextension/src/schema.js
@@ -473,6 +473,10 @@ export const MV3Schema = ({
               type: 'string',
               enum: ['classic', 'module'],
             },
+            // to support both Chrome and Firefox
+            scripts: arrStr,
+            page: string,
+            persistent: boolean,
           },
           additionalProperties: false,
           required: ['service_worker'],


Test patch:
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/manifest.json b/packages/core/integration-tests/test/integration/webextension-mv3/manifest.json
index b8ff5f08993..08398794f2c 100644
--- a/packages/core/integration-tests/test/integration/webextension-mv3/manifest.json
+++ b/packages/core/integration-tests/test/integration/webextension-mv3/manifest.json
@@ -4,7 +4,9 @@
   "version": "0.1",
   "manifest_version": 3,
   "background": {
-    "service_worker": "background.js"
+    "service_worker": "background.js",
+    "type": "module",
+    "scripts": [ "background.js" ]
   },
   "permissions": [
     "scripting",
diff --git a/packages/core/integration-tests/test/webextension.js b/packages/core/integration-tests/test/webextension.js
index f31629fffb7..2e2a681fbfc 100644
--- a/packages/core/integration-tests/test/webextension.js
+++ b/packages/core/integration-tests/test/webextension.js
@@ -111,6 +111,7 @@ describe('webextension', function () {
         assets: ['manifest.json'],
       },
       {assets: ['background.js']},
+      {assets: ['background.js']},
       {assets: ['popup.html']},
       {assets: ['popup.css']},
       {assets: ['popup.js', 'esmodule-helpers.js', 'bundle-url.js']},