Как добавить событие-прослушиватель для флажка в всплывающем окне расширения Chrome?

Я пытаюсь зафиксировать изменения checkbox во всплывающем окне расширения Chrome. Документация говорит:

Встроенный JavaScript не будет выполнен

На одной странице есть пример, но для button. Я не знаю, как изменить его, чтобы он фиксировал изменения состояния chekbox.

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('button').addEventListener('click', clickHandler);
});

Example

Ответы

Ответ 1

Имел ту же проблему, но ссылался на очень полезный сайт, который перечисляет события в Javascript. После быстрого поиска (Ctrl + F) для ключевого слова "проверка" я обнаружил, что указанное событие "изменения"... предположительно совместимо с большинством браузеров. Конечно, он был там, поэтому мое предположение заключается в том, что, возможно, есть "событие изменения" для флажков. Низкий и созерцать просто проверить его, и он работает. Вот ваш код немного переработан и ссылка событий (http://help.dottoro.com/larrqqck.php):

Пример html из popup.html

    <div class="menu" >
<input type="checkbox" id="showAlert" name="showAlert"/>
<label for="showAlert"><nobr>Show Alert</nobr></label></div>

Пример фрагмента кода из popup.js

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#showAlert').addEventListener('change', changeHandler);
});

Конечно, вам нужно передать это в функцию типа:

function changeHandler(){
   //Do Something...maybe another function showAlert(), for instance
   if(showAlert.checked){
      //do something
   }
   else{
      //do something else
   }
}

01/06/2018 - EDIT: Я просто взглянул на эту статью, и похоже, что это, скорее всего, станет устаревшим. Следовательно, вы можете использовать MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).

Ответ 2

Try:

document.querySelector('checkbox').addEventListener('CheckboxStateChange', Handler);

В качестве альтернативы вы можете прослушивать события onChange или onClick, так как каждый клик изменит статус флажка.