Chrome 扩展：等待元素加载（异步 js）

我有一个 Chrome 扩展程序，我想等到元素加载后再将内容注入页面。

我正在尝试注入一个按钮：

myButton = document.createElement('button');
myButton.class = 'mybutton';
document.querySelector('.element_id').appendChild(myButton)

我将其放在内容脚本的顶部。它曾经工作得很好，但后来就停止工作了。显示的错误是：

Uncaught TypeError: Cannot read property 'appendChild' of null

为了等待具有class id的元素.element_id为了加载，我尝试使用 MutationObserver

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (!mutation.addedNodes) return

        for (var i = 0; i < mutation.addedNodes.length; i++) {
            if (mutation.addedNodes[i].parentNode == document.querySelector('#outer-container')) {

                myButton = document.createElement('button');
                myButton.class = 'mybutton';
                document.querySelector('.element_id').appendChild(myButton)
        }
            var node = mutation.addedNodes[i]
        }
    })
})

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

当我使用变异观察器时，页面将加载一个名为的外部 div 元素outer-container，而且我没有办法直接比较班级.element_id。班上.element_id外部 div 嵌套了很多层。

但是，上述方法不起作用，我仍然收到 null 属性错误。

在注入之前是否有更好的方法来等待加载某些元素（异步加载）？

不要忘记添加childList https://developer.mozilla.org/en/docs/Web/API/MutationObserver and subtree https://developer.mozilla.org/en/docs/Web/API/MutationObserver观察变化时的属性。

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if (!mutation.addedNodes) {
            return;
        }
        for (var i = 0; i < mutation.addedNodes.length; i++) {
            if (mutation.addedNodes[i].classList.contains("element_id")) {
                // Your logic here
            }
        }
    });
});

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