JavaScript-我的复选框（默认选中）不'；t运行它'；页面加载时的脚本

如果这是一件非常简单的事情，我很抱歉，但我对JavaScript相对来说是新手。我在网上搜遍了，想找到一个解决方案，但什么也没找到

因此，我正在为Google Chrome扩展弹出窗口构建一种“设置”UI，并使用复选框启用/禁用选项。我希望在默认情况下选中其中一个复选框，因此我在HTML中定义了

属性，如下所示

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

到目前为止，这对我来说非常有效，它完全符合它的意图，除了一件事：
我希望代码自动运行，因为默认情况下复选框是选中的。该代码仅在用户未选中或选中该框时识别

注意：我知道这行代码

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

这意味着函数是在单击时运行的，我应该只使用
onclick=“toggleOption1（）”
，但是因为我正在制作一个chrome扩展，所以不允许使用内联脚本

注2:如果解决方案能够避免JQuery或其他外部库，我将不胜感激，但如果没有其他可用的，我想也没关系

注3:我会提供一个JSFIDLE，但我认为没有办法实现chrome扩展环境

有人知道怎么解决这个问题吗？我已经困惑了好几天，我真的很想解决这个问题。


提前谢谢
 因为默认情况下您知道复选框是选中的，所以您可以简单地执行代码
chrome.tabs.executeScript
从后台脚本，而不是从弹出脚本

加载扩展后，将加载后台脚本。
后台脚本对所有选项卡都有一个实例

更新：
加载扩展时，它只执行一次。因此，用户在从thr弹出窗口调用该复选框之后可以轻松地使用该复选框

   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'
    //     });
    }
}

如果您只想在页面加载时默认运行
toggleOption1
功能，那么您应该尝试
document.ready
。谢谢，我会检查它。使用此方法，用户仍然能够关闭扩展吗？还是它会永远持续下去？谢谢，这解决了我的问题！
    document.getElementById("option1").addEventListener("click", toggleOption1);

    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'
    //     });
    }
}