Hot/Live reloading for React Chrome extension?

Question

Is there a simple way to accomplish this? Currently I have rerun the build every single time to see an update.

I tried the solution linked here but it still requires me to manually build each time.

I tried to use this package Chrome Extension Hot Reload but despite copying the code from the site after installing it, it says HotReload is not exported from the package, so I can't even run start or connect.

Answer 1

I spend a few days to solve this problem, I created a repo by CRA reject, it works with Manifest V3 and content script.

1. Use HRM of webpack to achieve hot reloading .
2. Use React-refresh to achieve partial refresh.

create-react-app has done all above.

Finally, Use the communication between background and content，chrome.runtime.reload can reload crx when the content is changed.

Here is a example: cra-crx-boilerplate

Answer 2

If you're using WebPack, you can achieve this in a few steps (without installing any special plugins):

In your WebPack config, set your dev server to write files to disk, instead of serving them from memory:

devServer: {
    devMiddleware: {
        writeToDisk: true,
    },
}

And set your output to wherever you told Chrome to load your extension from:

output: {
    path: 'path/to/build/',
},

Make sure that all the HTML files that you want hot reload are going through WebPack, and not statically copied to the destination folder. You can generate those HTML files with html-webpack-plugin :

entry: {
    index: 'path/to/index.js',
}
plugins: {
    new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['index'], // Should correspond to the entry point name
    }),
}

Answer 3

The short answer is no if you use Manifest V3.

It's not dependent on the framework, but more about chrome and how it manages extensions.

You can read a bit more about this here: https://groups.google.com/a/chromium.org/g/chromium-extensions/c/pYtdXH0f46E?pli=1