Repository: facebook/react
Pull request: Dev Tools: Relax constraint on passing extensionId for backend init

## Summary

Fixes #22577

After the changes in #22517, we made it so the `postMessage` listener in `injectGlobalHook` only listened to events that came from the same extension matching the current `extensionId`. However, if the `extensionId` was missing for some reason, we would end up skipping processing that event, which is breaking behavior compared to how it was before, since `postMessage` messages without an `extensionId` would no longer be processed (thanks to @bvaughn for pointing this out).

Changing this seems to fix the issue in #22577 as reported by users in that issue. However, I have not been able to verify locally since I have not been able to repro, and it is still unclear to me why the `extensionId` would be coming as null, since we are passing it for all the events processed by `injectGlobalHook`.


## How did you test this change?

- yarn flow dom
- yarn test
- yarn test-build-devtools
- provided a custom build with this fix for people experiencing the issue: [ReactDevTools-backend-fix.zip](https://github.com/facebook/react/files/7376561/ReactDevTools-backend-fix.zip). verified that it was fixed for them.



Changed files:
filename: packages/react-devtools-extensions/src/backend.js
patch: @@ -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,

filename: packages/react-devtools-extensions/src/contentScript.js
patch: @@ -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,
     },
     '*',
   );

filename: packages/react-devtools-extensions/src/injectGlobalHook.js
patch: @@ -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,
         },
       );
     }