0

I'm trying to create a chrome extension to hide a dynamically loaded text. I use document.addEventListener('DOMSubtreeModified', function(event) {}); and it works but the text displays for a good second or two before it hides. Is there a better, quicker way to hide the text?

I'm currently not using jquery, but I can if must.

Background: I'm trying to create a chrome extension for Duolingo, a language site. Right now it displays the text along with the audio. I have the tendency to pay attention to the text and ignore the audio. So my extension will hide the text, forcing me to listen to the audio. Unfortunately, so far the text displays a second or two before it disappears.

This is my first chrome extension, so I'm pretty clueless. Here is my full code:

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";
                }
            }
        }
    }
});
Johnny
  • 71
  • 1
  • 8
  • use `"run_at": "document_end"` in your manifest – Daniel Lizik Sep 17 '16 at 06:17
  • 1
    You're using dinosaur technique, switch to MutationObserver: [How to change the HTML content as it's loading on the page](https://stackoverflow.com/a/39334319) and use ["run_at": "document_**start**"](https://developer.chrome.com/extensions/content_scripts#run_at) in manifest.json – wOxxOm Sep 17 '16 at 07:02
  • Thank you. I got it to works, but couldn't use "run_at": "document_start" or "document_end." It doesn't work for me for some reason. – Johnny Sep 17 '16 at 19:16
  • Maybe you forgot to add a comma. – wOxxOm Sep 20 '16 at 07:04

0 Answers0