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 a module webapp/utils/target.tsx
in the application, such that calls to that function from within the webapp have my modified behaviour. I am not at all experienced with javascript, particularly how modules work in browsers.
When the page is fully loaded and the app has loaded my plugin, in Chrome developer tools under Sources -> Page, I see:
localhost:port
.
com.mydomain.myplugin
<modules for my plugin>
application
webapp
.
<other modules>
utils
target.tsx
webpack
I was thinking I may be able to do something like this:
import(/*webpackIgnore: true*/ 'application/webapp/utils/target').then((target) => {
oldFunc = target.targetFunc;
target.targetFunc = function targetFunc(args) {
// do extra stuff here
return oldFunc(args);
}
});
Not surprisingly, this fails (I get Failed to resolve module specifier 'application/webapp/utils/target'
). I don’t know if it’s possible to import the module from the main webapp this way.
The webapp also makes various functions available for plugins to call, by attaching them to the window
object. So window.AppUtils.targetFunc
is accessible globally to call. I also tried doing this:
window.AppUtils.targetFunc = function targetFunc(args) {
// do extra stuff here
return oldFunc(args);
}
I would not even expect that to affect calls to targetFunc
from within the webapp because they wouldn’t reach the function via this reference. I was surprised to find that it doesn’t seem to work even for cases where I call window.AppUtils.targetFunc
directly.
Is what I am trying to do even possible…?