My Chrome extension is designed to alter a third-party web page by removing a button and adding two new HTML elements. The process involves observing the URL of the current tab and executing an HTML injection if it matches the specified regex pattern. Despite using a high-end laptop, I have noticed a slight latency issue. The button that is supposed to be hidden with CSS display:none briefly appears before being replaced by my custom HTML elements.
Is there a way to eliminate this latency and ensure that the original button does not briefly display before being removed by the JavaScript script in my Chrome extension? I have already included the code to hide the button in the initial lines of my js file. Are there any features in the Chrome API that can help me remove the button before the page loads?
This is an excerpt from my code.js:
var tabURL = window.location.href;
var origBtn = document.getElementsByClassName("Btn Btn-short Btn-primary Mend-med")[0];
if(origBtn != null) origBtn.style.display = "none";
var canProceed = correctURL(); //external method check if it matches url regex
if(canProceed == true){
var rowElm = document.getElementsByClassName("Grid-table W-100 Fz-xs Py-lg")[0];
var div = document.createElement('div');
div.innerHTML = "<div class='extelms'>\
<div class='selectContainer'>\
<select required class='form-control' name='dayselect' id='days'>\
<option value='1'>1 Day</option>\
<option value='2'>2 Days</option>\
<option value='3'>3 Days</option>\
<option value='4'>4 Days</option>\
<option value='5'>5 Days</option>\
<option value='6'>6 Days</option>\
<option value='7'>7 Days</option>\
</select>\
<button id='submit'>Submit</button>\
</div>\
</div>\
</div>";
document.getElementsByClassName("Grid-u Px-med Fz-sm Va-mid")[0].appendChild(div);
document.getElementsByClassName("Grid-u Px-med Fz-sm Va-mid")[0].style.display = '-webkit-inline-box';
}
Here is how it is defined in my manifest.json:
"content_scripts": [
{
"matches": ["https://basketball.fantasysports.yahoo.com/nba/*"],
"css": ["fantasy.css"],
"js": ["js/fantasy.js"],
"run_at": "document_end"
}
]
I suspect that the delay in replacing the HTML elements may be due to the webpage's elements not being fully loaded when I attempt to search for and delete the specific element.