Moving backend injection to the content script (#16900)

facebook · Sep 26, 2019 · 49b0cb6 · 49b0cb6
1 parent 3694a3b
commit 49b0cb6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 31 deletions.
diff --git a/packages/react-devtools-extensions/src/inject.js b/packages/react-devtools-extensions/src/inject.js
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -24,16 +24,20 @@ let lastDetectionResult;
 // So instead, the hook will use postMessage() to pass message to us here.
 // And when this happens, we'll send a message to the "background page".
 window.addEventListener('message', function(evt) {
-  if (
-    evt.source === window &&
-    evt.data &&
-    evt.data.source === 'react-devtools-detector'
-  ) {
+  if (evt.source !== window || !evt.data) {
+    return;
+  }
+  if (evt.data.source === 'react-devtools-detector') {
     lastDetectionResult = {
       hasDetectedReact: true,
       reactBuildType: evt.data.reactBuildType,
     };
     chrome.runtime.sendMessage(lastDetectionResult);
+  } else if (evt.data.source === 'react-devtools-inject-backend') {
+    const script = document.createElement('script');
+    script.src = chrome.runtime.getURL('build/backend.js');
+    document.documentElement.appendChild(script);
+    script.parentNode.removeChild(script);
   }
 });
 

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
@@ -4,7 +4,6 @@ import {createElement} from 'react';
 import {unstable_createRoot as createRoot, flushSync} from 'react-dom';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
-import inject from './inject';
 import {
   createViewElementSource,
   getBrowserName,
@@ -135,7 +134,14 @@ function createPanelIfReactLoaded() {
 
         // Initialize the backend only once the Store has been initialized.
         // Otherwise the Store may miss important initial tree op codes.
-        inject(chrome.runtime.getURL('build/backend.js'));
+        chrome.devtools.inspectedWindow.eval(
+          `window.postMessage({ source: 'react-devtools-inject-backend' }, window.origin);`,
+          function(response, evalError) {
+            if (evalError) {
+              console.error(evalError);
+            }
+          },
+        );
 
         const viewElementSourceFunction = createViewElementSource(
           bridge,