CODEWITHSUNDEEP
javascripttampermonkey
Neilord
Neilord

Reputation: 66

How can I check website content on every change?

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.

Upvotes: 1

Views: 295

Answers (2)

cssyphus
cssyphus

Reputation: 40038

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

Upvotes: 1

IT goldman
IT goldman

Reputation: 19485

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>

Upvotes: 1

Related Questions