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

Question

目标： 我正在尝试将 Frontend Mentor 上的输入元素添加到 sort/search 解决方案。

问题：页面出现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);

})();

这是我尝试添加它的地方。

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

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

根据需要进行调整。

P.S。 navBar.append(inputElement) 将您的新元素添加到最后 navBar.insertBefore(inputElement, navBar.lastChild); 根据您的问题将其添加到中间。

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

Unable to add an Input element using Tampermonkey on Frontend Mentor

greasemonkey

userscripts

tampermonkey