Dev Tools: Relax constraint on passing extensionId for backend init (facebook#22597)

Author: Juan

packages/react-devtools-extensions/src/backend.js

@@ -2,7 +2,7 @@
 // Running module factories is intentionally delayed until we know the hook exists.
 // This is to avoid issues like: https://github.com/facebook/react-devtools/issues/1039
 
-/** @flow */
+// @flow strict-local
 
 'use strict';
 
@@ -13,15 +13,16 @@ function welcome(event) {
   ) {
     return;
   }
+  const extensionId = event.data.extensionId;
 
   window.removeEventListener('message', welcome);
 
-  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, extensionId);
 }
 
 window.addEventListener('message', welcome);
 
-function setup(hook) {
+function setup(hook, extensionId) {
   if (hook == null) {
     // DevTools didn't get injected into this page (maybe b'c of the contentType).
     return;
@@ -55,6 +56,7 @@ function setup(hook) {
         {
           source: 'react-devtools-bridge',
           payload: {event, payload},
+          extensionId,
         },
         '*',
         transferable,

packages/react-devtools-extensions/src/contentScript.js

@@ -2,6 +2,8 @@
 
 'use strict';
 
+import {CURRENT_EXTENSION_ID} from './constants';
+
 let backendDisconnected: boolean = false;
 let backendInitialized: boolean = false;
 
@@ -10,6 +12,7 @@ function sayHelloToBackend() {
     {
       source: 'react-devtools-content-script',
       hello: true,
+      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -20,6 +23,7 @@ function handleMessageFromDevtools(message) {
     {
       source: 'react-devtools-content-script',
       payload: message,
+      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -49,6 +53,7 @@ function handleDisconnect() {
         type: 'event',
         event: 'shutdown',
       },
+      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );

packages/react-devtools-extensions/src/injectGlobalHook.js

@@ -31,12 +31,14 @@ window.addEventListener('message', function onMessage({data, source}) {
   if (source !== window || !data) {
     return;
   }
-  if (data.extensionId !== CURRENT_EXTENSION_ID) {
+  if (data.extensionId != null && data.extensionId !== CURRENT_EXTENSION_ID) {
     if (__DEBUG__) {
       console.log(
         `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`,
         {
           currentExtension: EXTENSION_INSTALLATION_TYPE,
+          currentExtensionId: CURRENT_EXTENSION_ID,
+          providedExtensionId: data.extensionId,
         },
       );
     }