Keep service worker alive via content script heartbeat

Chrome MV3 service workers terminate after 30s of inactivity —
setInterval in the SW doesn't prevent it. Move the keepalive heartbeat
from background.js to StreamDeckConnectionMananger in the content
script. Any Port message resets the SW idle timer (Chrome 114+), keeping
the worker alive indefinitely while Meet is open.

Also fix onerror to schedule reconnect when ports still exist (was
silently dropping the connection on socket errors), and extract
_scheduleReconnect() to deduplicate reconnect logic.

Author: stephen-tatari

browser-extension/background.js

@@ -2,8 +2,6 @@
 const STREAM_DECK_PORT = 2394;
 
 const RECONNECTION_INTERVAL_SECS = 2;
-const HEARTBEAT_INTERVAL_SECS = 20;
-const HEARTBEAT_EVENT_NAME = "keepAlive";
 const WEBSOCKET_OPEN_STATE = 1;
 const PORT_NAME = "streamdeck-googlemeet";
 
@@ -23,18 +21,13 @@ class StreamDeckBackgroundBridge {
     webSocketFactory = (url) => new WebSocket(url),
     setTimeoutFn = setTimeout,
     clearTimeoutFn = clearTimeout,
-    setIntervalFn = setInterval,
-    clearIntervalFn = clearInterval,
   } = {}) {
     this._webSocketFactory = webSocketFactory;
     this._setTimeout = setTimeoutFn;
     this._clearTimeout = clearTimeoutFn;
-    this._setInterval = setIntervalFn;
-    this._clearInterval = clearIntervalFn;
 
     this._ports = new Set();
     this._socket = null;
-    this._heartbeatIntervalId = null;
     this._reconnectTimeoutId = null;
   }
 
@@ -107,24 +100,20 @@ class StreamDeckBackgroundBridge {
         event
       );
       this._closeSocket();
+      if (this._ports.size) {
+        this._scheduleReconnect();
+      }
     };
 
     this._socket.onclose = () => {
       this._socket = null;
-      this._stopHeartbeat();
 
-      if (!this._ports.size) {
-        return;
+      if (this._ports.size) {
+        this._scheduleReconnect();
       }
-
-      this._reconnectTimeoutId = this._setTimeout(() => {
-        this._reconnectTimeoutId = null;
-        this._createWebsocket();
-      }, RECONNECTION_INTERVAL_SECS * 1000);
     };
 
     this._socket.onopen = () => {
-      this._startHeartbeat();
       this._broadcast({
         type: MESSAGE_TYPES.STREAM_DECK_CONNECTION_OPENED,
       });
@@ -162,18 +151,12 @@ class StreamDeckBackgroundBridge {
     });
   }
 
-  _startHeartbeat = () => {
-    this._stopHeartbeat();
-    this._heartbeatIntervalId = this._setInterval(() => {
-      this._sendToSocket({ event: HEARTBEAT_EVENT_NAME });
-    }, HEARTBEAT_INTERVAL_SECS * 1000);
-  }
-
-  _stopHeartbeat = () => {
-    if (this._heartbeatIntervalId) {
-      this._clearInterval(this._heartbeatIntervalId);
-      this._heartbeatIntervalId = null;
-    }
+  _scheduleReconnect = () => {
+    this._stopReconnects();
+    this._reconnectTimeoutId = this._setTimeout(() => {
+      this._reconnectTimeoutId = null;
+      this._createWebsocket();
+    }, RECONNECTION_INTERVAL_SECS * 1000);
   }
 
   _stopReconnects = () => {
@@ -184,7 +167,6 @@ class StreamDeckBackgroundBridge {
   }
 
   _closeSocket = () => {
-    this._stopHeartbeat();
     if (this._socket) {
       const socket = this._socket;
       this._socket = null;

browser-extension/stream_deck_connection_manager.js

@@ -1,4 +1,6 @@
 const RECONNECTION_INTERVAL_SECS = 2;
+const HEARTBEAT_INTERVAL_SECS = 20;
+const HEARTBEAT_EVENT_NAME = "keepAlive";
 const EXTENSION_PORT_NAME = "streamdeck-googlemeet";
 const MESSAGE_TYPES = Object.freeze({
   BROWSER_EVENT: "browserEvent",
@@ -15,6 +17,7 @@ class StreamDeckConnectionMananger {
   constructor() {
     this._port = null;
     this._reconnectTimeoutId = null;
+    this._heartbeatIntervalId = null;
 
     // Any SDEventHandlers registered to receive inbound events from the Stream Deck.
     this._eventHandlers = [];
@@ -65,6 +68,12 @@ class StreamDeckConnectionMananger {
 
     this._port = chrome.runtime.connect({ name: EXTENSION_PORT_NAME });
 
+    // Send a message every 20s. Any message over a Port resets the service worker's
+    // 30-second idle timer, keeping the worker alive as long as Meet is open.
+    this._heartbeatIntervalId = setInterval(() => {
+      this.sendMessage({ event: HEARTBEAT_EVENT_NAME });
+    }, HEARTBEAT_INTERVAL_SECS * 1000);
+
     this._port.onMessage.addListener((message) => {
       if (message?.type === MESSAGE_TYPES.STREAM_DECK_CONNECTION_OPENED) {
         this._attemptStateTransmission();
@@ -75,8 +84,13 @@ class StreamDeckConnectionMananger {
 
     this._port.onDisconnect.addListener(() => {
       this._port = null;
+      if (this._heartbeatIntervalId) {
+        clearInterval(this._heartbeatIntervalId);
+        this._heartbeatIntervalId = null;
+      }
       if (this._reconnectTimeoutId) {
         clearTimeout(this._reconnectTimeoutId);
+        this._reconnectTimeoutId = null;
       }
       this._reconnectTimeoutId = setTimeout(() => {
         this._reconnectTimeoutId = null;

browser-extension/tests/background.test.js

@@ -54,8 +54,6 @@ test("broadcasts connection-opened and inbound websocket events to content scrip
   const socket = makeSocket();
   const bridge = new StreamDeckBackgroundBridge({
     webSocketFactory: () => socket,
-    setIntervalFn: () => 1,
-    clearIntervalFn: () => {},
     setTimeoutFn: () => 1,
     clearTimeoutFn: () => {},
   });
@@ -81,8 +79,6 @@ test("forwards browser events from content scripts to the websocket", () => {
   const socket = makeSocket();
   const bridge = new StreamDeckBackgroundBridge({
     webSocketFactory: () => socket,
-    setIntervalFn: () => 1,
-    clearIntervalFn: () => {},
     setTimeoutFn: () => 1,
     clearTimeoutFn: () => {},
   });
@@ -105,8 +101,6 @@ test("closes the websocket when the last content script disconnects", () => {
   const socket = makeSocket();
   const bridge = new StreamDeckBackgroundBridge({
     webSocketFactory: () => socket,
-    setIntervalFn: () => 1,
-    clearIntervalFn: () => {},
     setTimeoutFn: () => 1,
     clearTimeoutFn: () => {},
   });
@@ -119,3 +113,48 @@ test("closes the websocket when the last content script disconnects", () => {
 
   assert.equal(socket.closeCalls, 1);
 });
+
+test("schedules a reconnect when the websocket errors", () => {
+  let timeoutsScheduled = 0;
+  const socket = makeSocket();
+  const bridge = new StreamDeckBackgroundBridge({
+    webSocketFactory: () => socket,
+    setTimeoutFn: () => {
+      timeoutsScheduled += 1;
+      return 1;
+    },
+    clearTimeoutFn: () => {},
+  });
+  const port = makePort();
+
+  bridge.addPort(port);
+  socket.readyState = 1;
+
+  // Simulate an error
+  socket.onerror(new Error("socket error"));
+
+  assert.equal(socket.closeCalls, 1);
+  assert.equal(timeoutsScheduled, 1);
+});
+
+test("schedules a reconnect when the websocket closes", () => {
+  let timeoutsScheduled = 0;
+  const socket = makeSocket();
+  const bridge = new StreamDeckBackgroundBridge({
+    webSocketFactory: () => socket,
+    setTimeoutFn: () => {
+      timeoutsScheduled += 1;
+      return 1;
+    },
+    clearTimeoutFn: () => {},
+  });
+  const port = makePort();
+
+  bridge.addPort(port);
+  socket.readyState = 1;
+
+  socket.close();
+
+  assert.equal(socket.closeCalls, 1);
+  assert.equal(timeoutsScheduled, 1);
+});