Fix Cannot read property 'sub' of undefined when navigating to plain-text pages (#17848)

Update various parts of DevTools to account for the fact that the global "hook" might be undefined if DevTools didn't inject it (due to the page's `contentType`) it (due to the page's `contentType`)

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

@@ -32,7 +32,7 @@ type ConnectOptions = {
 
 installHook(window);
 
-const hook: DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+const hook: ?DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
 
 let savedComponentFilters: Array<ComponentFilter> = getDefaultComponentFilters();
 
@@ -48,6 +48,10 @@ function debug(methodName: string, ...args) {
 }
 
 export function connectToDevTools(options: ?ConnectOptions) {
+  if (hook == null) {
+    // DevTools didn't get injected into this page (maybe b'c of the contentType).
+    return;
+  }
   const {
     host = 'localhost',
     nativeStyleEditorValidAttributes,

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

@@ -22,6 +22,10 @@ function welcome(event) {
 window.addEventListener('message', welcome);
 
 function setup(hook) {
+  if (hook == null) {
+    // DevTools didn't get injected into this page (maybe b'c of the contentType).
+    return;
+  }
   const Agent = require('react-devtools-shared/src/backend/agent').default;
   const Bridge = require('react-devtools-shared/src/bridge').default;
   const {initBackend} = require('react-devtools-shared/src/backend');

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

@@ -88,7 +88,7 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
 
 // Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
 // Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
-if (document.contentType === 'text/html') {
+if ('text/html' === document.contentType) {
   injectCode(
     ';(' +
       installHook.toString() +

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

@@ -271,7 +271,7 @@ function createPanelIfReactLoaded() {
         // When the user chooses a different node in the browser Elements tab,
         // copy it over to the hook object so that we can sync the selection.
         chrome.devtools.inspectedWindow.eval(
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
             '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
             'false',
           (didSelectionChange, evalError) => {

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

@@ -73,17 +73,18 @@ function finishActivation(contentWindow: window) {
   const agent = new Agent(bridge);
 
   const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook) {
+    initBackend(hook, agent, contentWindow);
 
-  initBackend(hook, agent, contentWindow);
-
-  // Setup React Native style editor if a renderer like react-native-web has injected it.
-  if (hook.resolveRNStyle) {
-    setupNativeStyleEditor(
-      bridge,
-      agent,
-      hook.resolveRNStyle,
-      hook.nativeStyleEditorValidAttributes,
-    );
+    // Setup React Native style editor if a renderer like react-native-web has injected it.
+    if (hook.resolveRNStyle) {
+      setupNativeStyleEditor(
+        bridge,
+        agent,
+        hook.resolveRNStyle,
+        hook.nativeStyleEditorValidAttributes,
+      );
+    }
   }
 }
 

packages/react-devtools-shared/src/backend/index.js

@@ -19,6 +19,10 @@ export function initBackend(
   agent: Agent,
   global: Object,
 ): () => void {
+  if (hook == null) {
+    // DevTools didn't get injected into this page (maybe b'c of the contentType).
+    return () => {};
+  }
   const subs = [
     hook.sub(
       'renderer-attached',