Support reloading the code inside the Chrome extension

[jessepinho]

At the moment, our Chrome extension doesn't support hot reloading. When we make changes to the extension code, we don't see those changes in the extension until we:

1. navigate to chrome://extensions
2. hit the Reload button on the Penumbra wallet extension
3. go back to the Penumbra dev site
4. reload the page (thus losing any state we might have on e.g., a Send Transaction form)
5. click the Penumbra wallet extension button
6. type in our wallet password to unlock the extension

This is because, when we load the unpacked extension (via its dist directory) into Chrome, Chrome stores the built files internally and doesn't know that they're being updated.

Ideally, we should have a dev entrypoint file for the extension that includes hot-reloading capabilities. Per @turbocrime's point below, we'll still need to refresh the page for it to talk to the updated version of the extension; but at least we won't have to go through all the above steps.

[turbocrime]

mozilla provides a pretty nice extension development tool called web-ext that supports chrome and provides a hot-reloading tool.

there's a couple webpack plugins available, but i don't remember which is the good one.

i also had a very simple webpack plugin i used in early development

https://github.com/turbocrime/transport-demo/blob/65f88795a7f178e4d0c0ab346197fdf08fc937de/demo-ext/webpack.config.js#L38-L56

[turbocrime]

it is not possible to update an extension but continue using the extension in an already-loaded page. the chrome runtime forcibly invalidates the page's extension context

[jessepinho]

it is not possible to update an extension but continue using the extension in an already-loaded page. the chrome runtime forcibly invalidates the page's extension context

@turbocrime That's fine — maybe I used "hot-reloading" incorrectly in my original issue, then, since it technically doesn't work the way we'd expect hot-reloading to work. That said, getting the extension to update without going through the lengthy Chrome reload process would still be a big win. Thanks for the links/hints!

[grod220]

We should toss this as well: https://github.com/penumbra-zone/web/blob/main/apps/extension/webpack/webpack.dev.js#L9-L24. It clearly isn't working...

[turbocrime]

i experimented with a few different frameworks that supposedly provide this, but they all contain various issues that prevented use.

most achieved hmr by making all content scripts available as web_accessible_resources. this is fine for dev but not appropriate for production

[jessepinho]

@turbocrime can we use a different manifest in dev vs. prod?

[turbocrime]

sure, that's the correct approach, options like crxjs lacked configuration to achieve that and other necessary features

and using the frameworks is a significant reconfig/refactor. the most promising was wxt https://github.com/penumbra-zone/web/tree/turbocrime/wxt