Moved backend injection logic to content script
Stephanie Ding committed
Sep 10, 2019 at 17:22 UTC
c93038fabe08f7dc26b1a301ed4518a3bc64102f
2 files changed
+28
-22
packages/react-devtools-extensions/src/inject.js
+3
-8
@@ -1,14 +1,9 @@
1
/* global chrome */
2
3
-export default function inject(scriptName: string, done: ?Function) {
3
+export default function inject(scriptName: string, done: ? Function) {
4
const source = `
5
- // the prototype stuff is in case document.createElement has been modified
5
(function () {
7
- var script = document.constructor.prototype.createElement.call(document, 'script');
8
- script.src = "${scriptName}";
9
- script.charset = "utf-8";
10
- document.documentElement.appendChild(script);
11
- script.parentNode.removeChild(script);
6
+ window.postMessage({ source: 'react-devtools-inject-backend', type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
7
})()
8
`;
9
@@ -21,4 +16,4 @@ export default function inject(scriptName: string, done: ?Function) {
16
done();
17
}
18
});
24
-}
19
+}
\ No newline at end of file
packages/react-devtools-extensions/src/injectGlobalHook.js
+25
-14
@@ -1,9 +1,15 @@
1
/* global chrome */
2
3
import nullthrows from 'nullthrows';
4
-import {installHook} from 'react-devtools-shared/src/hook';
5
-import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
6
-import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
4
+import {
5
+ installHook
6
+} from 'react-devtools-shared/src/hook';
7
+import {
8
+ SESSION_STORAGE_RELOAD_AND_PROFILE_KEY
9
+} from 'react-devtools-shared/src/constants';
10
+import {
11
+ sessionStorageGetItem
12
+} from 'react-devtools-shared/src/storage';
13
14
function injectCode(code) {
15
const script = document.createElement('script');
@@ -24,16 +30,21 @@ let lastDetectionResult;
30
// So instead, the hook will use postMessage() to pass message to us here.
31
// And when this happens, we'll send a message to the "background page".
32
window.addEventListener('message', function(evt) {
27
- if (
28
- evt.source === window &&
29
- evt.data &&
30
- evt.data.source === 'react-devtools-detector'
31
- ) {
32
- lastDetectionResult = {
33
- hasDetectedReact: true,
34
- reactBuildType: evt.data.reactBuildType,
35
- };
36
- chrome.runtime.sendMessage(lastDetectionResult);
33
+ if (evt.source === window && evt.data) {
34
+ if (evt.data.source === 'react-devtools-detector') {
35
+ lastDetectionResult = {
36
+ hasDetectedReact: true,
37
+ reactBuildType: evt.data.reactBuildType,
38
+ };
39
+ chrome.runtime.sendMessage(lastDetectionResult);
40
+ } else if (evt.data.source === 'react-devtools-inject-backend') {
41
+ //Inject backend
42
+ var script = document.constructor.prototype.createElement.call(document, 'script');
43
+ script.src = chrome.runtime.getURL('build/backend.js');
44
+ script.charset = "utf-8";
45
+ document.documentElement.appendChild(script);
46
+ script.parentNode.removeChild(script);
47
+ }
48
}
49
});
50
@@ -86,4 +97,4 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
97
// devtools are installed (and skip its suggestion to install the devtools).
98
injectCode(
99
';(' + installHook.toString() + '(window))' + saveNativeValues + detectReact,
89
-);
100
+);
\ No newline at end of file