Как запустить content script после загрузки всех скриптов сайта?

Question

Мне нужно изменить значение инпута, загружающегося из js, на сайте

document.getElementById("name").value= "Jack";

И в консоли мне выдает ошибку Error handling response: TypeError: Cannot set property 'value' of null

Можно ли как-то дождаться загрузки элемента и выполнить content script?

manifest.json

    "manifest_version": 2,
    "name": "extension",
    "description": "change value ",
    "version": "0.1.0",
    },
    
    "content_scripts": [ {
      "js": [ "/js/changeval.js" ],
      "run_at": "document_end",
      "matches": [ "<all_urls>" ]
   }
 ],   
"permissions": [
    "storage"
  ]  
}

changeval.js

document.getElementById("name").value= "Jack";

Answer 1

DOMContentLoaded генерируется после того как DOM уже будет сформирован:

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("name").value= "Jack"
});

Можно передать туда функцию, и в ней выполнять всю логику:

document.addEventListener("DOMContentLoaded", myFunc);

function myFunc() {
   document.getElementById("name").value= "Jack"   
}

Второй вариант:

window.onload = function() {
    document.getElementById("name").value= "Jack"
}

Вариант с addEventListener("DOMContentLoaded" ... более предпочтителен, так как не ждет загрузки внешних ресурсов, таких как картинки и стили, в отличии от window.onload

Также есть вариант addEventListener("load", () => {}, который используется для отслеживания полностью загруженной страницы. Работает как и window.onload, но имеет преимущества addEventListener-a, с помощью которого можно повесить несколько обработчиков на один элемент, и также удалить обработчики используя removeEventListener

БЛОГ НА HUSL

Как запустить content script после загрузки всех скриптов сайта?

Ответы (1 шт):