Use browser.devtools.network.onNavigated to detect page navigation (#1391)

Author: jerelmiller

.changeset/wise-spoons-dream.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Use browser.devtools.network to detect page navigation

src/extension/devtools/devtools.ts

@@ -56,6 +56,11 @@ function connectToClient() {
   startConnectTimeout();
 }
 
+function disconnectFromDevtools() {
+  devtoolsMachine.send("disconnect");
+  startConnectTimeout();
+}
+
 function startConnectTimeout() {
   clearTimeout(connectTimeoutId);
 
@@ -75,10 +80,7 @@ clientPort.on("registerClient", (message) => {
   devtoolsMachine.send({ type: "connect", clientContext: message.payload });
 });
 
-clientPort.on("disconnectFromDevtools", () => {
-  devtoolsMachine.send("disconnect");
-  startConnectTimeout();
-});
+clientPort.on("clientTerminated", disconnectFromDevtools);
 
 connectToClient();
 
@@ -161,3 +163,5 @@ async function createDevtoolsPanel() {
 }
 
 createDevtoolsPanel();
+
+browser.devtools.network.onNavigated.addListener(disconnectFromDevtools);

src/extension/messages.ts

@@ -88,7 +88,7 @@ export type ClientMessage =
       type: "connectToDevtools";
       payload: ClientContext;
     }
-  | { type: "disconnectFromDevtools" }
+  | { type: "clientTerminated" }
   | ExplorerRequestMessage
   | ExplorerResponseMessage
   | ExplorerSubscriptionTerminationMessage;

src/extension/tab/hook.ts

@@ -86,11 +86,6 @@ Object.defineProperty(window, "__APOLLO_DEVTOOLS_GLOBAL_HOOK__", {
   configurable: true,
 });
 
-// Listen for tab refreshes
-window.onbeforeunload = () => {
-  tab.send({ type: "disconnectFromDevtools" });
-};
-
 function getClientData() {
   // We need to JSON stringify the data here in case the cache contains
   // references to irregular data such as `URL` instances which are not
@@ -228,7 +223,7 @@ function watchForClientTermination(client: ApolloClient<any>) {
       hook.ApolloClient = undefined;
     }
 
-    tab.send({ type: "disconnectFromDevtools" });
+    tab.send({ type: "clientTerminated" });
     originalStop.call(client);
   };
 }

src/extension/tab/tab.ts

@@ -25,7 +25,7 @@ devtools.forward("explorerRequest", tab);
 
 tab.forward("registerClient", devtools);
 tab.forward("connectToDevtools", devtools);
-tab.forward("disconnectFromDevtools", devtools);
+tab.forward("clientTerminated", devtools);
 tab.forward("explorerResponse", devtools);
 
 // We run the hook.js script on the page as a content script in Manifest v3