javascript - 从后台 JS 在弹出 HTML 中设置倒计时

Question

我正在尝试在弹出的 html 中显示倒计时，应该由 background.js 监控

我找到了一个适合我需要的 javascript 代码，可以在后台脚本中运行。我试图将它直接放入 popup.htm 但不知何故没有奏效（并且还让我尝试进行参数传递，这不是一个坏主意，因为我正在尝试慢慢学习如何进行编码）

这是JS：

var Countdowntimer = 1;
var countDownDate = new Date().getTime()+(Countdowntimer*60*1000+5);
var x = setInterval(function() {

  var now = new Date().getTime();

  var distance = countDownDate - now;
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  document.getElementById("main-cd").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    var ongoing = document.getElementById("main-cd").innerHTML = "Refreshing...";
  }
}, 1000);

这是html：

<h3 style="text-align: center;"><strong>Time before next refresh: </strong></h3>
<h1 id="main-cd"></h1>
<script src="background.js" />

我收到以下错误消息： Uncaught TypeError: Cannot set property 'innerHTML' of null at background.js:29

我希望倒计时显示在弹出窗口中，并在秒数变化时更新。

提前感谢您的帮助！

标签： javascripthtmlgoogle-chrome-extension