Fix DevTools from losing connection (#1767)

* Fix DevTools from losing connection

* Create kind-seals-arrive.md

Author: Methuselah96

.changeset/kind-seals-arrive.md

@@ -0,0 +1,5 @@
+---
+'remotedev-redux-devtools-extension': patch
+---
+
+Fix DevTools from losing connection

extension/src/background/index.ts

@@ -29,3 +29,9 @@ chrome.storage.onChanged.addListener((changes) => {
     else removeMenu();
   }
 });
+
+// https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#keep_a_service_worker_alive_continuously
+setInterval(
+  () => chrome.storage.local.set({ 'last-heartbeat': new Date().getTime() }),
+  20000,
+);

extension/src/background/store/apiMiddleware.ts

@@ -553,8 +553,7 @@ function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
     console.log(`Connected to tab ${id}`);
     if (port.sender!.frameId) id = `${id}-${port.sender!.frameId}`;
     connections.tab[id] = port;
-    listener = (msg: ContentScriptToBackgroundMessage<S, A> | 'heartbeat') => {
-      if (msg === 'heartbeat') return;
+    listener = (msg: ContentScriptToBackgroundMessage<S, A>) => {
       console.log(`Message from tab ${id}: ${msg.name}`);
       if (msg.name === 'INIT_INSTANCE') {
         if (typeof id === 'number') {
@@ -593,8 +592,7 @@ function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
     connections.panel[id] = port;
     monitors++;
     toAllTabs({ type: 'START' });
-    listener = (msg: BackgroundAction | 'heartbeat') => {
-      if (msg === 'heartbeat') return;
+    listener = (msg: BackgroundAction) => {
       console.log(`Message from monitor ${id}: ${msg.type}`);
       store.dispatch(msg);
     };

extension/src/contentScript/index.ts

@@ -343,7 +343,3 @@ function handleMessages<S, A extends Action<string>>(
 prefetchOptions();
 
 window.addEventListener('message', handleMessages, false);
-
-setInterval(() => {
-  bg?.postMessage('heartbeat');
-}, 15000);

extension/src/devpanel/index.tsx

@@ -116,10 +116,6 @@ function init() {
   }
   bgConnection = chrome.runtime.connect({ name });
 
-  setInterval(() => {
-    bgConnection.postMessage('heartbeat');
-  }, 15000);
-
   bgConnection.onMessage.addListener(
     <S, A extends Action<string>>(
       message: PanelMessageWithSplitAction<S, A>,