From 49b0cb6db8e4a32b6523d5e538578d9d9c6db592 Mon Sep 17 00:00:00 2001
From: David Huang <linshunghuang@gmail.com>
Date: Thu, 26 Sep 2019 06:03:07 -0700
Subject: [PATCH] Moving backend injection to the content script (#16900)

---
 .../react-devtools-extensions/src/inject.js   | 24 -------------------
 .../src/injectGlobalHook.js                   | 14 +++++++----
 .../react-devtools-extensions/src/main.js     | 10 ++++++--
 3 files changed, 17 insertions(+), 31 deletions(-)
 delete mode 100644 packages/react-devtools-extensions/src/inject.js

diff --git a/packages/react-devtools-extensions/src/inject.js b/packages/react-devtools-extensions/src/inject.js
deleted file mode 100644
index 938e2cf7eb227..0000000000000
--- a/packages/react-devtools-extensions/src/inject.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* global chrome */
-
-export default function inject(scriptName: string, done: ?Function) {
-  const source = `
-  // the prototype stuff is in case document.createElement has been modified
-  (function () {
-    var script = document.constructor.prototype.createElement.call(document, 'script');
-    script.src = "${scriptName}";
-    script.charset = "utf-8";
-    document.documentElement.appendChild(script);
-    script.parentNode.removeChild(script);
-  })()
-  `;
-
-  chrome.devtools.inspectedWindow.eval(source, function(response, error) {
-    if (error) {
-      console.log(error);
-    }
-
-    if (typeof done === 'function') {
-      done();
-    }
-  });
-}
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index b56f9a299b378..ea41a6c9688f7 100644
--- 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
index 7d786e0321917..b2cb6758e669c 100644
--- 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,