Adding service worker heartbeat (#52)

Author: naps62

src/background/heartbeat.ts

@@ -0,0 +1,36 @@
+// Copied from https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers?hl=pt-br#keep_a_service_worker_alive_continuously
+
+import log from "loglevel";
+import { storage } from "webextension-polyfill";
+
+/**
+ * Starts the heartbeat interval which keeps the service worker alive. Call
+ * this sparingly when you are doing work which requires persistence, and call
+ * stopHeartbeat once that work is complete.
+ */
+export async function startHeartbeat() {
+  // Run the heartbeat once at service worker startup.
+  runHeartbeat().then(() => {
+    // Then again every 20 seconds.
+    setInterval(runHeartbeat, 20000);
+  });
+}
+
+async function runHeartbeat() {
+  log.debug("Heartbeat", getLastHeartbeat());
+  try {
+    await storage.local.set({
+      "last-heartbeat": Date.now().toString(),
+    });
+  } catch (err: any) {
+    log.error("Heartbeat error", err);
+  }
+}
+
+/**
+ * Returns the last heartbeat stored in extension storage, or undefined if
+ * the heartbeat has never run before.
+ */
+async function getLastHeartbeat() {
+  return (await storage.local.get("last-heartbeat"))["last-heartbeat"];
+}

src/background/index.ts

@@ -3,6 +3,7 @@ import { action, type Runtime, runtime } from "webextension-polyfill";
 import { ArrayQueue, ConstantBackoff, WebsocketBuilder } from "websocket-ts";
 
 import { defaultSettings, loadSettings, type Settings } from "#/settings";
+import { startHeartbeat } from "./heartbeat";
 
 // init on load
 (async () => init())();
@@ -13,6 +14,7 @@ let settings: Settings = defaultSettings;
  * Loads the current settings, and listens for incoming connections (from the injected contentscript)
  */
 async function init() {
+  startHeartbeat();
   settings = await loadSettings();
   log.setLevel(settings.logLevel);
 

src/inpage/index.ts

@@ -8,9 +8,9 @@ import { name } from "./utils";
 
 const { PROD } = import.meta.env;
 
-// @ts-ignore
+// @ts-expect-error
 import iconProd from "../public/icons/ethui-black.svg?base64";
-// @ts-ignore
+// @ts-expect-error
 import iconDev from "../public/icons/ethui-purple.svg?base64";
 
 const icon = PROD ? iconProd : iconDev;