Moving backend injection to the content script (#16900)
David Huang committed
Sep 26, 2019 at 06:03 UTC
49b0cb6db8e4a32b6523d5e538578d9d9c6db592
3 files changed
+17
-31
packages/react-devtools-extensions/src/inject.js
deleted
-24
@@ -1,24 +0,0 @@
1
-/* global chrome */
2
-
3
-export default function inject(scriptName: string, done: ?Function) {
4
- const source = `
5
- // the prototype stuff is in case document.createElement has been modified
6
- (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);
12
- })()
13
- `;
14
-
15
- chrome.devtools.inspectedWindow.eval(source, function(response, error) {
16
- if (error) {
17
- console.log(error);
18
- }
19
-
20
- if (typeof done === 'function') {
21
- done();
22
- }
23
- });
24
-}
packages/react-devtools-extensions/src/injectGlobalHook.js
+9
-5
@@ -24,16 +24,20 @@ let lastDetectionResult;
24
// So instead, the hook will use postMessage() to pass message to us here.
25
// And when this happens, we'll send a message to the "background page".
26
window.addEventListener('message', function(evt) {
27
- if (
28
- evt.source === window &&
29
- evt.data &&
30
- evt.data.source === 'react-devtools-detector'
31
- ) {
27
+ if (evt.source !== window || !evt.data) {
28
+ return;
29
+ }
30
+ if (evt.data.source === 'react-devtools-detector') {
31
lastDetectionResult = {
32
hasDetectedReact: true,
33
reactBuildType: evt.data.reactBuildType,
34
};
35
chrome.runtime.sendMessage(lastDetectionResult);
36
+ } else if (evt.data.source === 'react-devtools-inject-backend') {
37
+ const script = document.createElement('script');
38
+ script.src = chrome.runtime.getURL('build/backend.js');
39
+ document.documentElement.appendChild(script);
40
+ script.parentNode.removeChild(script);
41
}
42
});
43
packages/react-devtools-extensions/src/main.js
+8
-2
@@ -4,7 +4,6 @@ import {createElement} from 'react';
4
import {unstable_createRoot as createRoot, flushSync} from 'react-dom';
5
import Bridge from 'react-devtools-shared/src/bridge';
6
import Store from 'react-devtools-shared/src/devtools/store';
7
-import inject from './inject';
7
import {
8
createViewElementSource,
9
getBrowserName,
@@ -135,7 +134,14 @@ function createPanelIfReactLoaded() {
134
135
// Initialize the backend only once the Store has been initialized.
136
// Otherwise the Store may miss important initial tree op codes.
138
- inject(chrome.runtime.getURL('build/backend.js'));
137
+ chrome.devtools.inspectedWindow.eval(
138
+ `window.postMessage({ source: 'react-devtools-inject-backend' }, window.origin);`,
139
+ function(response, evalError) {
140
+ if (evalError) {
141
+ console.error(evalError);
142
+ }
143
+ },
144
+ );
145
146
const viewElementSourceFunction = createViewElementSource(
147
bridge,