I am trying to create a dynamic overlay for a browser game that will update team information as it updates within the game. The function that is used in the game to do so is:

updateGameInfo()

I have the HTML/CSS/JS defined, so for team member name, it would be

const memberName = document.getElementById("name")

And I would like to change it after updateGameInfo() is complete to be

memberName.textContent = window.gameInfo.party[0].name

How can I create this function to automatically run after updateGameInfo() and get the relevant information to change the variables?

Solutions that have been suggested to me:

• Use MutationObserver to Observe Changes

​

const memberName = document.getElementById("name");

const observer = new MutationObserver(() => {
    memberName.textContent = window.gameInfo.party[0].name;
});

// Assume game info is stored in an element with ID "game-info"
const gameInfoElement = document.getElementById("game-info");

// Start observing for any changes in child nodes or the subtree
observer.observe(gameInfoElement, { childList: true, subtree: true });const memberName = document.getElementById("name");

const observer = new MutationObserver(() => {
    memberName.textContent = window.gameInfo.party[0].name;
});

// Assume game info is stored in an element with ID "game-info"
const gameInfoElement = document.getElementById("game-info");

// Start observing for any changes in child nodes or the subtree
observer.observe(gameInfoElement, { childList: true, subtree: true });

• The main issue with this is that I am not sure how to find the window.gameInfo id.
• SetInterval()

​

setInterval(() => {
    if (window.gameInfo && window.gameInfo.party[0]) {
        const memberName = document.getElementById("name");
        memberName.textContent = window.gameInfo.party[0].name;
    }
}, 1000);setInterval(() => {
    if (window.gameInfo && window.gameInfo.party[0]) {
        const memberName = document.getElementById("name");
        memberName.textContent = window.gameInfo.party[0].name;
    }
}, 1000);

• I added this to script.js (which is referenced in index.html), but it didn't work. I tried adding it to the service-worker (background.js) and it looked like the extension was updating but the information was not being updated in the extension popup.

Thank you for any direction on this!