javascript - 观察 greasemonkey 脚本中的元素创建？

Question

当加载文档时创建类为“nav”的元素时，我需要得到通知。谷歌搜索我找到了 MutationObservers 并认为它们会很完美，但我似乎无法让它工作。

// ==UserScript==
// @name        ii-shortcuts
// @namespace   https://github.com/RedHatter
// @include     *
// @version     1
// @run-at document-start
// ==/UserScript==

var observer = new MutationObserver(function(mutations)
{
    mutations.forEach(function(mutation)
    {
        if (mutation.target.getAttribute('class') == 'nav')
            GM_log('nav creation');
    });    
});
observer.observe(document, {subtree: true, attributes: true, attributeFilter: ['class']});    

我也试过了。

// ==UserScript==
// @name        ii-shortcuts
// @namespace   https://github.com/RedHatter
// @include     *
// @version     1
// @run-at document-start
// ==/UserScript==

var observer = new MutationObserver(function(mutations)
{
    mutations.forEach(function(mutation)
    {
        if (mutation.addedNodes[0].getAttribute('class') == 'nav')
            GM_log('nav creation');
    });    
});
observer.observe(document, {subtree: true, childList: true});

但在其他情况下，“导航创建”会在页面加载时登录。我错过了什么？

Answer 1

几个问题(从大到小):

1. 文档第一次时，静态加载；这些事件是 childList事件，而不是 attributes事件。

   例如，

   $("body").append ('<p id="foo" class="bar">Hiya!</p><p>blah</p>');
   

   生成一个 childList事件，而随后的

   $("#foo").attr ("class", "bar2");
   

   生成 attributes事件。
   
   

2. mutation.addedNodes[0] 的几率包含类为 nav 的元素几乎为零。这几乎总是一个文本节点。
   您需要检查整个数组，加上 target .

3. 不要使用 getAttribute('class') == 'nav'检查类(class)。这将为没有 getAttribute 的节点抛出异常函数，它会遗漏具有多个类的元素。例如:<p class="foo nav bar">...

   使用 classList.contains()在适当的节点类型上。

4. 使用 @grant指令，如果你使用任何 GM_像GM_log()这样的功能.无论如何都要使用赠款，以确保沙箱继续运行。

5. 避免使用 // @include * .尤其是对于计时器和观察者，这会使您的浏览器和机器陷入困境。

6. 此信息适用于 Firefox。Chrome 在实现 Mutation 观察器的方式上有很大差异。在页面加载之前，这种代码在 Chrome 中不起作用。

---

将它们放在一起，脚本变为:

// ==UserScript==
// @name        _ii-shortcuts
// @namespace   https://github.com/RedHatter
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*
// @run-at      document-start
// @version     1
// @grant       GM_log
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
var MutationObserver = window.MutationObserver;
var myObserver       = new MutationObserver (mutationHandler);
var obsConfig        = {
    childList: true, attributes: true,
    subtree: true,   attributeFilter: ['class']
};

myObserver.observe (document, obsConfig);

function mutationHandler (mutationRecords) {

    mutationRecords.forEach ( function (mutation) {

        if (    mutation.type               == "childList"
            &&  typeof mutation.addedNodes  == "object"
            &&  mutation.addedNodes.length
        ) {
            for (var J = 0, L = mutation.addedNodes.length;  J < L;  ++J) {
                checkForCSS_Class (mutation.addedNodes[J], "nav");
            }
        }
        else if (mutation.type == "attributes") {
            checkForCSS_Class (mutation.target, "nav");
        }
    } );
}

function checkForCSS_Class (node, className) {
    //-- Only process element nodes
    if (node.nodeType === 1) {
        if (node.classList.contains (className) ) {
            console.log (
                'New node with class "' + className + '" = ', node
            );
            // YOUR CODE HERE
            //GM_log ('nav creation');
        }
    }
}