feat(extension): enhance offscreen document management and logging

- Implemented a keep-alive mechanism for the offscreen document using setInterval.
- Added logging for WebSocket ping messages and improved message logging format.
- Registered the offscreen document creation on Chrome runtime startup.

Author: Stormix

apps/extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lgamila/extension",
   "displayName": "LGamila Live",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "This extension shows you a real-time list of all Moroccan Twitch and Kick streamers who are currently live.",
   "author": "Stormix <hello@stormix.dev>",
   "scripts": {

apps/extension/src/background/index.ts

@@ -24,3 +24,8 @@ async function createOffscreenDocument() {
 }
 
 createOffscreenDocument();
+
+chrome.runtime.onStartup.addListener(createOffscreenDocument);
+self.onmessage = (_e) => {
+  // Keep the offscreen document alive
+};

apps/extension/src/background/notifications.ts

@@ -34,7 +34,7 @@ const showNotification = (parsed: ServerToClient) => {
 };
 
 chrome.runtime.onMessage.addListener(async (message) => {
-  logger.info('Received message', message);
+  logger.info('Received message', JSON.stringify(message));
   const parsed = serverToClient.safeParse(message);
 
   if (!parsed.success) {
@@ -69,7 +69,7 @@ chrome.runtime.onMessage.addListener(async (message) => {
         return;
       }
 
-      logger.info('Creating notification', parsed.data.data);
+      logger.info('Creating notification', JSON.stringify(parsed.data.data));
       chrome.notifications.create(
         {
           type: 'basic',
@@ -94,6 +94,10 @@ chrome.runtime.onMessage.addListener(async (message) => {
       showNotification(parsed.data);
       break;
     }
+    case 'ping': {
+      logger.info('Ping received', JSON.stringify(parsed.data.data));
+      break;
+    }
     default:
       return;
   }

apps/extension/src/lib/constants.ts

@@ -1,5 +1,5 @@
 export const APP_NAME = 'LGamila Live';
-export const APP_VERSION = '1.1.0';
+export const APP_VERSION = '1.1.1';
 export const APP_DESCRIPTION =
   'This extension shows you a real-time list of all Moroccan Twitch and Kick streamers who are currently live.';
 export const APP_AUTHOR = 'Stormix <hello@s.dev>';

apps/extension/src/offscreen.ts

@@ -3,6 +3,12 @@ import { WS_URL } from './lib/constants';
 import { logger } from './lib/logger';
 
 logger.info('Offscreen script loaded');
+
+// Keep the offscreen document alive
+setInterval(async () => {
+  (await navigator.serviceWorker.ready).active.postMessage('keepAlive');
+}, 10_000);
+
 const ws = new WebSocket(WS_URL);
 
 ws.onopen = () => {
@@ -26,6 +32,12 @@ ws.onmessage = async (event) => {
       logger.info('WebSocket connected', payload.id);
       break;
     case 'ping':
+      logger.info('WebSocket ping received', payload.id);
+      chrome.runtime.sendMessage({
+        type: 'ping',
+        data: { id: payload.id, timestamp: Date.now() },
+      });
+
       ws.send(
         JSON.stringify(
           clientToServer.parse({