Здравствуйте, коллеги.
Сегодня я познакомился с очень интересной проблемой и пока не совсем понимаю, как правильно её решить. У меня есть расширение для Google Chrome, которое должно встраивать элементы на сайт "n1.ru". Они даже появляются, но выглядит это всё очень странно. Страница загружается, после удачно встраивается мой content.js, после страница удаляет всё что я встроил.
Прежде чем писать сюда я подумал и пришёл к выводу, что это какая-то защита от таких умников как я. После я проверил как страница относится к элементам, которые я создаю через консоль(оказалось, что хорошо и она их не затирает). Следовательно я подумал, а что если встраивать код уже после загрузки страницы, нашёл в гугле вариант "document.addEventListener('load', submitAction);", но он не работает, так как после полной загрузки страницы, мой код полностью удаляется с неё. Другой вариант, который можно попробовать, это инжектить с background.js самостоятельно код, который точно окажется на странице уже после её загрузки, но этот вариант по мне так выглядит серьёзным костылём.
P.S. Когда тестировал это на авито, то элементы встраивались удачно.
UPD(24.03.2018): Попробую оба варианта из комментариев, если хоть что-то поможет распишу как делал. Если ничего не поможет, то поищу решение на просторах сети, но в любом случае опубликую решение.
UPD(25.03.2018): За пару часов проведённых в чтении документации я нашёл решение. Что нам нужно чтобы победить злой рендер на сайте: content.js(встраивается в страницу первым и даже успевает выполниться), inject.js(тут мы храним наши кнопочки и куртизанок, которых встроим в сайт), background.js(тут мы проверим загрузилась ли полностью страница и как только она это сделает, мы тут же сунем в неё inject.js), ну и его величество manifest.json(все знают зачем он нужен).
Значит план операции "gbljhcrbq N1" выглядит так:
1. Встраивается наш content.js цель которого сделать это "chrome.runtime.sendMessage(msg, function(response){});"
2. Наш background.js принимает сообщение и узнаёт с какой конкретно вкладки его послали, чтобы начать пристально за ней следить с помощью chrome.tabs.onUpdated.addListener и как только страница загрузится и отрендерится, он с помощью chrome.tabs.executeScript запускает на страницу кнопки и куртизанок. Всё достаточно просто и понятно.
background.jsfunction Listen() {
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message == 'Check'){
console.log(sender);
console.log(message);
chrome.tabs.onUpdated.addListener(function(sender, changeInfo, tab){
console.log(changeInfo);
if (changeInfo.status == 'complete' && tab.active){
chrome.tabs.executeScript(tab.id, {file: 'RHSinject.js'})
console.log('pidor');
}
})
}
});
}
Listen();
P.S. Спасибо тем ребятам, что предложили использовать дебагер и MutationObserver, это мне помогло избежать кучи других проблем и немного выпрямить руки.
