Apollo Devtools extension download message check if does not exist

src/core/ApolloClient.ts

@@ -67,7 +67,7 @@ export type ApolloClientOptions<TCacheShape> = {
 // previously declared and exported from this module, and then reexported from
 // @apollo/client/core. Since we need to preserve that API anyway, the easiest
 // solution is to reexport mergeOptions where it was previously declared (here).
-import { mergeOptions } from "../utilities/index.js";
+import { mergeOptions, detectExtension } from "../utilities/index.js";
 export { mergeOptions };
 
 /**
@@ -85,6 +85,7 @@ export class ApolloClient<TCacheShape> implements DataProxy {
   public defaultOptions: DefaultOptions;
   public readonly typeDefs: ApolloClientOptions<TCacheShape>["typeDefs"];
 
+  private EXTENSION_ID = 'jdkknkkbebbapilgoeccciglkfbmbnfm';
   private queryManager: QueryManager<TCacheShape>;
   private devToolsHookCb: Function;
   private resetStoreCallbacks: Array<() => Promise<any>> = [];
@@ -253,34 +254,49 @@ export class ApolloClient<TCacheShape> implements DataProxy {
         if (
           typeof window !== "undefined" &&
           window.document &&
-          window.top === window.self &&
-          !(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__
+          window.top === window.self
         ) {
           const nav = window.navigator;
           const ua = nav && nav.userAgent;
+          const userAgentExists = typeof ua === 'string';
+          const isChromeAgent = userAgentExists && ua.indexOf("Chrome/") > -1;
+          const isFirefoxAgent = userAgentExists && ua.indexOf("Chrome/") > -1;
           let url: string | undefined;
-          if (typeof ua === "string") {
-            if (ua.indexOf("Chrome/") > -1) {
-              url =
-                "https://chrome.google.com/webstore/detail/" +
-                "apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm";
-            } else if (ua.indexOf("Firefox/") > -1) {
-              url =
-                "https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/";
-            }
+
+          if (isChromeAgent) {
+            url =
+              "https://chrome.google.com/webstore/detail/" +
+              `apollo-client-developer-t/${this.EXTENSION_ID}`;
+          } else if (isFirefoxAgent) {
+            url =
+              "https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/";
+          }
+
+          if (isFirefoxAgent && url) {
+            this.logExtensionDownloadMessage(url);
+            return;
           }
-          if (url) {
-            invariant.log(
-              "Download the Apollo DevTools for a better development " +
-                "experience: %s",
-              url
-            );
+
+          if (isChromeAgent) {
+            detectExtension(this.EXTENSION_ID, (isInstalled) => {
+              if (!isInstalled && url) {
+                this.logExtensionDownloadMessage(url);
+              }
+            });
           }
         }
       }, 10000);
     }
   }
 
+  private logExtensionDownloadMessage(url: string) {
+    invariant.log(
+      "Download the Apollo DevTools for a better development " +
+      "experience: %s",
+      url
+    );
+  }
+
   /**
    * The `DocumentTransform` used to modify GraphQL documents before a request
    * is made. If a custom `DocumentTransform` is not provided, this will be the

src/utilities/common/detectExtension.ts

@@ -0,0 +1,12 @@
+export function detectExtension(extensionId: string, callback: (status: boolean) => void) {
+  const img = new Image();
+  img.src = `chrome-extension://${extensionId}/images/logo64.png`;
+
+  img.onload = function () {
+    callback(true);
+  };
+
+  img.onerror = function () {
+    callback(false);
+  };
+}

src/utilities/index.ts

@@ -120,6 +120,7 @@ export * from "./common/makeUniqueId.js";
 export * from "./common/stringifyForDisplay.js";
 export * from "./common/mergeOptions.js";
 export * from "./common/incrementalResult.js";
+export * from "./common/detectExtension.js";
 
 export { omitDeep } from "./common/omitDeep.js";
 export { stripTypename } from "./common/stripTypename.js";