Контроллинг javascript с флажком

Question

Я создаю расширение chrome, где я хочу контролировать javascript с помощью этого флажка:

    <div class="modal-icons">
        <div class="flex-container">
            <div class="flex">
                <label class="switch">
                  <input id="check" type="checkbox" checked>
                  <span class="slider round"></span>
                </label>
            </div>
        </div>
    </div>

Как я могу получить состояние в файле. js?

Я пробовал:

document.addEventListener('DOMContentLoaded', function() {
const checked = document.getElementById('check').checked;
  # ACTION 
  });

и

var checked = document.getElementById('check').checked;
console.log('checked');

А также аналогичные подходы, но я не уверен, как получить состояние.

Я получаю сообщение об ошибке: Uncaught TypeError: Невозможно прочитать свойство 'checked' со значением NULL

Можно ли, например, написать это?

if (checked == true) {
   console.log('checked');
}

Или оно выдаст значение 'checked'?

Может кто-нибудь помочь мне объяснить это, пожалуйста?

Answer 1

Наконец-то это решило мою проблему:

document.getElementById('check').addEventListener('change', func => {
if (event.target.checked) {
    chrome.tabs.executeScript({
    file: 'safe.js'
    }); 
    }
});

Мне удалось запустить скрипт только из другого файла.

Также файл скрипта, выполняющий этот код, должен был называться popup . js 'и не работал с другими именами - даже если он был правильно объявлен в файле манифеста.

Я думаю, что это связано с некоторыми специальными реквизитами Chrome расширений.

Answer 2

Проблема с

var checked = document.getElementById('check').checked;
console.log('checked');

заключается в том, что проверяемая переменная остается одним значением и никогда не обновляется, т.е. если флажок установлен по умолчанию, флажок всегда равен true, даже если он был изменен. Кроме того, нет ничего, что прослушивает обновления для флажка. Я бы привязал слушателя события к элементу

document.getElementById('check').addEventListener("change", event => {
    if(event.target.checked) {
        // Checkbox is checked
    } else {
        // Checkbox is not checked
    }
})