突变观察者未按预期触发

问题描述

我正在开发chrome扩展程序。我的内容脚本需要检测按钮徽章的内文更改,然后调用回调函数。但是,即使更改了徽章,也不会调用回调。

以下是我的代码的样子

 const config = {
        childList: true,subtree: true,attributes: true,characterData: true
    };

    waitUntilExists(0,(".button__badge.badge.badge-secondary"))
        .then(() => {
            const granulesNode = $(".button__badge.badge.badge-secondary")[0];
            let granuleMutationObserver = new MutationObserver(function(mutations,granuleMutationObserver) {
                updateButtonCSS();
                console.log("Mutation Observer Fired");    
            });
            granuleMutationObserver.observe(granulesNode,config);
            updateButtonCSS();
        })
        .catch(err => console.error(err))

以下是按钮徽章的外观。

<button title="Download All" role="button" label="Download All" aria-label="Download All" type="button" class="button button--full button--icon button--badge granule-results-actions__download-all-button btn btn-success">
    <i class="button__icon button__icon--push fa fa-download"></i>
    <span class="button__contents">Download All</span>
    <span class="button__badge badge badge-secondary">593 Granules</span>
</button>

以下是我正在观察的节点的样子。

const granulesNode = $(".button__badge.badge.badge-secondary")[0];
console.log(granulesNode)
//<span class="button__badge badge badge-secondary">593 Granules</span>

我需要检测granulesNode的内部文本何时更改。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)