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,