使用MutationObserver能否追踪DOM突变的触发原因？Chrome扩展开发问题

问题描述 #

我正在开发一款谷歌Chrome扩展，现有代码运行无异常，但遇到了一个难以解决的问题：
我用代码检测类名为reports-content的节点变化，需要区分该变化是由输入控件失焦触发，还是由第三方站点的定时器行为触发。我仅希望在变化由输入控件失焦导致时执行对应操作，排除定时器触发的情况，实现遍历不同输入项时，仅在reports-content更新新数据后才尝试下一个输入项。
这个不受我控制的定时器属于第三方站点tradingview.com的逻辑，该站点使用React framework开发，每次价格变动都会触发我监听的对象发生突变，这属于站点正常行为。我需要能够区分哪些突变是由定时器/价格变动触发，哪些是由输入控件失焦触发。
现有代码如下：

// DOM加载完成后设置突变监听
$(document).ready(function(){
    console.log("JQuery Ready");

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(record => {
            var recordTarget = record.target;
            
            if(record.addedNodes.length>0){
                if(recordTarget.classList.contains("reports-content")){
                    console.log(recordTarget);
                    console.log(record);
                };
            }
                    
        });
    });

    // 监听body节点的突变，等待.reports-content类节点出现
    var target = $('body')[0];
    var config = {
        childList:true,
        subtree: true
    };
    observer.observe(target, config);
});

解决方案 #

方案1：失焦标记位方案（易实现，兼容性好） #

通过临时标记区分触发源，逻辑简单，适合绝大多数场景：

1. 监听目标输入控件的blur事件，触发时设置一个临时有效标记
2. 给标记加超时自动重置逻辑，避免标记长期生效误判定时器触发的更新
3. 突变监听回调中仅当标记生效时执行你的业务逻辑
   实现代码如下：

$(document).ready(function(){
    console.log("JQuery Ready");
    // 失焦触发标记，默认关闭
    let isInputBlurTriggered = false;
    // 标记有效时长，可根据站点实际响应速度调整，100-500ms区间基本足够
    const BLUR_FLAG_VALID_DURATION = 300;

    // 监听输入控件失焦事件，可将选择器替换为你实际操作的输入框选择器，提高精准度
    $(document).on('blur', 'input, textarea, [contenteditable="true"]', function() {
        isInputBlurTriggered = true;
        // 超时后自动重置标记
        setTimeout(() => {
            isInputBlurTriggered = false;
        }, BLUR_FLAG_VALID_DURATION);
    });

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(record => {
            var recordTarget = record.target;
            
            if(record.addedNodes.length>0 && recordTarget.classList.contains("reports-content")){
                // 仅当失焦标记生效时执行业务逻辑
                if(isInputBlurTriggered){
                    console.log("本次更新为输入失焦触发，执行后续操作");
                    console.log(recordTarget);
                    // 执行完逻辑后可主动重置标记，避免重复触发
                    isInputBlurTriggered = false;
                    
                    // 此处填写你的业务逻辑，比如切换到下一个输入项
                }
            };
        });
    });

    var target = $('body')[0];
    var config = {
        childList:true,
        subtree: true
    };
    observer.observe(target, config);
});

方案2：内容校验方案（精准度最高，无误判风险） #

如果担心超时时间设置不合理导致误判，可以结合输入内容做校验：每次主动修改输入框内容时，记录你输入的参数值，等reports-content更新时，检查更新后的内容是否和你输入的参数匹配，匹配则判定为你需要的更新。

React站点适配说明 #

TradingView基于React开发，所有DOM更新都由状态变更触发：

• 用户输入失焦触发的更新链路为：用户输入 -> 表单状态变更 -> reports-content重渲染
• 价格变动触发的更新链路为：行情推送 -> 行情状态变更 -> reports-content重渲染
  如果需要更精准的判断，可以注入脚本监听React状态变化，对于扩展场景来说上述两个方案已经可以满足需求。

内容的提问来源于stack exchange，提问作者Joseph Astrahan