Question

Tampermonkey 脚本在页面加载前运行

2016-09-06

38071

javascript html tampermonkey

我需要隐藏 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 开发工具中运行良好

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==

现在有了上述内容，您的选择是：

只需注入隐藏徽标的样式：

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

使用 MutationObserver 在元素添加到 DOM 后立即检测并删除该元素。

new MutationObserver(function(mutations) {
// 使用极快的 getElementsByTagName 检查是否存在至少两个 H1
// 这比枚举突变中的所有添加节点更快
if (document.getElementsByTagName('h1')[1]) {
var ibmlogo = document.querySelectorAll('h1.logo.floatLeft')[1];
if (ibmlogo) {
ibmlogo.remove();
this.disconnect(); // 断开观察者
}
}
}).observe(document, {childList: true, subtree: true});
// 以上递归观察所有后代上的添加/删除节点

Answer 2

就我而言，我必须修改一些内联 JSON。 MutationObserver 不起作用，但只需覆盖 JSON.parse() 即可。

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