Можно ли изменить html код страницы до ее отображения в браузере?

227

29 октября 2018, 02:10

Я делаю расширение для хрома. Сначала отображается страница, потом начинаются изменения html кода скриптом расширения, а можно ли сделать так, чтобы страница отобразилась только после внесения изменений? Как я изменяю: 1) Внедряю скрипт в теге head; 1.1) Страница отображается(проблема, которую надо решить) 2) Он скрывает ее с помощью

document.getElementsByTagName("html")[0].style.display = "none";

3) Изменяю данные; 4) Возвращаю обратно с помощью

document.getElementsByTagName("html")[0].style.display = "block";

5) И только потом она должна отображаться впервые!

Answer 1

Сначала изменить, а потом отобразить страницу нельзя. Js выполняется на стороне клиента, значит, чтобы браузер исполнил скрипт, ему сначала нужно получить и обработать html-контент, который будет изменён.

Можно попробовать просто скрыть всё и показать после изменения. Не могу гарантировать, что сработает, но попробуйте внедрить в head скрипт, который будет содержать верстку - заглушку (типа preloader), пользователь видит прелоадер, происходят изменения в коде верстки, прелоадер убираем, пользователь видит страницу.

Answer 2

Я сегодня решил эту проблему. В манифесте прописывается:

"content_scripts": [
  {
    "matches": [
      "\u003Call_urls>"
     ],
    "js": ["content.js"],
    "run_at": "document_start" // Вот это надо написать. И скрипт будет запускаться сразу первым при начале загрузки страницы.
  }
],
 "web_accessible_resources": ["content.js"]
}

Затем в контентном скрипте в самом начале пишем:

document.getElementsByTagName("html")[0].style.display = "none";

А после всех необходимых изменений:

document.getElementsByTagName("html")[0].style.display = "block";

И страница отображается снова.

Ну а в фоновой странице:

var injection = function() { // Сам скрипт, вводимый в страницу
var pasteScript1; // content.js
pasteScript1 = document.createElement("script1");
pasteScript1.href = chrome.tabs.getURL("content.js");
document.getElementsByTagName("head")[0].insertBefore(pasteScript1);
};
chrome.tabs.executeScript(tab.id, { // Инъекция скрипта на страницу
code: "(" + injection.ToString + ")()"
});