JavaScript - 我的復選框（默認選中）不會在頁面加載時運行它的腳本

Question

如果這真的很簡單，我很抱歉，但我對 JavaScript 比較陌生。 我已經搜索了 web 以找到解決方案，但沒有找到任何東西！

因此，我正在為 Google Chrome 擴展彈出窗口構建一種“設置”UI，並且我正在使用復選框來啟用/禁用選項。 我希望默認選中其中一個復選框，因此我在其 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'
        });
    }
}

現在，到目前為止，這對我來說效果很好，它完全按照它的意圖做，除了一件事：我希望代碼自動運行，因為，呃，默認情況下選中了復選框。 該代碼僅在用戶未選中或選中該框時識別。

注意：我知道這行代碼

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

意味着 function 在點擊時運行，我應該只使用onclick="toggleOption1()"代替，但因為我正在制作 chrome 擴展，所以不允許使用內聯腳本。

注2：如果解決方案可以避免 JQuery 或其他外部庫，我將不勝感激，但如果沒有其他可用的，我想沒關系！

注 3：我會提供一個 JSFiddle，但我不相信有辦法實現 chrome 擴展環境。

有沒有人知道解決這個問題的方法？ 我已經困惑了幾天，我真的很想解決這個問題。
提前致謝！

Answer 1

稱呼

   toggleOption1();

后

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

編輯

您應該使用類似 DOMContentsLoaded 事件來確保已加載數據 Object Model

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。

加載擴展后加載后台腳本。 后台腳本對所有選項卡都有一個實例。

更新：加載擴展時只會執行一次。 因此，用戶在彈出窗口之后使用復選框沒有問題