Javascript 在google扩展中加载变量时出错

为什么我在加载dom之前就出现了这个错误，因为我不知道如何修复这个问题，我已经花了几个小时试图解决这个问题。我得到这个错误

btncheck.js:10 Uncaught TypeError: Cannot read property 'checked' of null
    at save_options (btncheck.js:10)
    at btncheck.js:28

这是我的popup.js

(function() {
  if (window.addEventListener) {
    window.addEventListener('DOMContentLoaded', domReady, false);
  } else {
    window.attachEvent('onload', domReady);
  }
}());

function domReady() {
  onoffbtn = document.getElementById('onoffbtn').checked
}


function save_options() {
  chrome.storage.sync.set({
    onoffbtn: onoffbtn
  }, function() {
    setTimeout(function() {

    }, 750);
  });
}

function restore_options() {
  chrome.storage.sync.get({
    onoffbtn: true
  }, function(items) {
    document.getElementById('onoffbtn').checked = items.onoffbtn;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
setInterval(function() {
  save_options();
}, 1000);

setInterval(function() {
  $(document).ready(function() {
    if ($("#onoffbtn").prop("checked") == true) {
      let params = {
        active: true,
        currentWindow: true
      }
      chrome.tabs.query(params, gotTab);

      function gotTab(tab) {
        chrome.tabs.sendMessage(tab[0].id, 1);
      }
      console.log(1);
    } else if ($("#onoffbtn").prop("checked") == false) {
      let params = {
        active: true,
        currentWindow: true
      }
      chrome.tabs.query(params, gotTab);

      function gotTab(tab) {
        chrome.tabs.sendMessage(tab[0].id, 0);
      }
      console.log(0);
    }
  });
}, 1000);

这是我的manifest.json

{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"manifest_version": 2,
"permissions": ["tabs", 
    "*://*.beta.esportal.se/*", 
    "storage",
    "notifications",
    "http://*/",
    "https://*/"],
"background" : {
    "persistent": true,
    "scripts": ["background.js"]
},
"content_scripts":[
    {
    "matches": ["*://*.beta.esportal.se/*"],
    "js": ["jquery-3.4.1.js","content.js"]
}
],
"browser_action": {
  "default_popup": "startpage.html"
}

}

这是我的background.js

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {

    chrome.tabs.executeScript({
        file: 'popup.js'
    });
   }
});

这是我的content.js

chrome.runtime.onMessage.addListener（gotMessage）

---

在尝试获取属性之前，需要确保元素存在

function save_options() {
  let onoffbtn = document.getElementById('onoffbtn');
  if (onoffbtn) {
    chrome.storage.sync.set({
      onoffbtn: onoffbtn.value
    }, function() {
      setTimeout(function() {

      }, 750);
    });
  }
}

---

请注意，不可能出现此错误。

save\u options

函数从不使用

checked

属性。请将问题添加到主题中：包括重复问题的问题。对于Chrome扩展或Firefox WebExtensions，您几乎总是需要包含manifest.json和一些背景、内容和/或弹出脚本/HTML，通常还有网页HTML/scripts。寻求调试帮助的问题（“为什么我的代码没有按我想要的方式工作？”）必须包括：（1）所需的行为，（2）特定的问题或错误，（3）在问题本身中重现它所需的最短代码。另请参见：，和。

domReady（）

正在设置一个它从未使用过的局部变量，

save_options（）

正在尝试使用

onoffbtn

变量，但它不在范围内。@barmar确切地说，我不知道为什么会出现此错误。我只想在打开网页时直接运行此脚本。当我从background.js执行此文件时，当我单击扩展图标时，它才开始工作。在单击扩展图标之前，我收到了此错误。我已经坐了4个小时了，我不明白我到底做错了什么。我尝试过很多不同的解决方案，但都不管用。。。。。

function save_options() {
  let onoffbtn = document.getElementById('onoffbtn');
  if (onoffbtn) {
    chrome.storage.sync.set({
      onoffbtn: onoffbtn.value
    }, function() {
      setTimeout(function() {

      }, 750);
    });
  }
}