Objective

I am trying to hide an element using Temper Monkey user script

The testing webpage is https://www.dmla5.com/play/8733-1-5.html.

After clicking the pink button, a video will be loaded.

My goal is to hide the progress bar below the video.

Simplified version that sums up the objective

document.getElementsByClassName("leleplayer-bar")[0].hidden = true;

Code

The element is loaded after a button click, so I had to add delays.

Currently, it works when directly pasted into the Google Chrome dev console but doesn’t work as a user script, please take a look at my code

// ==UserScript==
// @name         Hide leleplayer-bar
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hides elements with class leleplayer-bar
// @author       Your name
// @match        */*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    function hideElement() {
        var elementsToHide = document.getElementsByClassName("leleplayer-bar");
        if (elementsToHide.length != 0) {
            var elementToHide = elementsToHide[0];
            console.log("Target element found. Hiding...");
            elementToHide.hidden = true;
            console.log("Element hidden successfully.");
            return 1;
            console.log("Observation stopped.");
        } else {
            console.log("Target element not found.");
        }
        return 0;
    }

    function observeDOM() {
        var targetNode = document.body;
        var config = { childList: true, subtree: true };

        var observer = new MutationObserver(function(mutationsList, observer) {
            for (var mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    if (hideElement() === 1) {
                        observer.disconnect();
                        return;
                    }
                }
            }
        });

        observer.observe(targetNode, config);
    }

    setTimeout(function() {
        if (hideElement() === 0) {
            observeDOM();
        }
    }, 1000);
})();