无法在 Frontend Mentor 上使用 Tampermonkey 添加输入元素

Question

目标：我正在尝试在Frontend Mentor 上添加一个输入元素来排序/搜索解决方案。

问题：输入元素出现在页面上，但一秒后消失。

代码：

// ==UserScript==
// @name         FEM
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       bunee
// @match        https://www.frontendmentor.io/solutions
// @icon         https://www.google.com/s2/favicons?domain=frontendmentor.io
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    window.addEventListener("load", () => {

    const inputElement = document.createElement("INPUT");
    inputElement.setAttribute("type", "text");


    const navBar = document.querySelector(".NavigationSecondary__Wrapper-sc-13y3yjk-0>.wide-container");

    navBar.append(inputElement);
    console.log(inputElement);

    }, false);

})();

这是我要添加的地方。

如果可以的话，请运行这个脚本，让我知道我错了。

Answer 1

似乎网站上的一些动态恶作剧会在您添加的内容过早时将其删除。 您是否尝试过使用timeout 来延迟它？

类似

// ==UserScript==
// @name         FEM
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       bunee
// @match        https://www.frontendmentor.io/solutions
// @icon         https://www.google.com/s2/favicons?domain=frontendmentor.io
// @grant        none
// ==/UserScript==

setTimeout(function(){
  const inputElement = document.createElement("INPUT");
  inputElement.setAttribute("type", "text");

  const navBar = document.querySelector(".NavigationSecondary__Wrapper-sc-13y3yjk-0>.wide-container");

  //navBar.append(inputElement);
  navBar.insertBefore(inputElement, navBar.lastChild);
  console.log(inputElement);
}, 2000);

根据需要进行调整。

附： navBar.append(inputElement) 将您的新元素添加到末尾，同时 navBar.insertBefore(inputElement, navBar.lastChild); 根据您的问题将其添加到中间。