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

[williamlmao]

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!

[twigs67]

Also curious about this. It seems like v3 with the use of service workers, makes this difficult.

[twigs67]

I was at this most of yesterday and I could not figure out how to hot reload with manifest v3. There has to be a way, because removing the extension and loading it again is just not feasible for development.

[andy-rsa]

Change your 'notHotReload' to include 'contentScript' and 'background'

chromeExtensionBoilerplate: {
notHotReload: ['devtools' , 'contentScript', 'background' ],
},

it appears the 'notHotReload' entry is not intuitively named (at least from the behavior i see - not having to unload and reload my extension).

[williamlmao]

Huh @andy-rsa, just tried that but it's not working for me.

[andy-rsa]

weird, this is what I'm doing in addition.

1. run 'npm start' in the project folder (so changes are detected and built).
2. click 'reload' on the extension in browser's extensions tab
3. reload the page that is using the extension

I had a problem where things stopped working for a bit so i did this

1. stop content.styles.css @import doesn't work #1 from above
2. run 'npm run-script build' once and verify that the expected files were built in the build directory
3. continue with 1-3 above

Note: I ran myself in circles for 5 minutes very frustrated that it didn't appear that it was working until I realized I was hitting refresh on the wrong extension in the browser's extension page. Make sure you're clicking refresh on the extension you're developing and hit reload on the page that you're using to test the extension.

just to continue the rubber-ducking, remove and reload the extension once just to make sure you're getting the right folder (verify you see the files you're expecting).
good luck

for reference this is what that part of my webpack.config.js looks like

entry: {
    contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
    background: path.join(__dirname, 'src', 'background.js'),
  },
  chromeExtensionBoilerplate: {
    notHotReload: [ 'contentScript', 'background' ],
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].bundle.js',
    publicPath: ASSET_PATH,
  },

this is what gets created in my build folder. When you add the extension to your browser, verify you see the files you're expecting.

this is what my extension's manifest.json looks like

[williamlmao]

hey @andy-rsa, ahhh! thanks for the detail here. So you're right, it is hot reloading into the build folder now BUT for some reason the changes don't make it to chrome unless I hit refresh on the chrome extension. When I make changes in popup, the changes propogate into the extension with only a page refresh and not an extension refresh.

Anyways, thanks for the help here! Not having to run npm run build every time is the biggest thing anyways.

[mikemklee]

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.

[pacexy]

Hi, I wrote a package mv3-hot-reload for solving this problem, it is easy to use.

[adventurini]

Hi, I wrote a package mv3-hot-reload for solving this problem, it is easy to use.

I cannot seem to get this working with this boilerplate. I am getting a process is not defined error.

[pacexy]

@adventurini You should ensure webpack process your dependency code correctly.

[nxvinh222]

@willliuwillliu how do you inject a react component into an user active tab, i currently inject plain HTML using $(data).appendTo('body') and it's not very efficiently

[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.

[raed667]

Any update on this issue?

[jktzes]

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.

Sorry if this is asking too much but is there any chance you could cherrypick the change to support hot reload and create a PR?