JavaScript

Question

如果这真的很简单，我深表歉意，但我是 JavaScript 的新手。我已在网上搜索以寻找解决方案，但一无所获！

所以我正在为 Google Chrome 扩展弹出窗口构建一种“设置”UI，并且我正在使用 enable/disable 选项的复选框。我希望默认选中其中一个复选框，因此我在其 HTML 中定义了 checked 属性，如下所示；

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

现在，到目前为止，这对我来说效果很好，除了一个之外，它完全按照预期的方式进行：我希望代码自动成为运行因为，duh，默认情况下选中该复选框。该代码仅在用户未选中或选中该框时识别。

注意：我知道这行代码

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

表示单击时该函数是运行，我应该只使用 onclick="toggleOption1()"，但是因为我正在制作 chrome 扩展，所以不允许使用内联脚本。

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

注意 3： 我会提供一个 JSFiddle，但我不相信有实现 chrome 扩展环境的方法。

有人知道解决这个问题的方法吗？我已经困惑了好几天了，我真的很想解决这个问题。
提前致谢！

Answer 1

既然你知道默认情况下复选框被选中，那么你可以简单地执行你的代码 chrome.tabs.executeScript 来自后台脚本，而不是来自弹出脚本。

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

更新： 它只会在加载扩展时执行一次。因此，用户在 thr popup

之后使用复选框没有问题

Answer 2

通话

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

JavaScript - 我的复选框（默认选中）没有运行它是页面加载时的脚本

JavaScript - My checkbox (which is checked by default) doesn't run it's script on page load

html

checkbox

google-chrome

google-chrome-extension