Recientemente recibí una solicitud de un cliente para personalizar su CRM. El CRM es de una empresa SaaS de terceros y ya está activo. Fue creado con vuejs y no tengo acceso a los códigos. Solo un área de texto para insertar javascript y css personalizados.

Lo que quiero lograr:

1. Supervise la URL en busca de cambios para conocer el script o la función a llamar (he probado el detector de eventos 'popstate' y 'hashchange' pero no funciona)

2. Quiero saber cuándo cambian algunos datos (el CRM es una aplicación de una sola página y los datos cambian con frecuencia en respuesta a las actividades del usuario)

Cómo lo hice funcionar:

1. Para el monitoreo de URL, utilicé setTimeout() dentro de una función e invoqué la función. La función básicamente compara la URL anterior (variable global) y la nueva URL en busca de diferencias.
2. Para monitorear los cambios de datos, usé setTimeout() para insertar constantemente nodos DOM en el DOM y también estoy usando "MutationObserver" para monitorear algunos.

Por qué necesito una mejor manera:

setTimeout() se ejecuta a 1000 ms (1 segundo) y estoy seguro de que está afectando al navegador. El observador de mutaciones también es lento debido a la configuración. estoy pasando al método de observación '{childList:true, subtree: true, atributos: true}'

He estado pensando en usar Javascript 'customEvent()' pero me gustaría saber de los gurús en el mundo de js. Habría compartido mis códigos, pero son alrededor de 7 archivos y cada uno tiene más de 1000 líneas de códigos.