How to change the runtime module's content

[tmkx]

Background

I want to build a chrome extension using rspack but encountered some problems:

1. In content-scripts, the style tags may exist under ShadowRoot, document.getElementsByTagName("link") cannot find the style elements, leading to a non-working HMR.
2. A specified entry runs in the Service Worker environment (background), and it is unable to load JS code dynamically. It is hoped that the webpack/runtime/load runtime script code can be customized, so that I can perform a reload action when the entry receives a HMR message.
3. The public path of content-script files is runtime-evaluated.

Webpack demo

It's a demo that shows how to customize the runtime public path:

export class ContentScriptPublicPathPlugin extends ContentScriptBasePlugin {
  apply(compiler: webpack.Compiler) {
    compiler.hooks.thisCompilation.tap('ContentScriptPublicPathPlugin', (compilation) => {
      compilation.hooks.runtimeModule.tap('ContentScriptPublicPathPlugin', (module, chunk) => {
        if (chunk.getEntryOptions()?.name !== 'content-script') return;
        if (module.name === 'publicPath') patchPublicPathRuntimeModule(module, compiler);
      });
    });
  }
}

function patchPublicPathRuntimeModule(
  module: webpack.RuntimeModule,
  { webpack, webpack: { RuntimeGlobals } }: webpack.Compiler
) {
  module.name = 'content-script publicPath';
  module.generate = function (this: webpack.RuntimeModule) {
    return webpack.Template.asString([`${RuntimeGlobals.publicPath} = chrome.runtime.getURL('/');`]);
  };
}

[hardfist]

this is a reasonable feature request, we will consider support it

[hardfist]

@tmkx runtimeModule is supported in 0.5.3, can you give it a try

[tmkx]

absolutely, salute for the iteration speed 🫡

[tmkx]

#5571

I have only encountered one issue so far