Persistent background page on demand or an event page that doesn't unload?

Question

I want to build a extension that behaves like a timer. It should count down the seconds when activated, but should do nothing with inactive.

The chrome.alarms API is

Answer 1

As mentioned in Xan's answer we can abuse messaging. There's nothing wrong about it either in case you want to temporarily prevent the event page from unloading. For example while displaying a progress meter using chrome.notifications API or any other activity based on setTimeout/setInterval that may exceed the default unload timeout which is 5-15 seconds.

Demo

It creates an iframe in the background page and the iframe connects to the background page. In addition to manifest.json and a background script you'll need to make two additional files bg-iframe.html and bg-iframe.js with the code specified below.

manifest.json excerpt:

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

bg.js:

function preventUnload() {
  let iframe = document.querySelector('iframe');
  if (!iframe) {
    iframe = document.createElement('iframe');
    document.body.appendChild(iframe).src = 'bg-iframe.html';
  }
}

function allowUnload() {
  let iframe = document.querySelector('iframe');
  if (iframe) iframe.remove();
}

chrome.runtime.onConnect.addListener(() => {});

bg-iframe.html:

bg-iframe.js:

chrome.runtime.connect();

Usage example in bg.js:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message === 'start') doSomething();
});

function doSomething() {
  preventUnload();
  // do something asynchronous that's spread over time
  // like for example consecutive setTimeout or setInterval calls
  let ticks = 20;
  const interval = setInterval(tick, 1000);

  function tick() {
    // do something
    // ................
    if (--ticks <= 0) done();
  }

  function done() {
    clearInterval(interval);
    allowUnload();
  }
}