Я построил расширение, которое загружает React-приложение через iframe.
Я передаю сообщение из приложения и слушаю его в скрипте содержимого, чтобы убедиться, что приложение загружено.
Вот упрощенная версия того, что я имею до сих пор:
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 и наоборот на некоторых других веб-сайтах. Это становится более сложным с веб-сайтами, которые имеют много встроенных фреймов, таких как LinkedIn.
Какой правильный / лучший способ гарантировать приложение React И страница закончила загрузку?
Пожалуйста, игнорируйте передачу подстановочных сообщений. Я знаю о его уязвимостях. Выше фрагменты кода являются упрощенной версией того, что у меня есть.