Merge branch 'tt-compat' of https://github.com/onionymous/react into onionymous-tt-compat

Author: Brian Vaughn

packages/react-devtools-extensions/src/injectGlobalHook.js

@@ -24,16 +24,26 @@ 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);
+}elseif(evt.data.source==='react-devtools-inject-backend'){
+// The backend is injected by the content script to avoid CSP and Trusted Types violations,
+// since content scripts can modify the DOM and are not subject to the page's policies.
+// The prototype stuff is in case document.createElement has been modified.
+constscript=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);
+}
 }
 });
 

packages/react-devtools-extensions/src/main.js

@@ -4,7 +4,6 @@ import {createElement} from 'react';
 import{unstable_createRootascreateRoot,flushSync}from'react-dom';
 importBridgefrom'react-devtools-shared/src/bridge';
 importStorefrom'react-devtools-shared/src/devtools/store';
-importinjectfrom'./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' });`,
+function(response,evalError){
+if(evalError){
+console.log(evalError);
+}
+},
+);
 
 constviewElementSourceFunction=createViewElementSource(
 bridge,