Detect ajax page changes and add components with DOM (Chrome Extensions, JavaScript)

Question

I'm trying to add DOM elements to the page https://anilist.co/user/diskxo/animelist

var divEntryRow = document.getElementsByClassName("entry row")[x]
    var playbutton = document.createElement("DIV");
    playbutton.className = "playbutton";
    var aInput = document.createElement("A");
    var img = document.createElement("IMG");   
    aInput.appendChild(img);
    playbutton.appendChild(aInput);
    divEntryRow.appendChild(playbutton);

, but not the whole page is shown on loading, so my extension doesn't add the elements in some places (play buttons on right)

also, when I move between the tabs of the site, the extension is not reloaded, since updates are made in the background only by ajax. I've been looking for ways to detect changes and reload the extension, including these:

$.ajax({
    processData: false,
    contentType: false,
    success: function() {
        doThings();
       
    },
});

Or:

function DOMModificationHandler(){
    $(this).unbind('DOMSubtreeModified.event1');
    setTimeout(function(){
        doThings();
        $('#ContentContainer').bind('DOMSubtreeModified.event1',DOMModificationHandler);
    },1000);
}

//after document-load
$('#ContentContainer').bind('DOMSubtreeModified.event1',DOMModificationHandler);

I included jquery library in my Extension. This is my manifest.json file:

{
    "manifest_version": 2,
    "name": "JiyuMe",
    "version": "1.0",

    "description": "Your next anime streaming website... it's not a streaming website!",

    "content_scripts": [{
        "matches": ["*://*.anilist.co/*"],
        "js": ["js/jquery-3.6.0.min.js", "js/client.js"]
    }],

    "background": {
        "scripts": ["js/background.js"]
    },

    "browser_action": {
        "default_popup": "popup.html"
    },

    "permissions": [
        "*://anilist.co/*",
        "nativeMessaging",
        "tabs",
        "activeTab"
    ],
    "content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'"

}

Do you have any ideas to understand how to fix this problem?

Answer 1

For the second problem I resolved with a simple function:

//Sleep function
function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

//Wait for Ajax site load
$.ajax({
    processData: false,
    contentType: false,
    success: async function() {
        onPageChange("1");
    },
});

async function onPageChange(oldPage_val) {
    var currentPage = window.location.href;
    if (currentPage != oldPage_val) {
        oldPage_val = currentPage;
        pageScan();
        await sleep(500);
        onPageChange(oldPage_val);
    } else {
        await sleep(500);
        onPageChange(oldPage_val);
    }
}

I wait for the load of the page, and then I start onPageChange() function, that check every 500 ms if the link of the page changes. compare the old link with the new one thanks to the variable: oldPage_val