Google chrome extension Chrome扩展：检查iframe和当前页面是否已加载

我构建了一个扩展，它通过iframe加载React应用程序。 我正在从应用程序传递一条消息，并在内容脚本中侦听该消息，以确保应用程序已加载。 以下是我到目前为止得到的简化版本：

App.js

componentDidMount() {
    window.top.postMessage({isAppLoaded: true}, '*'};
}

chrome.runtime.onMessage.addListener(function (msg, sender) {
    if (msg.isPageLoaded) {
        console.log('Current page has loaded!');
    }
}

window.addEventListener('message', function(event) {
    if (event.data.isAppLoaded) {
        console.log('React app successfully loaded!');
    }
}

chrome.tabs.onUpdated.addListener(function (tabId, info) {
    if (info.status === 'complete') {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {isPageLoaded: true});
        })
    }
})

Content.js

componentDidMount() {
    window.top.postMessage({isAppLoaded: true}, '*'};
}

chrome.runtime.onMessage.addListener(function (msg, sender) {
    if (msg.isPageLoaded) {
        console.log('Current page has loaded!');
    }
}

window.addEventListener('message', function(event) {
    if (event.data.isAppLoaded) {
        console.log('React app successfully loaded!');
    }
}

chrome.tabs.onUpdated.addListener(function (tabId, info) {
    if (info.status === 'complete') {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {isPageLoaded: true});
        })
    }
})

Background.js

componentDidMount() {
    window.top.postMessage({isAppLoaded: true}, '*'};
}

chrome.runtime.onMessage.addListener(function (msg, sender) {
    if (msg.isPageLoaded) {
        console.log('Current page has loaded!');
    }
}

window.addEventListener('message', function(event) {
    if (event.data.isAppLoaded) {
        console.log('React app successfully loaded!');
    }
}

chrome.tabs.onUpdated.addListener(function (tabId, info) {
    if (info.status === 'complete') {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {isPageLoaded: true});
        })
    }
})

在某些网站上，页面首先加载React应用程序，然后再加载React应用程序，反之亦然。对于像LinkedIn这样有很多嵌入式iFrame的网站来说，这变得更加复杂

确保React应用程序和页面已完成加载的正确/更好方法是什么

---

请忽略传递的通配符消息。我知道它的安全漏洞。上面的代码片段是我的简化版本。

iframe和内容脚本都可以向后台脚本报告它们的加载完整性，后台脚本将有一个映射到{pageLoaded，apploated}的选项卡的

映射对象，这样当两个布尔值都设置好时，它可以向内容脚本和iframe发送另一条消息。太多的想法没有看到。