Chrome扩展中利用window对象实现游戏updateGameInfo()后的动态更新

分几种场景来实现需求：

1. 如果updateGameInfo()是同步函数 #

直接在游戏更新函数执行后调用覆盖层更新逻辑，把逻辑封装成复用函数更方便：

// 封装覆盖层更新逻辑
function updateOverlay() {
  const memberName = document.getElementById("name");
  memberName.textContent = window.gameInfo.party[0].name;
}

// 同步执行游戏更新和覆盖层更新
function syncUpdate() {
  updateGameInfo();
  updateOverlay();
}

// 之后调用syncUpdate()就能完成两者同步更新

2. 如果updateGameInfo()是异步函数（返回Promise） #

如果这个游戏函数内部包含网络请求、定时器这类异步操作，得等它执行完成再更新覆盖层，用async/await或者.then()都可以：

function updateOverlay() {
  const memberName = document.getElementById("name");
  memberName.textContent = window.gameInfo.party[0].name;
}

// async/await写法
async function syncUpdate() {
  await updateGameInfo(); // 等待异步操作完成
  updateOverlay();
}

// 或者用.then()链式调用
function syncUpdate() {
  updateGameInfo()
    .then(() => updateOverlay());
}

3. 无法控制updateGameInfo()的调用时机时 #

如果游戏本身会自动调用这个更新函数，你没法修改它的调用逻辑，可以用「猴子补丁」包装原函数，让它执行完自动触发覆盖层更新：

// 先保存原函数的引用
const originalUpdateGameInfo = window.updateGameInfo;

// 重写原函数，在原逻辑执行后追加更新操作
window.updateGameInfo = function(...args) {
  // 执行原游戏更新函数
  const result = originalUpdateGameInfo.apply(this, args);
  
  // 处理异步情况
  if (result instanceof Promise) {
    return result.then(() => {
      updateOverlay();
      return result;
    });
  } else {
    // 同步情况直接更新
    updateOverlay();
    return result;
  }
};

// 覆盖层更新逻辑
function updateOverlay() {
  const memberName = document.getElementById("name");
  memberName.textContent = window.gameInfo.party[0].name;
}

内容的提问来源于stack exchange，提问作者Seal