Detecting Window Object Changes via Proxy to pass through to Chrome Extension

I’m creating a Chrome extension that grabs information from a browser game to update an overlay that displays team information. To do this, I have injected JS into the browser page to pass data from the browser to the extension through window.postMessage().

Here is the full code for the injected JS

// setInterval(function () {
//     window.postMessage({ data: window.gameInfo.party}, "*")
// }, 1000);
// This worked but felt like an unoptimized solution

let partyData = window.gameInfo.party[0];

let handler = {
    set(target, property, value, receiver) {
      if (value !== target[property]) {
        console.log(`Setting ${property} to ${value}`);
        target[property] = value;
        console.log(property, value);
        return true;
      }
      return false;
    }
  };
  
let proxyParty = new Proxy(partyData, handler);

Right now, if I call partyProxy or partyData , it comes up as undefined. window.gameInfo.party[0] works as intended when entering it into the browser console.

My ultimate goal is to have the function that includes window.postMessage() be triggered when there is a change to window.gameInfo.party[0]. If it matters, window.gameInfo.party[0] is an array that includes “name” and “level” values.

My JS knowledge is limited and I’m much more of a visual learner, so I haven’t found a video that addresses this exactly. I’m having trouble parsing the documentation to get a clear answer on how to accomplish this.

Thank you so much for any help!