docs: example of using experimental output on content script entry

[Jack-Works]

This PR is an example of using experimental_output to add HMR to the root file of the content script. This PR will not be merged since this feature is marked as "experimental".

[cezaraugusto]

@Jack-Works thanks! I managed to have it working with most of Extension.js templates but still need to support CSS modules / SASS + SASS modules in content_scripts. any hints to make it work?

[Jack-Works]

@cezaraugusto CSS is a tricky thing in content scripts. What I do is put all my DOM inside a ShadowRoot and use ShadowRoot.adoptedStyleSheets to apply my styles. By this way, my style will not affect webpages' style and vice versa.
This means you cannot use things like style-loader.

[cezaraugusto]

thanks! now I'm facing a weird issue. I just pushed a new version [email protected] (fully in Rspack now) and got the following. seems something related to the eager chunks module but the weird part is that running Extension.js locally (not from npm) does not raise the issue. thoughts on this? I can't repro without publishing a new package

[cezaraugusto]

fwiw I'm calling webpack-target-webextension using apply (code)

[cezaraugusto]

I managed to get it working by hardcoding the chrome namespace in these lines (ref). maybe a race condition?

[Jack-Works]

fwiw I'm calling webpack-target-webextension using apply (code)

    new WebExtension({
      background: this.getEntryName(patchedManifest),
      weakRuntimeCheck: true
    }).apply(compiler)

Can you try this? We support rspack directly, no need to "convert to webpack compiler".

[Jack-Works]

@cezaraugusto It's a rspack bug, see web-infra-dev/rspack#9898. downgrade to 1.3.1 solves the problem

[cezaraugusto]

@Jack-Works that was it! thank you for investigating!

[cezaraugusto]

I did notice a regression when setting content_scripts as main world Uncaught TypeError: Cannot read properties of undefined (reading 'getURL').

[Jack-Works]

I did notice a regression when setting content_scripts as main world Uncaught TypeError: Cannot read properties of undefined (reading 'getURL').

If you're running content scripts in a "main" world, then it is no longer content scripts (in the sense this plugin supports). I think you cannot bundle main world scripts within the same webpack config, but I'm not sure. I use rollup to bundle main world scripts in our project.