0

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

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

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

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

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

1
  • Да, через php, к примеру. JS начинает работать во время "загрузки (рендеринга)" страницы.
    – De.Minov
    Commented 13 авг. 2018 в 14:30

2 ответа 2

1

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

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

2
  • Да, именно это и есть белый фон document.getElementsByTagName("html")[0].style.display = "none"; Проблема в том, чтобы вообще ничего не было показано до изменений. Пусть браузер загружает страницу, но ничего не показывает. Такое возможно сделать? Commented 13 авг. 2018 в 16:06
  • нет, надо создать слой, задать ему фон, фиксированное позиционирование и растянуть на всю страницу, а тегу body задать overflow hidden. Тогда пользователь не увидит ничего, после обработки - убрать слой и этот стиль.
    – Aaron
    Commented 14 авг. 2018 в 0:26
1

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

"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 + ")()"
});
1
  • Замените "\u003Call_urls>" на "<all_urls>"
    – Deliaz
    Commented 15 авг. 2018 в 10:27

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.