How can I check website content on every change?

Question

I have created a (tampermonkey) script to update a website title based on its content:

setInterval(function() {
    var activeSettingsPage = document.querySelector('[class$="dd_sublinks sel"]');
    if (activeSettingsPage != null){
        var activeSettingsPageName = activeSettingsPage.querySelector('.dd_sublinks_linkto').querySelector('.setuplink').querySelector('.setuplink_text').textContent;
        document.title = activeSettingsPageName;
    }

    const DEFAULT_TITLE_ENDING = ' - Zoho CRM';
    if(document.title.includes(' - Zoho CRM')){
        document.title = document.title.replace(DEFAULT_TITLE_ENDING,'');
    }
});

I have used a setInterval() function to run it in an endless loop. Is it a correct solution? Or is there anything better? (From performance, code readability, etc... aspects)

Note: If I will remove setInterval() my tampermonkey script will check the website content only once at the beginning. That is not what I am looking for.

Answer 1

You might also wish to review the various answers in this thread, which additionally covers:

• // @run-at document-idle
  
• using promises
• Brock Adams' waitForKeyElements() utility

Note that the waitForKeyElements() utility, as originally written, requires jQuery.

Here is an updated/revised fork of the waitForKeyElements() utility that:

• does not require jQuery
• avoids the quirks associated with setInterval()
• optionally takes a function (instead of a string) for querying elements on page