使用 Chrome 扩展将元素添加到完全加载的 DOM答案

【问题标题】：Add an element to the fully loaded DOM with Chrome extension使用 Chrome 扩展将元素添加到完全加载的 DOM
【发布时间】：2020-08-01 05:57:37
【问题描述】：

我正在制作一个简单的 chrome 扩展程序，将表单元素添加到页面。我想把表单放在一个特定的地方，就在页面上由 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 侦听窗口的“加载”事件，然后尝试将表单元素移动到所需位置。问题是，即使在这一切之后，它仍然说我要在之前插入表单的元素是空的。代码如下：

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"
  ]
}

我也尝试过在 start.js 中简单地运行 inject.js 代码，但这也不起作用。我在 Ubuntu 上的 Chromium 上的谷歌课堂页面上使用它。

【问题讨论】：

无需等待：使用 CSS z-index 将您的 UI 置于一切之上。
@wOxxOm，对不起，“上方”另一个元素，我的意思是在页面上垂直高于它，而不是堆叠在它上面。我正在尝试将元素插入为我要定位的 div 的子元素。
向页面添加内容的页面脚本甚至可能在load 事件之后运行。使用 MutationObserver 或在 setInterval 或 setTimeout 中定期检查元素。
@wOxxOm 太好了，设置一个间隔来等待 div 不为空。谢谢！

标签： javascript google-chrome-extension

【解决方案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);

【讨论】：