Add support for Web Extension manifest V3 #7050

101arrowz · 2021-10-11T00:36:22Z

↪️ 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 · 2021-10-11T00:36:23Z

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 · 2021-10-21T03:50:39Z

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.

packages/transformers/webextension/src/WebExtensionTransformer.js

101arrowz · 2021-10-25T22:09:33Z

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

packages/transformers/webextension/src/WebExtensionTransformer.js

marcomow · 2022-04-11T09:32:00Z

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 · 2022-04-11T10:06:07Z

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

Q0 · 2022-04-11T11:56:27Z

@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 · 2022-04-11T15:01:27Z

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 · 2022-04-11T15:23:53Z

The time has come

101arrowz · 2022-04-11T16:32:34Z

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 · 2022-04-11T17:00:15Z

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 · 2022-04-11T17:33:47Z

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 · 2022-04-11T17:55:55Z

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

devongovett · 2022-04-11T18:16:47Z

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

mischnic · 2022-04-11T18:47:01Z

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

Stvad · 2022-04-12T21:34:31Z

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 · 2022-04-14T10:30:13Z

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 · 2022-04-14T10:47:33Z

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": "[email protected]",

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

fregante · 2022-04-14T11:22:14Z

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 · 2022-04-20T13:25:03Z

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 · 2022-04-20T13:52:17Z

Did you try the suggestion in the error message?

irgendwr · 2022-04-20T13:56:45Z

@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 · 2022-04-20T15:35:47Z

@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 · 2022-04-22T00:05:12Z

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

devongovett · 2022-04-22T00:15:01Z

This was released in v2.5.0 earlier today fyi

sergey-shpak · 2022-04-23T09:17:13Z

@101arrowz @devongovett found few issues: #7997

101arrowz added 2 commits October 10, 2021 12:20

initial work

1871c28

Fix MV3

663bce3

101arrowz marked this pull request as draft October 11, 2021 00:36

101arrowz mentioned this pull request Oct 11, 2021

Support manifest v3 for web extensions #6079

Closed

101arrowz added 5 commits October 12, 2021 11:39

Merge branch 'v2' into v2

967ad13

Merge branch 'v2' into v2

d06a776

Merge branch 'v2' into v2

cd58baa

Merge branch 'v2' into v2

bf15cd3

working on hmr

8c40207

Merge branch 'v2' into v2

2f03e50

101arrowz marked this pull request as ready for review October 21, 2021 03:50

101arrowz commented Oct 22, 2021

View reviewed changes

packages/transformers/webextension/src/WebExtensionTransformer.js Outdated Show resolved Hide resolved

burhanuday mentioned this pull request Oct 24, 2021

Support web manifest v3 for web extensions in @parcel/config-webextension #7175

Closed

101arrowz added 4 commits October 25, 2021 08:51

Merge branch 'v2' into v2

5434a10

Improved error messages

9b5698b

fix sourceType for script background service workers

a71db1d

new tests

fa12c2f

101arrowz added 5 commits October 25, 2021 20:12

Merge branch 'v2' into v2

93927b4

Merge branch 'v2' into v2

d638758

Fix lint

e2dc5c1

Merge branch 'v2' into v2

da0a335

Merge branch 'v2' into v2

6847f22

mischnic reviewed Oct 31, 2021

View reviewed changes

packages/transformers/webextension/src/WebExtensionTransformer.js Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

101arrowz added 2 commits November 12, 2021 19:22

Merge branch 'v2' into v2

6ec72ba

Merge branch 'v2' into v2

0cb5cd7

Darhagonable mentioned this pull request Nov 20, 2021

Migrate to Manifest V3 Darhagonable/Projectize#2

Open

Fix dependencies

669f618

devongovett merged commit af7bada into parcel-bundler:v2 Apr 11, 2022

101arrowz mentioned this pull request Apr 11, 2022

[Web Extension Transformer] doesn't support code splitting #5859

Closed

This was referenced Apr 14, 2022

Web Extension Transformer: esmodule-helpers.js fails to load #7952

Closed

Web Extension Transformer: a broken web_accessible_resources field is added #7953

Closed

101arrowz mentioned this pull request Apr 14, 2022

Webextension fixes #7958

Merged

JRegimbal mentioned this pull request Apr 22, 2022

Chrome browser extension will break in Jan 2023 due to manifest version Shared-Reality-Lab/IMAGE-browser#199

Closed

circuitwarden mentioned this pull request Jan 23, 2023

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

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for Web Extension manifest V3 #7050

Add support for Web Extension manifest V3 #7050

101arrowz commented Oct 11, 2021 •

edited

Loading

height bot commented Oct 11, 2021

101arrowz commented Oct 21, 2021

101arrowz commented Oct 25, 2021

This comment has been minimized.

marcomow commented Apr 11, 2022 •

edited

Loading

sergey-shpak commented Apr 11, 2022

Q0 commented Apr 11, 2022

devongovett commented Apr 11, 2022

fregante commented Apr 11, 2022

101arrowz commented Apr 11, 2022

101arrowz commented Apr 11, 2022

dougwithseismic commented Apr 11, 2022

101arrowz commented Apr 11, 2022

devongovett commented Apr 11, 2022

mischnic commented Apr 11, 2022

Stvad commented Apr 12, 2022

fregante commented Apr 14, 2022 •

edited

Loading

mischnic commented Apr 14, 2022

fregante commented Apr 14, 2022 •

edited

Loading

rickiesmooth commented Apr 20, 2022 •

edited

Loading

devongovett commented Apr 20, 2022

irgendwr commented Apr 20, 2022 •

edited

Loading

rickiesmooth commented Apr 20, 2022

sergey-shpak commented Apr 22, 2022

devongovett commented Apr 22, 2022

sergey-shpak commented Apr 23, 2022 •

edited

Loading

Add support for Web Extension manifest V3 #7050

Add support for Web Extension manifest V3 #7050

Conversation

101arrowz commented Oct 11, 2021 • edited Loading

↪️ Pull Request

✔️ PR Todo

height bot commented Oct 11, 2021

101arrowz commented Oct 21, 2021

101arrowz commented Oct 25, 2021

This comment has been minimized.

marcomow commented Apr 11, 2022 • edited Loading

sergey-shpak commented Apr 11, 2022

Q0 commented Apr 11, 2022

devongovett commented Apr 11, 2022

fregante commented Apr 11, 2022

101arrowz commented Apr 11, 2022

101arrowz commented Apr 11, 2022

dougwithseismic commented Apr 11, 2022

101arrowz commented Apr 11, 2022

devongovett commented Apr 11, 2022

mischnic commented Apr 11, 2022

Stvad commented Apr 12, 2022

fregante commented Apr 14, 2022 • edited Loading

mischnic commented Apr 14, 2022

fregante commented Apr 14, 2022 • edited Loading

rickiesmooth commented Apr 20, 2022 • edited Loading

devongovett commented Apr 20, 2022

irgendwr commented Apr 20, 2022 • edited Loading

rickiesmooth commented Apr 20, 2022

sergey-shpak commented Apr 22, 2022

devongovett commented Apr 22, 2022

sergey-shpak commented Apr 23, 2022 • edited Loading

101arrowz commented Oct 11, 2021 •

edited

Loading

marcomow commented Apr 11, 2022 •

edited

Loading

fregante commented Apr 14, 2022 •

edited

Loading

fregante commented Apr 14, 2022 •

edited

Loading

rickiesmooth commented Apr 20, 2022 •

edited

Loading

irgendwr commented Apr 20, 2022 •

edited

Loading

sergey-shpak commented Apr 23, 2022 •

edited

Loading