Unable to add an Input element using Tampermonkey on Frontend Mentor

Question

Goal: I'm trying to add an input element on Frontend Mentor to sort/search solutions.

Problem: The input element appears on the page but disappears after a second.

Code:

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

})();

Here's where I'm trying to add it.

If you can, Please run this script and let me know how I'm wrong.

Answer 1

Seems like some dynamic shenanigangs on the website delete your addition when it happens too early. Have you tried just delaying it with a timeout?

Something like

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

just adapt it as needed.

P.S. navBar.append(inputElement) adds your new element to the end while navBar.insertBefore(inputElement, navBar.lastChild); adds it in the middle as per your question.