How to get content and background scripts to hot reload as well?

I’m having trouble figuring out what to change in webpack config in order to get my content and background scripts to hot reload with the rest of my app.

This is important for me because my extension is injecting a react component into a user’s active tab via the content script. For this reason I need the content script to hot reload.

Here is my webpack config, or at least what I think are the relevant parts.

var options = {
  mode: process.env.NODE_ENV || 'development',
  entry: {
    newtab: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.jsx'),
    content: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
    options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'),
    popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
    pageInject: path.join(__dirname, 'src', 'pages', 'PageInject', 'index.jsx'),
    background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
    contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
    devtools: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.js'),
    panel: path.join(__dirname, 'src', 'pages', 'Panel', 'index.jsx'),
  },
  chromeExtensionBoilerplate: {
    notHotReload: ['devtools'],
  },

As you can see I removed contentScript from chromeExtensionBoilerPlate.notHotReload.

Honestly I’m having trouble even understanding how this hot reloading is working, any help here is appreciated!

[tyn1998]

Hi guys, I have just added background & content-scripts auto-reload feature to this boilerplate (with some other not-related modification out of personal taste).

checkout this: https://github.com/tyn1998/chrome-extension-boilerplate-react/tree/background-contentScripts-auto-reload

IMPORTANT: you should keep service worker devtools page open to keep EventSource connection to devServer! Since service worker will be killed automactically in mv3.

I will explain how it works later. please tell me if it works.

[leemun1]

Can confirm that the change made to content script is only reflected on refreshing the page WITH the extension, not just the extension.

Interestingly, refreshing the page by itself did not change anything, nor did refreshing the extension by itself. The changes took effect only when the extension was refreshed first, THEN the page was refreshed.

I would also love to find a fix or workaround for this issue.