I recently got a request from a client to customize his CRM. The CRM is from a third-party saas company and it is already live . It was created with vuejs and I don't have access to the codes. Only a textarea to insert custom javascript and css.

What I want to achieve:

1. Monitor the url for any changes so as to know the script or function to call ( I have tried 'popstate' and 'hashchange' event listener but it does not work)

2. I want to know when some data changes ( The CRM is a single page application and the data changes frequently in respond to user activities )

How I made it to work:

1. For the url monitoring, I used a setTimeout() inside a function and I invoked function . The function basically compares the old url (global variable) and the new url for any differences.
2. For monitoring the data changes , I used setTimeout() to constantly insert DOM Nodes into the DOM and am also using "MutationObserver" to monitor some.

Why I need a better way:

The setTimeout() are running at 1000ms (1 sec) and I am sure its affecting the browser. Mutation observer are also slow due to the config. am passing to the observe method '{childList:true, subtree: true, attributes : true}'

Have been thinking of using Javascript 'customEvent()' but I will like to hear from gurus in the world of js. I would have shared my codes but they are about 7 files and each is 1000+ lines of codes.