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:
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)
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:
- 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.
- 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.