diff --git a/packages/react-devtools-extensions/src/inject.js b/packages/react-devtools-extensions/src/inject.js index 938e2cf7eb227..02750dbb06a86 100644 --- a/packages/react-devtools-extensions/src/inject.js +++ b/packages/react-devtools-extensions/src/inject.js @@ -1,14 +1,9 @@ /* global chrome */ -export default function inject(scriptName: string, done: ?Function) { +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); + window.postMessage({ source: 'react-devtools-inject-backend', type: "FROM_PAGE", text: "Hello from the webpage!" }, "*"); })() `; @@ -21,4 +16,4 @@ export default function inject(scriptName: string, done: ?Function) { done(); } }); -} +} \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js index b56f9a299b378..a06b9bbf62943 100644 --- a/packages/react-devtools-extensions/src/injectGlobalHook.js +++ b/packages/react-devtools-extensions/src/injectGlobalHook.js @@ -1,9 +1,15 @@ /* global chrome */ import nullthrows from 'nullthrows'; -import {installHook} from 'react-devtools-shared/src/hook'; -import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants'; -import {sessionStorageGetItem} from 'react-devtools-shared/src/storage'; +import { + installHook +} from 'react-devtools-shared/src/hook'; +import { + SESSION_STORAGE_RELOAD_AND_PROFILE_KEY +} from 'react-devtools-shared/src/constants'; +import { + sessionStorageGetItem +} from 'react-devtools-shared/src/storage'; function injectCode(code) { const script = document.createElement('script'); @@ -24,16 +30,21 @@ 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' - ) { - lastDetectionResult = { - hasDetectedReact: true, - reactBuildType: evt.data.reactBuildType, - }; - chrome.runtime.sendMessage(lastDetectionResult); + if (evt.source === window && evt.data) { + 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') { + //Inject backend + var script = document.constructor.prototype.createElement.call(document, 'script'); + script.src = chrome.runtime.getURL('build/backend.js'); + script.charset = "utf-8"; + document.documentElement.appendChild(script); + script.parentNode.removeChild(script); + } } }); @@ -86,4 +97,4 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') { // devtools are installed (and skip its suggestion to install the devtools). injectCode( ';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact, -); +); \ No newline at end of file