如何检测Chrome扩展程序中加载的内容？

Question

我正在尝试创建Chrome扩展程序来隐藏动态加载的文本。我使用document.addEventListener（＆＃39; DOMSubtreeModified＆＃39;，function（event）{}）;并且它有效但文本在隐藏之前显示了一两秒钟。是否有更好，更快捷的方式来隐藏文本？

我目前没有使用jquery，但如果必须，我可以。

背景：我正在尝试为语言网站Duolingo创建Chrome扩展程序。现在它显示文本和音频。我倾向于关注文本而忽略音频。所以我的扩展程序将隐藏文本，迫使我听取音频。不幸的是，到目前为止，文本在消失之前显示了一两秒。

这是我的第一个Chrome扩展程序，所以我非常无能为力。这是我的完整代码：

document.addEventListener('DOMSubtreeModified', function(event) {
    var speaker = document.getElementById("big-speaker");
    if(speaker && speaker.hasChildNodes()){
        var txts = document.getElementsByTagName("bdi");
        if(txts!=null && txts.length >0){   
            var txt = txts[0];
            if (window.location.hash != "") txt.style.display="";
            else txt.style.display="none";

            if(!document.getElementById("div_show")){

                var show = document.createElement('div');
                show.id = "div_show";
                show.innerHTML = "Type What You Hear";
                show.onclick = function (){
                    if (window.location.hash != "") window.location.hash = "";
                    else window.location.hash = "show"; 
                };
                txt.parentNode.appendChild(show);
            if(!document.getElementById("input_typing")){
                var input = document.createElement('input');
                input.id = "input_typing";
                input.tabIndex = 1;
                input.focus();
                txt.parentNode.appendChild(input);
                document.getElementById("text-input").tabIndex =2;
            }
            }else{
                divShow = document.getElementById("div_show");
                if(divShow){
                    divShow.innerHTML = window.location.hash == "" ? "Type What You Hear" : "Hide";
                    document.getElementById("input_typing").style.display = window.location.hash == "" ? "" : "none";
                }
            }
        }
    }
});