Hot Reloading a Chrome Extension with Webpack

[figure-anna]

Your hot reload solution is great, and it worked for me wonderfully when I was building out the Google Extension tutorial.

However, now that I am building a more complex extension with webpack, I am not able to get hot reloading to work. After some research, I found that the hot-reload module stops polling after I run npm run build. That command removes, and rebuilds the dist folder that houses all my unpacked extension files.

The hot-reload file is added as one of the entries in webpack.config. So, when the app is rebuilt, I wonder if hot-reload.js gets deleted?.. Or, it loses the connection to file system because now it's a different dist folder?

Wondering if you, or someone has run into this problem before, or if you have ideas on how to solve it.

[figure-anna]

I got it to work.

First of all, running webpack in watch mode, not rebuilding it got me halfway there - the extension was reloading, but not the tab.

Then, I found out that File.lastModifiedDate is being deprecated (source), and I used lastModified instead.

Now, I run webpack watch, and after a few moments, the current tab is reloaded.

My entry looks like this:

  entry: {
    background_script: path.join(__dirname, 'src/background_script/index.ts'),
    content_script: path.join(__dirname, 'src/content_script/index.ts'),
    hot_reload: path.join(__dirname, 'src/common/hot-reload.js'),
  },

[xpl]

@figure-anna Please also see the PR #8 made by @AndersDJohnson. It might be related...

Regarding that:

Then, I found out that File.lastModifiedDate is being deprecated (source), and I used lastModified instead.

So we should change it the source, right? Could you please submit your edit to the repo? I would greatly appreciate it!