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";
}
}
}
}
});