I am writing a plugin for a third-party web application, whose code I can see but can't modify. I'm running it in Chrome. The main webapp and the plugin are both (separate) webpack bundles. At runtime when the page loads, the webapp fetches the plugin bundles from the same server, and initialises them.

My objective is to make my plugin patch/wrap a function in the third-party application, in the module webapp/utils/target.tsx, such that calls to that function from within the webapp have my modified behaviour. Something like this:

// somehow import the `target` module (this is the problem, see below...)

oldFunc = target.targetFunc;
target.targetFunc = function targetFunc(args) {
    // do extra stuff here
    return oldFunc(args);
}

But I don't know how to import the target module or whether this is possible. Specifically:

• I can't just import target, because application/webapp is not a dependency of my plugin
  • Plugins are meant to access limited entrypoints that get attached to window by the webapp, so they have no direct dependency on the webapp
• I don't think I can add application/webapp as a dependency because
  1. it's not a published package (perhaps I can add it as a github link?) and
  2. I don't want webpack to include it in the bundle, so I think I'd have to specify it as an external dependency, but I don't know how to do that...
• I can't modify application to do any extra things in its webpack (like exposing target in a different way)
• I thought perhaps I could import it dynamically at runtime:

import(/*webpackIgnore: true*/ '/application/webapp/utils/target').then({
    ...
})

This gives me the error Expected a JavaScript module script but the server responded with a MIME type of "text/html".

If it helps, when the page is fully loaded and the app has loaded my plugin, in Chrome developer tools under Sources -> Page, I see a tree structure like this:

- localhost:port
- .
- com.mydomain.myplugin
  - <modules for my plugin>
- application
  - webapp
    - .
    - <other modules>
    - utils
        - target.tsx
        - <other files>
    - webpack

Meanwhile the original html page source seems to load the webapp via this tag in the header:

    <script defer="defer" src="/static/main.c4e2eaf1d8c47b01fa6c.js"></script>

The Chrome devtools say "Source map detected".

Is it even possible to do what I'm trying to do?