Rewrite HMR client?

[Jack-Works]

Hi, I'd like to know is it possible for a webpack plugin to re-write the HMR client?

When running HMR in the content script, for an unknown reason it will be blocked by CSP policy.

Refused to connect to 'https://localhost:8080/sockjs-node/info?t=1603432704212' because it violates the following Content Security Policy directive: ......

If it is possible, I'd like to contribute an HMR client that works for the Web Extension.

[crimx]

for an unknown reason it will be blocked by CSP policy.

This is because content scripts follow the host page CSP policy.

I think you'll have to leverage the background script to proxy the requests.

is it possible for a webpack plugin to re-write the HMR client?

I am not expert on this but judging by the fact that the HMR client is from webpack-dev-server I don't think it's possible.

[crimx]

How about disabling CSP like this one?

[Jack-Works]

Yeah, I tried to find an extension to disable CSP but it work in a half-half chance

[Jack-Works]

I found a something interesting in webpack dev server config, I will try to investigate it later

[Jack-Works]

I found there is an option called devServer.transportMode.client. I don't know what it means clearly but it looks like a possible way to resolve.

And I found maybe I don't need one, maybe I just misconfigured my webpack config.

[crimx]

Cool. Looks like it's exactly what you want.

[Jack-Works]

hi, @crimx I found that I actually report a CSP error in a user script. In the content script, it won't be limited to connect to localhost.

[crimx]

What do you mean? So no change is required for this to work?

[Jack-Works]

The content script itself will not be affected by the host CSP policy. The script that content script appended to the document will so nothing is needed to change