У меня есть расширение Chrome, которое по существу удаляет кнопку и добавляет 2 других элемента HTML на сторонней веб-странице. Он делает это, наблюдая, что URL-адрес находится на текущей вкладке, и если он соответствует регулярному выражению, он продолжит выполнение HTML-инъекции. Однако даже с довольно высококлассным ноутбуком я вижу небольшую задержку. Кнопка, в которой я устанавливаю CSS, составляет display:none, появляется за долю секунды, прежде чем она будет удалена и заменена на мои 2 HTML-элемента.Извлечение дисплея: нет задержки в Chrome?
Можно ли удалить эту задержку, чтобы пользователь не мог видеть исходное отображение кнопки в течение этой доли секунды до того, как скрипт js внутри моего расширения Chrome удалит его? До сих пор я убедился, что файл js, ответственный за установку свойства кнопки, не имеет этого кода в первых 5 строках. Есть ли что-либо в API Chrome, который позволит мне удалить эту кнопку до того, как она загрузит страницу?
Моего 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';
}
И мой manifest.json
"content_scripts": [
{
"matches": ["https://basketball.fantasysports.yahoo.com/nba/*"],
"css": ["fantasy.css"],
"js": ["js/fantasy.js"],
"run_at": "document_end"
}
]
Предполагая, что замена HTML элементов не происходит, потому что элементы веб-сайт, не были загружены еще при Я пытаюсь найти элемент, который я пытаюсь удалить с веб-страницы.
Вы всегда можете улучшить воспринимаемую производительность, скрыв тело по умолчанию и отображая его, как только код был введен. – Roberrrt
Я пробовал ваш метод, скрывая тело ('display: none'), когда URL-адрес является целевым (потому что он не должен делать это для нерелевантных веб-сайтов) и вставлять и показывать (т.е.' display: initial') – btramisetty
И это соответствует вашей потребности? Предполагая, что нет, поскольку у вас все еще будет яркий веб-сайт, но, возможно, если вы его запустите в событии onbeforeload. – Roberrrt