浏览器扩展：如何在加载元素时执行函数

Question

我正在开发浏览器扩展。它有两个部分：弹出窗口 - 包含复选框内容脚本 - 包含更改 CSS 属性的代码我正在保存复选框的状态，以便下次再次打开弹出窗口时，相同的复选框会被标记为已选中。当我使用复选框时，它们会按预期更改 DOM，但是当我尝试在页面加载后更改 DOM 时，更改不会反映出来。这可能是因为我想要执行操作的元素加载缓慢，因此所需的操作失败。我尝试使用 onload 和 ready 但没有任何效果$('.question-list-table').on('load', function() {     browser.storage.local.get(["options"], modifyThenApplyChanges) });我也尝试过，但没有任何改变。$('body').on('load','.question-list-table', function() {     browser.storage.local.get(["options"], modifyThenApplyChanges) });此外，当我在 Google Chrome 和 Mozilla Firefox 中进行测试时，弹出窗口或内容脚本没有明显的错误。更新：正如之前所怀疑的，目标元素加载缓慢，因此我使用了setTimeout脚本5 seconds，并且脚本按预期工作。加载时间是可变的，我想尽早以一致的方式展示我的更改。

Answer 1

这就是我编写的代码并且对我有用

// Mutation Observer

const observer = new MutationObserver(function (mutations) {

    mutations.forEach(function(mutation) {

        if(mutation.addedNodes.length) {

           //do stuff

        }

    });

});

el = document.getElementsById('elementId');

if(el) {

    observer.observe(el, {

        childList: true // specify the kind of change you are looking for

    });

}