Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web extension patches #9068

Merged
merged 9 commits into from
Oct 3, 2023
Merged

Web extension patches #9068

merged 9 commits into from
Oct 3, 2023

Conversation

101arrowz
Copy link
Member

@101arrowz 101arrowz commented Jun 3, 2023

↪️ Pull Request

Fixes #8159
Fixes #8404
Fixes #8590
Fixes #8707
Fixes #8785
Closes #8906

This PR should generally fix some of the key issues with the web extension transformer. The main key issue remaining is #8071; the rest of the open issues are mostly QoL things. This PR might fix also #8071 but I can't test it extensively enough to verify.

This PR also makes two key changes to how HMR works. Now, extension reloads cause all active content scripts to reload as well, and content scripts wait 500ms to give time for the extension to reload before they reload their own webpages.

Not sure how testable these changes are, but there are some questionable modifications I made in hmr-runtime.js that may be worth looking at closely.

@101arrowz 101arrowz requested a review from mischnic June 3, 2023 05:00
@101arrowz
Copy link
Member Author

cc @devongovett

@101arrowz
Copy link
Member Author

Bump - this should be relatively safe to merge, I've been using a patch-package version of this for a few months in production.

@parcel-benchmark
Copy link

parcel-benchmark commented Sep 3, 2023

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 1.42s -29.00ms
Cached 279.00ms +12.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

Bundle Size Difference Time Difference
dist/legacy/index.b8ae99ba.css 94.00b +0.00b 267.00ms +14.00ms ⚠️
dist/modern/index.31cedca9.css 94.00b +0.00b 266.00ms +14.00ms ⚠️

React HackerNews ✅

Timings

Description Time Difference
Cold 3.80s +1.00ms
Cached 419.00ms +18.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/PermalinkedComment.e9dc4a75.js 3.92kb +0.00b 299.00ms -27.00ms 🚀
dist/UserProfile.8945a243.js 1.38kb +0.00b 300.00ms -26.00ms 🚀
dist/NotFound.8b44a81d.js 269.00b +0.00b 300.00ms -26.00ms 🚀
dist/logo.8dd07848.png 244.00b +0.00b 222.00ms -36.00ms 🚀

Cached Bundles

Bundle Size Difference Time Difference
dist/index.js 459.11kb +0.00b 988.00ms +65.00ms ⚠️
dist/PermalinkedComment.e9dc4a75.js 3.92kb +0.00b 359.00ms +33.00ms ⚠️
dist/UserProfile.8945a243.js 1.38kb +0.00b 358.00ms +32.00ms ⚠️
dist/NotFound.8b44a81d.js 269.00b +0.00b 358.00ms +33.00ms ⚠️
dist/logo.8dd07848.png 244.00b +0.00b 275.00ms +25.00ms ⚠️

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 30.92s -678.00ms
Cached 2.08s -49.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/index.62f8ad91.js 3.78mb +0.00b 14.70s -780.00ms 🚀
dist/media-viewer.38e3999a.js 536.13kb +0.00b 9.80s +2.25s ⚠️
dist/ConfigPanelFieldsLoader.182d39bc.js 303.43kb +0.00b 7.12s -435.00ms 🚀
dist/card.d06de810.js 138.91kb +0.00b 7.10s -445.00ms 🚀
dist/ElementBrowser.e8f01080.js 61.94kb +0.00b 7.11s -446.00ms 🚀
dist/archive.c374f622.js 59.90kb +0.00b 9.84s +2.29s ⚠️
dist/esm.bfca2115.js 59.30kb +0.00b 7.12s -435.00ms 🚀
dist/ConfigPanelFieldsLoader.2b7c03be.js 15.74kb +0.00b 7.11s -445.00ms 🚀
dist/ui.8c117104.js 14.48kb +0.00b 7.11s -446.00ms 🚀
dist/ConfigPanelFieldsLoader.5dfde67d.js 13.63kb +0.00b 7.11s -445.00ms 🚀
dist/pdfRenderer.01deafa1.js 12.04kb +0.00b 7.10s -444.00ms 🚀
dist/mobile-upload.3baad8e4.js 7.79kb +0.00b 7.12s -435.00ms 🚀
dist/mobile-upload.7a892a37.js 7.79kb +0.00b 7.12s -434.00ms 🚀
dist/ru.0cf3f40e.js 2.81kb +0.00b 7.11s -445.00ms 🚀
dist/uk.282f23b1.js 2.76kb +0.00b 7.11s -445.00ms 🚀
dist/codeViewerRenderer.51140ec8.js 2.61kb +0.00b 8.82s +1.27s ⚠️
dist/th.137e1013.js 2.60kb +0.00b 7.11s -445.00ms 🚀
dist/vi.b46097db.js 2.09kb +0.00b 7.11s -445.00ms 🚀
dist/tr.c85d90a9.js 2.03kb +0.00b 7.11s -445.00ms 🚀
dist/sv.1c06c95c.js 1.98kb +0.00b 7.11s -445.00ms 🚀
dist/zh_TW.b7c55aa6.js 1.86kb +0.00b 7.11s -445.00ms 🚀
dist/zh.b01fe721.js 1.84kb +0.00b 7.10s -446.00ms 🚀
dist/workerHasher.540c9790.js 1.56kb +0.00b 7.12s -435.00ms 🚀
dist/workerHasher.c840c607.js 1.56kb +0.00b 7.12s -435.00ms 🚀
dist/sk.4be9c93f.js 656.00b +0.00b 7.11s -445.00ms 🚀
dist/simpleHasher.c14e20b4.js 589.00b +0.00b 7.12s -435.00ms 🚀
dist/simpleHasher.23db7a52.js 589.00b +0.00b 7.12s -434.00ms 🚀
dist/ro.8d5b380a.js 482.00b +0.00b 7.11s +1.92s ⚠️
dist/index.html 248.00b +0.00b 6.88s +2.20s ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/refractor.3e0cc31b.js 598.96kb +0.00b 10.33s +613.00ms ⚠️
dist/media-viewer.38e3999a.js 536.13kb +0.00b 10.21s +517.00ms ⚠️
dist/popup.a77286c1.js 321.45kb +0.00b 10.33s +613.00ms ⚠️
dist/EmojiPickerComponent.4a196252.js 188.61kb +0.00b 10.21s +518.00ms ⚠️
dist/ConfigPanelFieldsLoader.28b428a5.js 82.73kb +0.00b 10.21s +518.00ms ⚠️
dist/esm.34897092.js 62.95kb +0.00b 10.33s +614.00ms ⚠️
dist/archive.c374f622.js 59.90kb +0.00b 10.33s +613.00ms ⚠️
dist/esm.5e913efb.js 39.11kb +0.00b 10.33s +614.00ms ⚠️
dist/smartMediaEditor.efa59853.js 21.68kb +0.00b 10.33s +614.00ms ⚠️
dist/esm.aee9cbf1.js 20.43kb +0.00b 10.33s +613.00ms ⚠️
dist/dropzone.77a8e729.js 13.40kb +0.00b 10.33s +614.00ms ⚠️
dist/dropzone.1c15cdc1.js 11.48kb +0.00b 10.33s +614.00ms ⚠️
dist/Toolbar.4d256e97.js 9.36kb +0.00b 10.33s +614.00ms ⚠️
dist/clipboard.400013a2.js 7.92kb +0.00b 10.33s +614.00ms ⚠️
dist/mobile-upload.2102debb.js 7.79kb +0.00b 10.33s +613.00ms ⚠️
dist/index.runtime.e32c1d2d.js 7.29kb +0.00b 10.33s +612.00ms ⚠️
dist/browser.0009c8b4.js 7.19kb +0.00b 10.33s +614.00ms ⚠️
dist/index.b16227d6.css 4.08kb +0.00b 10.34s +614.00ms ⚠️
dist/media-viewer-analytics-error-boundary.60bdaa4c.js 3.18kb +0.00b 10.33s +613.00ms ⚠️
dist/media-picker-analytics-error-boundary.c493f011.js 3.18kb +0.00b 10.33s +614.00ms ⚠️
dist/media-card-analytics-error-boundary.74e0c7f9.js 3.18kb +0.00b 10.33s +613.00ms ⚠️
dist/codeViewerRenderer.51140ec8.js 2.61kb +0.00b 10.33s +613.00ms ⚠️
dist/workerHasher.730f3766.js 1.56kb +0.00b 10.33s +614.00ms ⚠️
dist/workerHasher.9b1fcdbf.js 1.56kb +0.00b 10.33s +614.00ms ⚠️
dist/workerHasher.02b63a21.js 1.56kb +0.00b 10.33s +614.00ms ⚠️
dist/simpleHasher.eefc98b4.js 589.00b +0.00b 10.33s +614.00ms ⚠️
dist/simpleHasher.47b9c809.js 589.00b +0.00b 10.33s +614.00ms ⚠️
dist/simpleHasher.cadc19c6.js 589.00b +0.00b 10.33s +614.00ms ⚠️
dist/index.html 248.00b +0.00b 10.38s +593.00ms ⚠️

Three.js ✅

Timings

Description Time Difference
Cold 2.80s -32.00ms
Cached 309.00ms +1.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

Click here to view a detailed benchmark overview.

},
{
filePath: __filename,
// cache bust on non-asset manifest.json changes
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why exactly are all of these caching workaround necessary here (this and invalidateOnBuild above)?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be the only way to make the extension reload (i.e. have an HMR update sent out) when the manifest.json changes. I tried many other strategies but none seemed to work.

@mischnic mischnic merged commit ef759a2 into v2 Oct 3, 2023
16 checks passed
@mischnic mischnic deleted the webext-patchup branch October 3, 2023 09:18
@mischnic
Copy link
Member

mischnic commented Oct 3, 2023

And once again: thank you for your contributions for the web extension functionality!

@fregante
Copy link
Contributor

fregante commented Oct 3, 2023

Thank you @101arrowz!

program.permissions.push('scripting');
}
const hostPerms = [
...new Set(program.content_scripts.flatMap(sc => sc.matches)),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm getting an error here: @parcel/transformer-webextension: Cannot read properties of undefined (reading 'flatMap')

Trying to build a MV2 without content_scripts

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already tracked in #9335

@sailerinteractive
Copy link

Are these changes already available in Parcel 2.10.2? If not, is it foreseeable when they are going to be released? Thanks!

@mischnic
Copy link
Member

Yes, this was released as part of 2.10.0

@tdriley
Copy link

tdriley commented Dec 31, 2023

Yes, this was released as part of 2.10.0

The issue described in #8785 appears to still be happening for me using v2.10.3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants