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.

score 1 · Answer 1 · edited Jul 23 '22 at 19:09

1

You can use a MutationObserver which lets you know when a node (and a title is a node) has changed.

new MutationObserver(function(mutations) {
    console.log("title changed to: " + document.title);
}).observe(
    document.querySelector('title'),
    { subtree: true, characterData: true, childList: true }
);


setInterval(function() {
document.title = Math.random()
}, 1000)

<title>hello world</title>

edited Jul 23 '22 at 19:09

tripleee

175,061
34
275
318

answered Jul 23 '22 at 19:04

IT goldman

14,885
2
14
28

Thanks for the MutationObserver usage idea. – Neilord Jul 23 '22 at 21:08

score 1 · Accepted Answer · answered Jul 25 '22 at 20:53

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

How can I check website content on every change?

2 Answers2