Я хотел бы понять, как я могу внести изменения в HTML всплывающего окна. html в расширении Chrome, которое перезагружает данный URL каждые x секунд и ищет определенный текст на веб-странице.
Точнее: пользовательский интерфейс расширения имеет две кнопки «Выполнить» и «Стоп», соответственно запускающие и останавливающие функцию перезагрузки и поиска выше. Я также хотел включить в пользовательский интерфейс «загрузочный» gif-файл для отображения, когда пользователь нажимает кнопку «Выполнить» и расширение выполняет поиск текста. Загрузочный GIF должен исчезнуть, когда пользователь нажимает кнопку «Стоп» (и расширение прекращает поиск), или когда текст находится на целевом веб-сайте.
Загрузочный GIF находится внутри невидимого с идентификатором = "поиск" в всплывающем окне. html:
<div id="searching" style="display: none;" align="center"><img src="loading.gif" style="width: auto; height: 30%"/></div>
, и я попытался достичь желаемого результата, добавив в приложение. js две функции которые изменяют свои атрибуты, а также chrome.runtime.onMessage.addListener
(в дополнение к фону. js):
function showSrc() {
document.getElementById('searching').style.display ='block';
}
function hideSrc() {
document.getElementById('searching').style.display ='none';
}
document.querySelector('.button-run').addEventListener('click', () => {chrome.runtime.sendMessage('start'); showSrc();});
document.querySelector('.button-stop').addEventListener('click', () => {chrome.runtime.sendMessage('stop'); hideSrc();});
chrome.runtime.onMessage.addListener(function(message, callback){
if(message === 'stop') {
hideSrc();
} else if(message === 'run') {
showSrc();
}
});
Как вы можете видеть из приложения. js, когда пользователь нажимает «Выполнить» или «Остановить», сценарий не только отправляет соответствующие сообщения в фоновый режим. js для расширения, чтобы выполнить / остановить его функцию перезагрузки и поиска, но также изменяет атрибут оператора с id = «поиск», чтобы загрузочный gif был видимым / невидимым в пользовательском интерфейсе, вызывая соответственно showSrc()
или hideSrc()
.
Однако это работает нормально, только когда я остаюсь с открытым пользовательским интерфейсом на вкладке, где я запускаю скрипт. Если я переключаю вкладку во время работы расширения, то пользовательский интерфейс (всплывающее окно. html) закрывается, и когда я снова открываю его, нажимая на значок расширения, loading.gif исчезает, хотя расширение все еще работает.
Как я могу это исправить?