时间戳

首页 > 解决方案 > 浏览器扩展：加载元素时如何执行函数

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

问题描述

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

  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 中测试时，弹出窗口或内容脚本没有明显错误。

更新：

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

加载时间是可变的，我想尽可能早地以一致的方式显示我的更改。

标签： javascriptjquerygoogle-chrome-extensionfirefox-addon

解决方案

按照@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
    });
}

推荐阅读