Chrome 扩展：TypeError：无法将属性“innerHTML”设置为 null答案

【问题标题】：Chrome Extension: TypeError: Cannot set property 'innerHTML' of nullChrome 扩展：TypeError：无法将属性“innerHTML”设置为 null
【发布时间】：2019-05-20 15:07:19
【问题描述】：

我不确定 DOM 是如何加载 chrome 扩展的。我将我的脚本 (background.js) 放在所有 html 元素下，但仍然会抛出“无法设置 null 属性”错误。

这是 manifest.json：

{
  "manifest_version": 2,
  "name": "Drill Sergeant",
  "description": "Tracks time spent on 'watchlist' websites",
  "version": "1.0.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "background": {"scripts": ["background.js"]},
  "permissions": ["activeTab", "webNavigation", "notifications", "tabs"]
}

这是html：

<body>
    <div class = "visual">
      <img src = "images/drillserg_default.png" width="80px">
    </div>
    <div class = "visual">
      <p id = "dialogue">"halp..."</p>
    </div>
    <div class = "visual">
      <h2 id = "timer">00:00<p>
    </div>
    <script src = background.js></script>
</body>

这是 .innerHTML 在我的脚本 (background.js) 中出现的地方：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
   startTimer();
});

function startTimer()
{
  alert("?");
  window.onload = document.getElementById("dialogue").innerHTML = "YOU BETTER WATCH YOURSELF";
  timerOn = false;
}

奇怪的是，我从 html 文件中完全删除了 'script src = "background.js" '，所有改变的是来自我的脚本的 console.log() 调用停止显示在控制台中；即使 html 中没有包含脚本，background.js 似乎也能运行。会不会是后台脚本总是在我的扩展元素之前被加载？有什么解决方法吗？我只想更改扩展程序上的文本...

感谢您阅读文字墙！

【问题讨论】：

不太清楚你想做什么，请进一步解释你想做什么。
我想在调用 startTimer()（查看我从 background.js 粘贴的内容）时更改（弹出）chrome 扩展上的文本，但它一直抛出“无法设置空”错误。

标签： javascript google-chrome-extension

【解决方案1】：

我想我知道您的问题可能是什么。在你继续开发你的 chrome 扩展之前，我有一些提示。 chrome 扩展文档真的很有帮助，我建议你阅读它并确保你理解。当我开始进行扩展时，我跳过了那部分，我花了很长时间很生气，直到我弄清楚了基础知识。但是，对于您的问题，我的猜测是您尚未在 web_accessible_resources 中声明 backround.js。只需将其添加到您的清单中：

"web_accessible_resources": ["background.js"],

另外，您应该注意： "background": {"scripts": ["background.js"]}, 与弹出窗口的脚本不同。无论用户是否按下了您的浏览器操作，只要您的用户浏览器打开，background.js 脚本就会开始运行。阅读更多 here 和 here。

所以，如果不清楚的话。 #dialogue 元素未定义的原因是脚本在没有您的 html 页面上下文的情况下运行。

【讨论】：