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

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

按照@charlietfl 在评论部分中的建议完成 MutationObserver 之后，这就是我编写的代码并为我工作

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

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

Browser Extension: How to execute a function when an element is loaded

javascript

jquery

firefox-addon

google-chrome-extension