Расширение Chrome: проверьте, загружен ли iframe и текущая страница - PullRequest
Новая
       8

Расширение Chrome: проверьте, загружен ли iframe и текущая страница

0 голосов
/ 03 июля 2018

Я построил расширение, которое загружает 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 И страница закончила загрузку?

Пожалуйста, игнорируйте передачу подстановочных сообщений. Я знаю о его уязвимостях. Выше фрагменты кода являются упрощенной версией того, что у меня есть.

...