Добавить элемент в полностью загруженный DOM с расширением Chrome

Question

Я делаю простое расширение chrome, которое добавляет элемент формы на страницу. Я хочу поместить форму в определенное c место, прямо над некоторыми другими элементами, которые загружаются JS на странице. Итак, я планировал дождаться загрузки всех этих элементов, а затем вставить мою форму, но это работает очень непоследовательно.

Расширение запускает скрипт содержимого 'start. js', который добавляет формы HTML и CSS на страницу и добавляет другой сценарий 'inject. js' в тело документа. , Вот код:

addFormHTML();
addFormStyle();
addFormScript();

function addFormHTML () {
    var form = document.createElement('form');
    var input = document.createElement('input');
    var btn = document.createElement('button');
    var searchIcon = document.createElement('i');

    form.setAttribute("class", "example");
    form.setAttribute("action", "/contact");
    form.setAttribute("method", "POST");
    btn.setAttribute("type", "submit");
    searchIcon.setAttribute("class", "fa fa-search");
    Object.assign(input, {
        type : "text",
        placeholder: "Search the stream",
        name : "search"
    });

    btn.appendChild(searchIcon);
    form.appendChild(input);
    form.appendChild(btn);
    document.body.appendChild(form);
}
function addFormStyle() {
    var styleLink = document.createElement("link");
    styleLink.setAttribute("rel", "stylesheet");
    styleLink.setAttribute("href", chrome.runtime.getURL('searchStyle.css'));

    var imgStyle = document.createElement("link");
    imgStyle.setAttribute("rel", "stylesheet");
    imgStyle.setAttribute("href", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

    document.head.appendChild(styleLink);
    document.head.appendChild(imgStyle);
}
function addFormScript () {
    var inject = document.createElement('script');
    inject.src = chrome.runtime.getURL('inject.js');
    document.body.appendChild(inject);
    console.log(inject)

}

inject. js прослушивает событие окна «load», а затем пытается переместить элемент формы в нужное место. Проблема в том, что даже после всего этого, он по-прежнему говорит, что элемент, который я хочу вставить в форму до того, будет нулевым. Вот код:

listenAndLoad();

function listenAndLoad() { 
  window.addEventListener("load", function() {
    var form = document.getElementsByTagName("form")[0];
    var main = document.getElementById("ow43");
    main.insertBefore(form, main.children[1]);
  });
}

А вот мой манифест:

{
  "name": "Google Classroom Searchbar",
  "version": "1.0",
  "description": "A search bar for the google classroom assignments stream",
  "manifest_version": 2,
  "permissions": [
      "activeTab",
      "contextMenus",
      "tabs"
  ],
  "content_scripts": [
      {
        "run_at": "document_end",
        "matches": ["https://classroom.google.com/u/*/c/*"],
        "js": ["start.js"]
      }
  ],
  "web_accessible_resources": [
    "inject.js",
    "searchStyle.css"
  ]
}

Я также попытался просто запустить ввод кода. js при запуске. js, но это тоже не работает. Я использую это на странице класса Google, в Chromium в Ubuntu.

Answer 1

Ответ, по крайней мере в этом случае, состоял в том, чтобы подождать, пока нужный элемент был загружен, установив интервал. Вот код, который я использовал:

    var form = document.getElementsByTagName("form")[0];
    var intervalID = setInterval(function() {
        targetDiv = document.getElementById("ow43");
        if (targetDiv != null) {
            console.log(targetDiv);
            targetDiv.insertBefore(form, targetDiv.children[1]);
            clearInterval(intervalID);
        }
    }, 2000);