Блог

Я прошу прощения, если это что-то действительно простое, но я относительно новичок в JavaScript. Я обыскал Интернет, чтобы найти решение, но ничего не нашел!

Итак, я создаю своего рода пользовательский интерфейс «настройки» для всплывающего окна расширения Google Chrome и использую флажки для включения / отключения параметров. Я хочу, чтобы один из флажков был установлен по умолчанию, поэтому у меня есть checked атрибут, определенный в его HTML следующим образом;

 <input type="checkbox" id="option1" style="margin-left: 20px;" checked>
                                                        <!-- ^ Right here ^ -->
<script src="script.js"></script>
 

Я реализовал здесь скрипт, так что, если флажок установлен, определенный скрипт будет введен программно. Если он не установлен, он будет вводить другой скрипт. Код:

 document.getElementById("option1").addEventListener("click", toggleOption1);

function toggleOption1() {

  var option1 = document.getElementById("option1");

  // if option1 is checked, run first script
  if (option1.checked === true) {
    chrome.tabs.executeScript({
          file: 'optionEnabled.js'
        });
  // otherwise, run script 2
  } else {
    chrome.tabs.executeScript({
          file: 'optionDisabled.js'
        });
    }
}
 

До сих пор это отлично работало для меня, оно делает именно то, что намеревается делать, за исключением одной вещи:
Я хочу, чтобы код запускался автоматически, потому что, да, флажок установлен по умолчанию. Код распознает только тогда, когда флажок снят или установлен пользователем.

Примечание: я знаю, что эта строка кода

 document.getElementById("option1").addEventListener("click", toggleOption1);
 

означает, что функция запускается по щелчку мыши, и я должен просто использовать onclick="toggleOption1()" вместо этого, но поскольку я создаю расширение Chrome, встроенные скрипты не разрешены.

Примечание 2: Я был бы признателен, если бы решение могло избежать jQuery или других внешних библиотек, но если больше ничего не доступно, я думаю, все в порядке!

Примечание 3: я бы предоставил JSFiddle, но я не верю, что есть способ реализовать среду расширения Chrome.

Кто-нибудь знает способ исправить это? Я был сбит с толку в течение нескольких дней, и я бы очень хотел исправить эту проблему.
Заранее спасибо!

вызов

    toggleOption1();
 

после

     document.getElementById("option1").addEventListener("click", toggleOption1);
 

Редактировать

Вы должны использовать что-то вроде события DOMContentsLoaded, чтобы убедиться, что модель объекта данных загружена

JavaScript

     window.addEventListener('DOMContentLoaded', (event) => {
        
   
      
      document.getElementById("option1").addEventListener("click", toggleOption1);
       toggleOption1();
  });
function toggleOption1() {

  var option1 = document.getElementById("option1");

  // if option1 is checked, run first script
  if (option1.checked === true) {
    console.log("checked");
    // chrome.tabs.executeScript({
    //       file: 'optionEnabled.js'
    //     });
  // otherwise, run script 2
  } else {
    console.log("not checked");
    // chrome.tabs.executeScript({
    //       file: 'optionDisabled.js'
    //     });
    }
}
 

Поскольку вы знаете, что по умолчанию этот флажок установлен, вы можете просто выполнить свой код chrome.tabs.executeScript из фонового скрипта, а не из всплывающего скрипта.

Фоновый скрипт загружается после загрузки расширения. Фоновый скрипт имеет один экземпляр для всех вкладок.

обновление: он будет делать это только один раз при загрузке расширения. Так что у пользователя нет проблем играть с флажком после этого из всплывающего окна