Revert change to backend injection method from PR #16752 (#16864)
PR #16752 changed how we were injecting the backend script to be done by the content script in order to work around Trusted Type limitations with our previous approach. This may have caused a regression (see #16840) so I'm backing it out to verify.
Brian Vaughn committed
Sep 23, 2019 at 12:56 UTC
bce2ac63a93fd77e352286a0074ffe471301ab8a
3 files changed
+37
-28
packages/react-devtools-extensions/src/inject.js
new
+24
@@ -0,0 +1,24 @@
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
+10
-20
@@ -24,26 +24,16 @@ 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 (evt.source === window && evt.data) {
28
- if (evt.data.source === 'react-devtools-detector') {
29
- lastDetectionResult = {
30
- hasDetectedReact: true,
31
- reactBuildType: evt.data.reactBuildType,
32
- };
33
- chrome.runtime.sendMessage(lastDetectionResult);
34
- } else if (evt.data.source === 'react-devtools-inject-backend') {
35
- // The backend is injected by the content script to avoid CSP and Trusted Types violations,
36
- // since content scripts can modify the DOM and are not subject to the page's policies.
37
- // The prototype stuff is in case document.createElement has been modified.
38
- const script = document.constructor.prototype.createElement.call(
39
- document,
40
- 'script',
41
- );
42
- script.src = chrome.runtime.getURL('build/backend.js');
43
- script.charset = 'utf-8';
44
- document.documentElement.appendChild(script);
45
- script.parentNode.removeChild(script);
46
- }
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);
37
}
38
});
39
packages/react-devtools-extensions/src/main.js
+3
-8
@@ -4,6 +4,7 @@ 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';
8
import {
9
createViewElementSource,
10
getBrowserName,
@@ -134,14 +135,7 @@ function createPanelIfReactLoaded() {
135
136
// Initialize the backend only once the Store has been initialized.
137
// Otherwise the Store may miss important initial tree op codes.
137
- chrome.devtools.inspectedWindow.eval(
138
- `window.postMessage({ source: 'react-devtools-inject-backend' });`,
139
- function(response, evalError) {
140
- if (evalError) {
141
- console.log(evalError);
142
- }
143
- },
144
- );
138
+ inject(chrome.runtime.getURL('build/backend.js'));
139
140
const viewElementSourceFunction = createViewElementSource(
141
bridge,
@@ -161,6 +155,7 @@ function createPanelIfReactLoaded() {
155
overrideTab,
156
profilerPortalContainer,
157
showTabBar: false,
158
+ showWelcomeToTheNewDevToolsDialog: true,
159
store,
160
viewElementSourceFunction,
161
}),