页面加载前的 Tampermonkey 脚本运行

Question

我需要在 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>

以下代码在 Chrome dev 中运行良好。工具

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

但是当我在脚本处于活动状态的情况下加载页面时，(h1) 部分不会消失。我相信这是因为当脚本运行时，DOM 尚未完成加载，因此脚本无法找到选择器。

我尝试了很多不同的方法（例如 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();
};

Answer 1

要求：

@run-at: document-start 在用户脚本元区块中。

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

现在有了上面的选项，你的选择是：

简单的注入一个隐藏logo的样式：

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

使用MutationObserver检测并删除添加到DOM中的元素。

（"rare elements"代码）
.

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

页面加载前的 Tampermonkey 脚本运行

Tampermonkey script run before page load

html

javascript

tampermonkey

页面加载前的 Tampermonkey 脚本 运行

Tampermonkey script run before page load

html

javascript

tampermonkey

页面加载前的 Tampermonkey 脚本运行