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

Question

我正在开发浏览器扩展。它有两个部分：

1. 弹出窗口 - 包含复选框

2. 内容脚本 - 包含更改 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 Observerconst 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    });}