在页面加载之前运行Tampermonkey脚本

I need to hide a section from an html page:

我需要在html页面中隐藏一个部分:

<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

下面的代码在Chrome开发工具中运行良好

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.

但是，当我加载脚本活动的页面时，部分(h1)不会消失。我认为这是因为当脚本运行时，DOM还没有完成加载，因此脚本没有找到选择器。

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

我尝试过很多不同的东西(例如window.onLoad)，但我的脚本仍然没有效果。最后一次尝试(失败)如下:

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

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

Any advice? Thanks, Giovanni

任何建议吗?谢谢,乔凡尼

1 个解决方案

#1

Required:

要求:

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

@run at: userscript metablock中的文档启动。

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

Now with the above your options are:

有了以上这些，你的选择是:

Simply inject a style that hides the logo:

只需注入隐藏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.

使用MutationObserver在元素添加到DOM之后立即检测和删除它。

Modify elements immediately (not after page completely loads)?
立即修改元素(不是在页面完全加载之后)?
How to change the HTML content as it's loading on the page ("rare elements" code)
如何在页面加载时更改HTML内容(“稀有元素”代码)
Performance of MutationObserver to detect nodes in entire DOM.
MutationObserver在整个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

#1