Расширение таймера Chrome - как сохранить работу таймера, даже если расширение закрыто? - PullRequest
Новая
       8

Расширение таймера Chrome - как сохранить работу таймера, даже если расширение закрыто?

0 голосов
/ 27 сентября 2019

Я работаю над своим первым расширением - Таймером чая.После выбора типа чая / ввода количества минут запустится таймер.Проблема в том, что когда я меняю вкладку или закрываю расширение, таймер перестает работать, хотя я бы хотел, чтобы он работал в фоновом режиме.Я не уверен, как справиться с этим с chrome.storage .

Вот мой timer.js : 

function timer(seconds) {
  clearInterval(countdown);

  const now = Date.now();
  const then = now + seconds * 1000;

  displayTimeLeft(seconds);
  displayEndTime(then);

  countdown = setInterval(() => {
    const secondsLeft = Math.round((then - Date.now()) / 1000);

    if (secondsLeft < 0) {
      clearInterval(countdown);
      const soundEffect = new Audio("tibetan.mp3");
      soundEffect.play();
      setTimeout(function() {
        alert("Your tea is ready!");
      }, 500);
      return;
    }
    displayTimeLeft(secondsLeft);
  }, 1000);
}

function displayTimeLeft(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainderSeconds = seconds % 60;
  const display = `${minutes}:${
    remainderSeconds < 10 ? "0" : ""
  }${remainderSeconds}`;
  if (timerDisplay) {
    timerDisplay.textContent = display;
  }
  //console.log({ minutes, remainderSeconds });
}


function startTimer() {
  const seconds = parseInt(this.dataset.time);
  console.log(seconds);
  timer(seconds);
}

buttons.forEach(button => button.addEventListener("click", startTimer));

background.js 

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [new chrome.declarativeContent.PageStateMatcher({})],
        actions: [new chrome.declarativeContent.ShowAction()]
      }
    ]);
  });
});

Спасибо всем заранее!

1 Ответ

0 голосов
/ 27 сентября 2019

Так как time.js является частью всплывающего окна, код в этом файле (а также интервал, который вы установили с помощью setInterval) остановится, как только всплывающее окноокно закрыто.

Для того, чтобы эта работа работала, вам нужно переместить интервал на фоновую страницу, контекст фоновой страницы можно настроить на сохранение до тех пор, пока открыт браузер.

Кстати, код, который в настоящее время находится в background.js , ничего не делает, и вам нужно что-то подобное, только если вы хотите использовать действия страницы

Вот мой подход для этого:

background.js 

let timerID;
let timerTime;

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.cmd === 'START_TIMER') {
    timerTime = new Date(request.when);
    timerID = setTimeout(() => {
       // the time is app, alert the user.
    }, timerTime.getTime() - Date.now());
  } else if (request.cmd === 'GET_TIME') {
    sendResponse({ time: timerTime });
  }
});

timer.js 

// Call this when the pop-up is shown
chrome.runtime.sendMessage({ cmd: 'GET_TIME' }, response => {
  if (response.time) {
    const time = new Date(response.time);
    startTimer(time)
  }
});

functions startTimer(time) {
  if (time.getTime() > Date.now()) {
    setInterval(() => {
      // display the remaining time
    }, 1000)

  }
}

function startTime(time) {
  chrome.runtime.sendMessage({ cmd: 'START_TIMER', when: time });
  startTimer(time);
}

По сути, когда пользователь запускает таймер, вы отправляете фоновый скрипт с будущей датой завершения таймера.Затем в фоновом скрипте вы устанавливаете тайм-аут, который будет запускаться на эту дату, чтобы вы могли что-то делать (воспроизводить звук), даже если всплывающее окно закрыто.Затем, когда всплывающее окно снова открывается, вы отправляете сообщение фоновому сценарию, и оно отправляет обратно дату для таймера, который был ранее установлен.

Это можно улучшить, сейчас это будетработать правильно, пока браузер открыт на всю длину таймера, чтобы он работал, даже если браузер закрыт и открыт заново, вы можете сохранить и восстановить дату таймера из хранилища.

...