Tampermonkey script run before page load

Question

I need to hide a section from an html page:

<h1 data-ng-show="!menuPinned &amp;&amp; !isSaaS" class="logo floatLeft" aria-hidden="false"><span>XXX&nbsp;</span><span style="font-weight: bold;">XXX&nbsp;</span><span>XXXXX</span></h1>

The following code works fine in Chrome dev. tools

var ibmlogo = document.querySelectorAll('h1.logo.floatLeft');
ibmlogo[1].remove();

But when I load the page with the script active, the section (h1) won't disappear. I believe this is because when the script runs, the DOM has not been completed loaded yet, hence the script fails to find the selector.

I have tried many different things (e.g. window.onLoad) but still my script is not effective. Last attempt (failed) is the following:

var logo = document.querySelectorAll('h1.logo.floatLeft');
logo.onload = function() {removeLogo()};

function removeLogo(){
    console.log("### logo array lenght: " + logo.length);
    logo[1].remove();
};

Wouldn't a user style (e.g. using Stylish) with h1.logo.floatLeft { display: none; } do the trick? — hsan
– hsan, Commented Sep 6, 2016 at 10:36

woxxom · Accepted Answer · 2016-09-06 11:19:56Z

66

Required:

@run-at: document-start in userscript metablock.

// ==UserScript==
..............
// @run-at        document-start
..............
// ==/UserScript==

Now with the above your options are:

Simply inject a style that hides the logo:

(document.head || document.documentElement).insertAdjacentHTML('beforeend',
    '<style>h1.logo.floatLeft { display: none!important; }</style>');

Use MutationObserver to detect and delete the element immediately after it's added into DOM.

new MutationObserver(function(mutations) {
    // check at least two H1 exist using the extremely fast getElementsByTagName
    // which is faster than enumerating all the added nodes in mutations
    if (document.getElementsByTagName('h1')[1]) {
        var ibmlogo = document.querySelectorAll('h1.logo.floatLeft')[1];
        if (ibmlogo) {
            ibmlogo.remove();
            this.disconnect(); // disconnect the observer
        }
    }
}).observe(document, {childList: true, subtree: true});
// the above observes added/removed nodes on all descendants recursively

answered Sep 6, 2016 at 11:19

woxxom

75.2k15 gold badges161 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

gxvigo Over a year ago

Thanks @woxxom, the first option does the trick even if I don't quite understand how. When the script run my element doesn't exist (I tested with document.querySelectorAll, so how can the insertAdjacentHTML inject something in a non existing node? And if it's create a node, when the page eventually loads, it shouldn't override my injected element?

gxvigo Over a year ago

Hi couldn't make he second option (much fancier) working, in your code I get a syntax error in the second to last line (can't understand why). I then tried the sample from mozilla web site and the code fails because the target is not an Node, and checking it, when I create the target the element doesn't exist (I even tried with 'html') and target is always null. . Cheers

woxxom Over a year ago

1. It's what CSS sheets are for 2. The code should work as-is, don't change document parameter in observe. Anyway, I'm not psychic, so I can't tell what happens in your browser

Amir Over a year ago

it is not clear. wher to put my scripts? after document-start of before?

woxxom Over a year ago

After // ==/UserScript==, on a new line.

|

Zezombye · Accepted Answer · 2023-12-16 12:48:25Z

0

In my case I had to modify some inline JSON. MutationObserver did not work but simply overriding JSON.parse() did the trick.

var oldJsonParse = JSON.parse;
JSON.parse = function(content) {
    if (content.includes("someProp")) {
        var jsonContent = oldJsonParse(content);
        jsonContent.someProp = 2;
        return jsonContent;
    } else {
        return oldJsonParse(content);
    }
}

answered Dec 16, 2023 at 12:48

Zezombye

3614 silver badges16 bronze badges

Collectives™ on Stack Overflow

Tampermonkey script run before page load

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related