Понимание того, как Greasemonkey запускает пользовательские скрипты

Я изучаю Greasemonkey с надеждой внести некоторые улучшения в веб-страницу.

Я думаю, что я хорошо разбираюсь в JavaScript, но я не понимаю, в какой момент в рендеринге документа выполняется пользователь Greasemonkey script.

Например, что, если в документе есть встроенный JavaScript, который вставляет некоторые элементы на страницу. Я хочу, чтобы мой Greasemonkey script запускался только после завершения JS.

Скажем, это документ, который я пытаюсь изменить с помощью Greasemonkey

<html>
 <script>
   //insert a button with id="mybutton"
 </script>
</html>

Я хочу, чтобы код <script> завершился до запуска Greasemonkey script, потому что я хочу изменить его цвет фона.

Ответы

Ответ 1

Greasemonkey работает по событию DOMContentLoaded по умолчанию. Это означает, что все будет на странице, за исключением, возможно, больших изображений и вещей, добавленных некоторыми javascripts (сценарии, которые запускаются в событии load или в содержимом AJAX).

Если вы хотите подождать, пока загрузится даже большой носитель, а сценарии "onload" будут запущены, используйте:

window.addEventListener ("load", Greasemonkey_main, false);

function Greasemonkey_main () {

    //***** PUT YOUR GREASEMONKEY CODE HERE.
}

Не используйте unsafeWindow.onload = function(){ ... } или window.onload = function() { /* logic here */ }, как предложили другие. Это не только плохая практика/не будет работать в GM, но unsafeWindow представляет собой ненужный риск безопасности в этом случае.

Однако, имея дело с добавленным JS-содержимым:

Поскольку вы указали, что node, о котором вы заботитесь, добавляется javascript, ожидание события load часто не работает. JS может добавлять, удалять или редактировать узлы в любое время.

Лучшим подходом в таких случаях является опрос интересующего вас элемента ("#mybutton"). См. этот ответ на "Fire Greasemonkey script по запросу AJAX" .