Как внести динамические c изменения во всплывающее окно. html в Chrome расширениях - PullRequest
0 голосов
/ 21 апреля 2020

Я хотел бы понять, как я могу внести изменения в 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 исчезает, хотя расширение все еще работает.

Как я могу это исправить?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...