Add support for Web Extension manifest V3

[101arrowz]

↪️ Pull Request

Adds support for Manifest V3 to @parcel/transformer-webextension.
Closes #6079
Fixes #6494
Fixes #7568
Fixes #7385
Fixes #7835 (mostly)
Fixes #7808
Fixes #5865

HMR is not working due to MV3 restrictions on CSP. Refreshing the page does update the extension though.

✔️ PR Todo

• Added/updated unit tests for this change
• Included links to related issues/PRs

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[101arrowz]

While trying to add HMR, I came across this issue, which is probably not a blocker because most people will just parcel watch but it is something to note.

I'm moving this out of draft stage because I really don't know how to get HMR working but this MV3 transformer does seem to work properly beyond that, so until we can work something out it's a useful addition.

[101arrowz]

Finished adding tests, this PR should now be ready for merging.

[marcomow]

great job @101arrowz ! Thank you so much!

Is there a way we can "Buy you a coffe/beer"?

And of course the same goes for the reviewer @devongovett :)

[sergey-shpak]

@101arrowz thank you very much! 🚀
@devongovett, @mischnic we are waiting for the release of this feature)

[Q0]

@101arrowz thank you very much for your work! 🚀
And thanks to everyone who participated in this PR.

We look forward to the release and start updating extensions 🎉

[devongovett]

In a few hours, you'll be able to test it out in tonight's nightly release. Please do, and report any issues you find. It'll be officially released in the next minor, which should be in a few days if all goes well.

[fregante]

The time has come

[101arrowz]

In a few hours, you'll be able to test it out in tonight's nightly release

Awesome, thanks you so much for reviewing!

Is there a way we can "Buy you a coffee/beer"?

Feel free to donate to the Open Collective for Parcel, the maintainers deserve the support more than I do :)

[101arrowz]

Also for anyone testing please refer to the docs at parcel-bundler/website#1014 (live at this link). @devongovett The docs should probably be implemented before the next minor release.

[dougwithseismic]

Also for anyone testing please refer to the docs at parcel-bundler/website#1014 (live at this link). @devongovett The docs should probably be implemented before the next minor release.

Any tips for a novice on how to grab the nightly?

[101arrowz]

npm install parcel@nightly or yarn add parcel@nightly should work.

[devongovett]

(Nightly releases are at midnight UTC, so you'll need to wait until then.)

[mischnic]

(And also make sure to install the nightly versions of both parcel and @parcel/config-webextension)

[Stvad]

Hmm, seems nightly release action is failing: https://github.com/parcel-bundler/parcel/runs/5993495011?check_suite_focus=true last successfuly published nightly was 4 days ago 🤔

[fregante]

It seems that the manifest validator is too strict and doesn't say why. It immediately fails when the browser_specific_settings key is found:

@parcel/transformer-webextension: Invalid Web
Extension manifest

Also it automatically adds a broken/unnecessary web_accessible_resources key:

Input manifest

{
	"name": "Awesome Extension",
	"version": "0.0.0",
	"description": "An awesome new browser extension",
	"homepage_url": "https://github.com/fregante/browser-extension-template",
	"manifest_version": 3,
	"minimum_chrome_version": "100",
	"icons": {
		"128": "icon.png"
	},
	"permissions": [
		"storage"
	],
	"host_permissions": [
		"https://github.com/*"
	],
	"content_scripts": [
		{
			"matches": [ "https://github.com/fregante/browser-extension-template/*" ],
			"js": [ "content.js" ],
			"css": [ "content.css" ],
			"run_at": "document_end"
		}
	],
	"options_ui": {
		"browser_style": true,
		"page": "options.html"
	},
	"background": {
		"service_worker": "background.js",
		"type": "module"
	}
}

Output manifest

{
	"name": "Awesome Extension",
	"version": "0.0.0",
	"description": "An awesome new browser extension",
	"homepage_url": "https://github.com/fregante/browser-extension-template",
	"manifest_version": 3,
	"minimum_chrome_version": "100",
	"icons": { "128": "icon.da91f5eb.png" },
	"permissions": ["storage"],
	"host_permissions": [
		"https://github.com/*"
	],
	"content_scripts": [
		{
			"matches": ["https://github.com/fregante/browser-extension-template/*"],
			"js": ["manifest.e36317c5.js"],
			"css": ["manifest.d108b4c6.css"],
			"run_at": "document_end"
		}
	],
	"options_ui": { "browser_style": true, "page": "options.29b7abd3.html" },
	"background": {
		"service_worker": "background.2784684d.js",
		"type": "module"
	},
	"web_accessible_resources": [
		{
			"matches": ["https://github.com/fregante/browser-extension-template/*"],
			"extension_ids": [],
			"resources": []
		}
	]
}

And chrome throws with:

Failed to load extension from: ./distribution. Invalid value for 'web_accessible_resources[0]'. Invalid match pattern.

Live test at fregante/browser-extension-template#75

[mischnic]

Please open new issues for bugs.

I just tried a small example and it does say why it failed for browser_specific_settings:

$ yarn parcel build manifest.json
yarn run v1.22.18
warning package.json: No license field
$ node_modules/.bin/parcel build manifest.json
🚨 Build failed.

@parcel/transformer-webextension: Invalid Web Extension manifest

  manifest.json:9:3
     8 |   },
  >  9 |   "browser_specific_settings": {
  >    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^ Possible values: "default\_locale", "icons", "author", "chrome\_settings\_overrides", "chrome\_url\_overrides", "commands", "content\_scripts", "devtools\_page", "dictionaries", "externally\_connectable", "file\_browser\_handlers", "file\_system\_provider\_capabilities", "homepage\_url", "incognito", "minimum\_chrome\_version", "offline\_enabled", "omnibox", "optional\_permissions", "options\_ui", "permissions", "protocol\_handlers", "requirements", "short\_name", "sidebar\_action", "storage", "theme", "tts\_engine", "user\_scripts", "version\_name", "action", "content\_security\_policy", "host\_permissions", "web\_accessible\_resources"
    10 |     "gecko": {
    11 |       "id": "addon@example.com",

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[fregante]

I just tried a small example and it does say why it failed for browser_specific_settings:

It didn't for me:

Until I did a clean install of everything:

[rickiesmooth]

I've installed the nighly's but when I build I get the following error:

yarn run v1.22.17
$ parcel build manifest.json --target webext-prod

🚨 Build failed.

@parcel/transformer-js: Service workers cannot have imports or exports without the `type: "module"` option.

  /Users/rick/dev/react-parcel-web-extension/src/scripts/background.ts:1:1
  > 1 | import browser, { Tabs } from "webextension-polyfill";
  >   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  💡 Add {type: 'module'} as a second argument to the navigator.serviceWorker.register() call.
  📝 Learn more: https://parceljs.org/languages/javascript/#classic-scripts

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This used to work and I couldn't find anything in the new docs that I needed to change

[devongovett]

Did you try the suggestion in the error message?

[irgendwr]

@rickiesmooth See the comment from @101arrowz:

you need to specify that it's a module type service worker. This behavior is consistent with browsers.

"background": {
    "service_worker": "background.ts",
    "type": "module"
}

[rickiesmooth]

@devongovett in my app code I couldn't find the navigator.serviceWorker.register call, but as @irgendwr mentioned I should just add it to the manifest! sorry about that

[sergey-shpak]

running production on top of parcel nightly release - thug dev life 🤷

[devongovett]

This was released in v2.5.0 earlier today fyi

[sergey-shpak]

@101arrowz @devongovett found few issues: #7997