Question

我不确定chrome扩展的DOM如何加载。.我将脚本（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似乎也可以运行。难道背景脚本总是在我的扩展元素之前加载？会有任何解决方法吗？我只想更改扩展名上的文本...

感谢您阅读文字墙！

Answer 1

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

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

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

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

Chrome扩展程序：TypeError：无法将属性'innerHTML'设置为null

1 个答案: