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

称呼&nbsp; &nbsp;toggleOption1();后&nbsp; &nbsp; document.getElementById("option1").addEventListener("click", toggleOption1);编辑您应该使用 DOMContentsLoaded 事件之类的东西来确保加载数据对象模型JavaScript&nbsp; &nbsp; window.addEventListener('DOMContentLoaded', (event) => {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; document.getElementById("option1").addEventListener("click", toggleOption1);&nbsp; &nbsp; &nbsp; &nbsp;toggleOption1();&nbsp; });function toggleOption1() {&nbsp; var option1 = document.getElementById("option1");&nbsp; // if option1 is checked, run first script&nbsp; if (option1.checked === true) {&nbsp; &nbsp; console.log("checked");&nbsp; &nbsp; // chrome.tabs.executeScript({&nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp;file: 'optionEnabled.js'&nbsp; &nbsp; //&nbsp; &nbsp; &nbsp;});&nbsp; // otherwise, run script 2&nbsp; } else {&nbsp; &nbsp; console.log("not checked");&nbsp; &nbsp; // chrome.tabs.executeScript({&nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp;file: 'optionDisabled.js'&nbsp; &nbsp; //&nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; }}

Answer 2

由于您知道默认情况下复选框已选中，因此您可以简单地从后台脚本而不是弹出脚本执行代码 chrome.tabs.executeScript 。加载扩展后，就会加载后台脚本。后台脚本对于所有选项卡都有一个实例。更新：&nbsp;加载扩展时只会执行一次。因此，用户在弹出窗口之后使用复选框是没有问题的