Limits of the HMR client

[fregante]

I noticed that this plugin supports HMR, but it's not clear to me what's required to make it work and in what context it can work.

I load my extensions via web-ext run and they're reloaded (kind of) automatically when my dist folder changes. This causes the content scripts to lose connection with the background page so they will no longer work until the page is refreshed.

Does HMR only work on chrome-extension:// pages?

Does HMR only work on self-contained React components? i.e. that don't require messaging.

Do I need to set up some "unload" mechanism for the previous content script? Currently a web-ext reload will just reinject content script and every change to the page will be reapplied (unless I have code to block it)

[Jack-Works]

You need to first set up your extension as documented: https://github.com/awesome-webextension/webpack-target-webextension#hot-module-reload . Those steps allow the webpack bundle to load HMR chunks.

This plugin only set up the raw webpack HMR support, which means you need to call import.meta.webpackHot.accept manually.

If you need to support React components HMR, please configure https://github.com/pmmmwh/react-refresh-webpack-plugin this plugin in your webpack.

This plugin supports:

• HMR for chrome-extension://
• HMR for content script

This plugin does not support:

• HMR for MV3 background worker

You can try it in examples/hmr-mv2

[fregante]

Thank you! I'll give it a try