rubenspgcavalcante/webpack-chrome-extension-reloader

Hot reload doesn't seem to work with `reloadPage` set to false

davestewart opened this issue · 2 comments

davestewart commented

Type:

  • bug
  • feature
  • enhancement
  • question

Environment:

  • OS: OSX
  • Library Version: Latest

I'm going to open a PR:

  • yes
  • no

Description:
Hi there.

I was super excited to find this plugin, but I can't seem to make it work as advertised.

The extension I'm working on injects a div into the page on first load, then uses internal events to update its HTML as the extension runs.

I was fiddling with the sample project to see if I could accomplish this, by:

  1. changing the webpack config to set reloadPage: false
  2. adding some basic document.createElement... code in my-content-script.js

Whilst the initial page load works, when saving files:

  1. I see "[ WCER: Detected Changes. Reloading ... ]" just in the console, but only once
  2. there are no page updates, so I assume the content script has not run again

Am I missing something? Should the content script not run again?

rubenspgcavalcante commented

Hello @davestewart ,
I think there's a confusion, the plugin indeed works as advertised within the context of a browser extension and how it works. What you really want is a hot-module-replacement.
So, some context for your question: differently from the background script, the content-script is injected on current page and runs when it loads (it's easy to see as it have access to the DOM). If you don't reload the page it will not execute the new version. That's what happens when you set reloadPage to false, it will update the extension and it's scripts, you can even check that the background is executed right after (as it doesn't depends on a page context) but all the content scripts will not be executed.
To do a hot-module-replacement will envolve finding this injected scripts on all pages and replacing it at runtime with the new version, probably through AMD techniques and some eval tricks, and forcing an execution, mocking a window DOMContentLoaded event (this event is like a $(document).ready() from jQuery and some scripts depends on this). I still not sure if in a browser extension context is possible to do something like this.

Hope I helped with your question! Closing for now, but if anything still not clear on this subject you can reopen :)

davestewart commented

Hi Rubens,

Thanks for the update.

I've actually got a pretty good dev set up working now; I develop the plugin in a normal browser environment using HMR as you say (using Vue's server setup) and I connect to the background script using sendMessage(id, message) which is actually a pretty good compromise.

I saw a React setup which I have bookmarked which seems to do HMR within the context of the extension, so I may pick that apart at some point.

Anyway,

Cheers

  • 🎉1