Question

我想创建一个Chrome扩展程序。我有一个popup.html和一个background.js文件。我想创建一个倒数计时器，并且还希望它自动运行。但是background.js文件无法访问popup.html。如何在后台运行脚本并自动更改DOM？

popup.html：

<span class="time">20:00</span>
<script src="background.js"></script>

background.js：

startTimer = (duration, display) => {
  let time = duration, minutes, seconds;


setInterval(() => {
  minutes = parseInt(time / 60, 10);
  seconds = parseInt(time % 60, 10);

  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  display.innerHTML = `${minutes}:${seconds}`;
  if (--time < 0) {
    time = duration;
  }
 }, 1000);
}

window.onload = () => {
  let duration = 60 * .1, display = document.querySelector('.time');  
  startTimer(duration, display);
}

Answer 1

当前，您的脚本只是在弹出页面中运行的普通脚本。
仅仅因为它被命名为background.js，它并没有神奇地成为后台脚本。

必须在manifest.json中声明一个真实的background script：

"background": {
  "scripts": ["background.js"],
  "persistent": false
}

它会创建一个单独的隐藏后台页面（或使用"persistent": false时为事件页面），该后台脚本将在其中运行并可以直接访问以下站点的DOM该背景页面（而不是弹出窗口）。要检查/调试背景脚本，请在chrome：// extensions页面上将其设为开发人员模式：more info。

另一个问题是该弹出窗口仅在显示时才存在，因此您将不得不找到另一种显示计时器的方式。例如，单独的小窗口（通过chrome.windows.create打开）或扩展图标上的小文本标志（通过chrome.browserAction.setBadgeText设置），您可以通过谷歌搜索找到示例。

如何在后台自动运行Chrome扩展程序？

1 个答案: