时间戳

首页 > 解决方案 > 使用 Chrome 扩展将元素添加到完全加载的 DOM

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

问题描述

我正在制作一个简单的 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 上的谷歌课堂页面上使用它。

标签： javascriptgoogle-chrome-extension

解决方案

至少在这种情况下，答案是通过设置间隔等到我想要的元素被加载。这是我使用的代码：

    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);

推荐阅读