javascript - MutationObserver错误: How could I wait for the creation of an element?

Question

这个问题已经有答案了:

How to wait until an element exists? (27 个回答)

已关闭 4 年前。

我正在尝试制作一个 Greasemonkey 脚本来在 Facebook 页面中添加一个按钮。但我需要等待元素的创建才能在其上添加按钮。
我正在尝试使用 MutationObserver ( As suggested here ) 执行此操作，但出现错误。

function init() {
    console.log('Launched : ' + launched);
    if (!launched) {
        launched = true;
        main();
    }
}
console.log('barfoo');

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (!mutation.addedNodes) return;
        console.log(mutation.addedNodes.type());
        for (var i = 0; i < mutation.addedNodes.length; i++) {
            if (mutation.addedNodes[i].matches('div[class="pam _5shk uiBoxWhite bottomborder"]')) {
                console.log('init');
                init();
            }
        }
    })
});
console.log('bar');

try {
    observer.observe(document.body, {
        childlist: true,
        subtree: true,
        attributes: false,
        characterData: false,
    });
} catch (error) {
    console.log(error);
}
console.log('foobar');

但是我收到以下日志:

barfoo
bar
DOMException [TypeError: "The expression cannot be converted to return the specified type."
code: 0
nsresult: 0x805b0034
location: file:///home/vmonteco/.mozilla/firefox/f3xgmo8e.default/gm_scripts/Facebook_cleaner/Facebook_cleaner.user.js:230] Facebook_cleaner.user.js:239:3
foobar

这个错误的原因是什么？我该如何解决这个问题？

如果该元素是在执行我的脚本之前创建的，则 MutationObserver还是会被触发？ (即，如果在我创建 MutationObserver 时该元素已经存在)。

注意:我尝试使用$(document).ready() ，但它是在创建我想要添加按钮的元素之前触发的。

NB-bis:我没有发布整个脚本。

Answer 1

不幸的是，该错误消息使用完全模糊，但你有一个拼写错误:

observer.observe(document.body, {
  childlist: true,
  subtree: true,
  attributes: false,
  characterData: false,
});

应该是

observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: false,
});

例如childlist => childList

在这种情况下，在 Chrome 中运行相同的代码会给出比“无法转换为返回指定类型”更有用的消息。它说

The options object must set at least one of 'attributes', 'characterData', or 'childList' to true.