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

问题描述

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

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

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

})();

这是我尝试添加的地方。

如果可以，请运行此脚本并让我知道我错在哪里。

解决方法

似乎网站上的一些动态诡计会在您添加的太早时删除您的添加。你有没有试过用 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); 根据您的问题将其添加到中间。

greasemonkey tampermonkey userscripts