JavaScript - 我的复选框（默认情况下处于选中状态）不会在页面加载时运行其脚本

Question

如果这真的很简单，我很抱歉，但我对 JavaScript 还比较陌生。我已经在网上寻找解决方案，但没有找到任何东西！因此，我正在为 Google Chrome 扩展弹出窗口构建一种“设置”UI，并使用复选框来启用/禁用选项。我希望默认选中其中一个复选框，因此我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扩展环境。那里有人知道解决这个问题的方法吗？我已经困惑了好几天了，我真的很想解决这个问题。提前致谢！

Answer 1

称呼

   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'

    //     });

    }

}

Answer 2

由于您知道默认情况下复选框已选中，因此您可以简单地从后台脚本而不是弹出脚本执行代码 chrome.tabs.executeScript 。

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

更新： 加载扩展时只会执行一次。因此，用户在弹出窗口之后使用复选框是没有问题的