我正在开发浏览器扩展。它分为两个部分:
我正在保存复选框的状态,以便下次我再次打开弹出窗口时,会将相同的复选框标记为已选中。当我使用复选框时,它们会按预期更改DOM,但是当我尝试在页面加载后更改DOM时,更改不会反映出来。这可能是因为我要在其上执行操作的元素加载缓慢,因此所需的操作失败。
我尝试使用onload并准备就绪,但没有任何效果
$('.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
该脚本,并且脚本按预期工作。
加载时间是可变的,我希望以一致的方式尽早显示我的更改。
经历后,MutationObserver
在注释部分@charlietfl的建议,这是我编码,对我的作品
// 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
});
}