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.

Author: Brian Vaughn

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

@@ -0,0 +1,24 @@
+/* global chrome */
+
+exportdefaultfunctioninject(scriptName: string,done: ?Function){
+constsource=`
+ // 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);
+ })()
+ `;
+
+chrome.devtools.inspectedWindow.eval(source,function(response,error){
+if(error){
+console.log(error);
+}
+
+if(typeofdone==='function'){
+done();
+}
+});
+}

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

@@ -24,26 +24,16 @@ 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){
-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);
-}
+if(
+evt.source===window&&
+evt.data&&
+evt.data.source==='react-devtools-detector'
+){
+lastDetectionResult={
+hasDetectedReact: true,
+reactBuildType: evt.data.reactBuildType,
+};
+chrome.runtime.sendMessage(lastDetectionResult);
 }
 });
 

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

@@ -4,6 +4,7 @@ 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,
@@ -134,14 +135,7 @@ function createPanelIfReactLoaded() {
 
 // Initialize the backend only once the Store has been initialized.
 // Otherwise the Store may miss important initial tree op codes.
-chrome.devtools.inspectedWindow.eval(
-`window.postMessage({ source: 'react-devtools-inject-backend' });`,
-function(response,evalError){
-if(evalError){
-console.log(evalError);
-}
-},
-);
+inject(chrome.runtime.getURL('build/backend.js'));
 
 constviewElementSourceFunction=createViewElementSource(
 bridge,
@@ -161,6 +155,7 @@ function createPanelIfReactLoaded() {
  overrideTab,
  profilerPortalContainer,
 showTabBar: false,
+showWelcomeToTheNewDevToolsDialog: true,
  store,
  viewElementSourceFunction,
 }),