Как запустить расширение Chrome в фоновом режиме автоматически?

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": {
  "scripts": ["background.js"],
  "persistent": false
}

Создает отдельную скрытую фоновую страницу (или страницу события при использовании "persistent": false), где этот фоновый скрипт будет запускаться и будет иметь прямой доступ к DOM этой фоновой страницы ( не всплывающее окно). Чтобы проверить / отладить фоновый скрипт, щелкните фоновую страницу на странице расширений chrome: //, когда он находится в режиме разработчика: дополнительная информация .

Другая проблема заключается в том, что всплывающее окно существует только тогда, когда оно отображается, поэтому вам нужно будет найти другой способ показа таймера. Например, отдельное маленькое окно (открытое с помощью chrome.windows.create) или маленький текстовый значок на значке расширения (установленный с помощью chrome.browserAction.setBadgeText), примеры которого можно найти путем поиска в Google.