Estoy escribiendo un complemento para una application web de terceros, cuyo código puedo ver pero no puedo modificar. Lo estoy ejecutando en Chrome. La aplicación web principal y el complemento son paquetes de paquetes web (separados). En tiempo de ejecución, cuando se carga la página, la aplicación web obtiene los paquetes de complementos del mismo servidor y los inicializa.

Mi objetivo es hacer que mi complemento parchee/envuelva una función en la application de terceros, en el módulo webapp/utils/target.tsx , de modo que las llamadas a esa función desde la aplicación web tengan mi comportamiento modificado. Algo como esto:

 // 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); }

Pero no sé cómo importar el módulo de target o si esto es posible. Específicamente:

• No puedo simplemente import target , porque la application/webapp no depende de mi complemento
  • Los complementos están destinados a acceder a puntos de entrada limitados que la aplicación web adjunta a la window , por lo que no tienen una dependencia directa de la aplicación web.
• No creo que pueda agregar application/webapp como una dependencia porque
  1. no es un paquete publicado (¿quizás pueda agregarlo como un enlace de github?) y
  2. No quiero que el paquete web lo incluya en el paquete, así que creo que tendría que especificarlo como una dependencia externa, pero no sé cómo hacerlo...
• No puedo modificar la application para hacer cosas adicionales en su paquete web (como exponer target de una manera diferente)
• Pensé que tal vez podría importarlo dinámicamente en tiempo de ejecución:

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

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

Si ayuda, cuando la página está completamente cargada y la aplicación ha cargado mi complemento, en las herramientas de desarrollo de Chrome en Fuentes -> Página, veo una estructura de árbol como esta:

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

Mientras tanto, la fuente de la página html original parece cargar la aplicación web a través de esta etiqueta en el encabezado:

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

Las herramientas de desarrollo de Chrome dicen "Mapa fuente detectado".

¿Es posible hacer lo que estoy tratando de hacer?