Chrome扩展程序：检查iframe和当前页面是否已加载

Question

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

App.js

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

Content.js

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!');
    }
}

Background.js

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-app，反之亦然。对于拥有很多嵌入式iframe的网站（例如LinkedIn），情况变得更加复杂。

什么是保证React-app和页面完成加载的正确/更好的方法？

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