Расширение Chrome: необходимо отложить загрузку страницы до завершения javascript

Question

Мое расширение переформатирует уродливую страницу, которую я часто посещаю. В настоящее время страница сначала загружается нефиксированной, тогда есть задержка 100 мс, тогда мой JS форматирует html.

Как предотвратить отображение некорректированного html?

Мой JS файл определен в манифесте следующим образом:

,"content_scripts": [{ 
     "matches": ["*://*.<url goes here>.com/*"], 
     "js": ["js/1.js"] 
}] 

Answer 1

Вам нужно настроить run_at parameter.

По умолчанию сценарии содержимого выполняются после полной загрузки страницы (по адресу "document_idle").

Сначала попробуйте добавить "document_end" и посмотреть, улучшит ли он задержку.

В случае "document_end" файлы вводятся сразу же после завершения DOM, но до того, как загрузились подресурсы, такие как изображения и кадры.

"content_scripts": [{ 
    "matches": ["*://*.example.com/*"], 
    "js": ["js/1.js"], 
    "run_at": "document_end" 
}] 

Это все еще может быть слишком поздно. Есть окончательный вариант, "document_start", который вы можете использовать, но будьте осторожны - он выполняет действительно раньше, чем любой из DOM готов. Вам еще ничего не нужно исправить.

Вы можете wait for an element to appear и исправить это немедленно, хотя, например.

Вы также можете попробовать исправить ситуацию с помощью CSS-инъекции. Это можно безопасно вставить в "document_start" без дополнительных трюков.

P.S. Или, например, используйте ответ Гаэля - добавьте правило CSS, чтобы скрыть тело, дождитесь загрузки страницы (например, с событием DOMContentLoaded), исправив его, а затем удалив/переопределив правило CSS.

Answer 2

Вы можете установить run_at: "document_start" в манифест. Добавьте правило, чтобы скрыть страницу, и измените свой текущий скрипт в событии window.onload.

Если вы часто посещаете эту страницу, вы можете даже загрузить сначала свой шаблон/редизайн, а затем объединить данные страницы, которые вы хотите, из кеша или из источника.