search

samuelsimoes / chrome-extension-webpack-boilerplate

A basic foundation boilerplate for rich Chrome Extensions using Webpack to help you write modular and modern Javascript code, load CSS easily and automatic reload the browser on code changes.
MIT License
1.7k stars 347 forks source link

Hot reloading Chrome extensions using Webpack #41

Open rvasilev opened 6 years ago

rvasilev commented 6 years ago

Webpack-dev-server can reload opened chrome page but it is not intended for reloading extension code. More info in this post.

Webpack plugin for this sort of magic: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

intentionally-left-nil commented 6 years ago

I was able to switch to it using this commit: https://github.com/AnilRedshift/des/commit/1269fa2b3da94890898f7210d00b0fe8acb25817

samuelsimoes commented 6 years ago

The idea is great, I like it.

How do you guys think that this should be implemented?

I tried this implementation https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate/pull/45 but it removes the hot reloading, which is one thing that I want on this boilerplate.

I tried to implement it, just to test, like this: https://gist.github.com/samuelsimoes/80f7fe21814fec023008f77730a1623c

but it was causing full reloads when I changed my code (this on popup), even when not related to content scripts, which I believe that was caused because the extension reload.

Another problem was that every time that I start the server, I got this error: Loading Extension. failed to load extension from: XXXXX. Manifest file is missing or unreadable.

intentionally-left-nil commented 6 years ago

Thanks for taking a look!

Yes, the new code causes the whole extension to reload when making a change. For my needs, this is an acceptable dev environment. It hot-reloads in the sense that when I change code, the change is reflected in the plugin. It does require a refresh, compared to the old reloader.

As far as the second issue, I got that too, and I fixed it by removing the CleanWebpackPlugin plugin.

I have that fixed in my master branch, let me update this PR to include it too.

intentionally-left-nil commented 6 years ago

As far as what it fixes though: With the old hot-reloader, when I would change code, the react code wouldn't actually update properly, or it would cause react errors. Unless something is changed, the hot-reloading isn't working at all with the current setup