Hot Module Reload (HMR) for Content Scripts

[awardx]

Describe the bug
Outdated webpack-chrome-extension-reloader plugin version.

To Reproduce
Follow the steps from README documentation to install fresh boilerplate.

Expected behavior
After reading some information about webpack-chrome-extension-reloader plugin, and asking a question to @rubenspgcavalcante, I realised that HMR should work for content scripts too.

Solution
Update webpack-chrome-extension-reloader plugin version from 0.8.3 to 1.3.0 in the package.json file.

Result
Now when I make any changes in the content-script.js file, extension along with the browser page gets reloaded without any problems. So much easier to work now.

[Kocal]

Ah, I didn't know webpack-chrome-extension-reloader was outdated.

Thanks, I will see what I can do.

[awardx]

@Kocal A quick update, I just realised that there might have been a problem with webpack.config.js configuration, not the outdated version.

Before I had a file structure where I would keep my content script files in a separate folder such as
/conent/content-script1.js. And my webpack.config.js entry looked like so - 'content/content-script1': './content/content-scripts1.js'

Apparently, the plugin doesn't like this configuration with paths, so HMR for content scripts didn't work in this case.

Now when I move content-script1.js to root folder and change webpack.config.js to the this -
'content-script1': './content-scripts1.js', - the HMR works fine.

[Kocal]

And what if you configure the plugin with the manifest.json file like this:

  plugins: [
      new ExtensionReloader({
        manifest: path.resolve(__dirname, "manifest.json")
      })
  ]

if I'm not wrong, it should read background/content scripts paths from manifest.json and it should do the work, no?

[Kocal]

Well I got it working properly.

I'm not sure it's because I've migrated the plugin or used the manifest key, but you can find what I've done at https://github.com/Kocal/vue-web-extension-content-script-hot-reload

[awardx]

@Kocal thanks for the update, I'll try to implement this in my project.

Looking at your commit, everything seems crystal clear except the yarn.lock file update cos I'm not familiar with yarn. So far I've been using npm only.

If I'm using npm, should I bother about yarn.lock file at all?

[Kocal]

Nope you can totally use NPM instead of yarn for this 👍