Trying to hide an element using TamperMonkey userscript

Question

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

Problem

As mentioned, the code works when pasted directly on the console. and when I use it as temper monkey userscript code, console shows:

Target element not found.
Target element not found.
Target element not found.
Target element not found.
...

I don't understand why it isn't detecting the element when running as a user script

Answer 1

The element you are targeting is within an <iframe>. We can hide the element by simply giving it a style using GM_addStyle, no setTimeout or MutationObserver needed.

You might want to hide the other associated elements (time, preview), using leleplayer-bar-wrap instead of leleplayer-bar.

Make sure your script is matching the correct iframe, in this case: https://danmu.yhdmjx.com/

Also, I don't see a reason to run the script at document-start. Overall, the final script should look like this:

// ==UserScript==
// @name         Hide leleplayer-bar
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hides elements with class leleplayer-bar
// @author       Your name
// @match        https://danmu.yhdmjx.com/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle('.leleplayer-bar-wrap { display: none; }');