Warm tip: This article is reproduced from serverfault.com, please click

javascript-浏览器扩展:加载元素时如何执行功能

(javascript - Browser Extension: How to execute a function when an element is loaded)

发布于 2020-11-27 00:58:27

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

  1. 弹出窗口-包含复选框
  2. 内容脚本-包含更改CSS属性的代码

我正在保存复选框的状态,以便下次我再次打开弹出窗口时,会将相同的复选框标记为已选中。当我使用复选框时,它们会按预期更改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中测试时,弹出脚本或内容脚本也没有可见错误。

更新:

如前所述,目标元素加载缓慢,因此我使用setTimeout5 seconds该脚本并且脚本按预期工作。

加载时间是可变的,我希望以一致的方式尽早显示我的更改。

Questioner
Lovesh Dongre
Viewed
0
Lovesh Dongre 2020-11-29 02:27:47

经历后,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
    });
}