Skip to content

Commit

Permalink
early attach in devtools extension so we can patch the console
Browse files Browse the repository at this point in the history
  • Loading branch information
lunaruan committed Aug 6, 2021
1 parent f920725 commit c1f236d
Showing 1 changed file with 16 additions and 19 deletions.
35 changes: 16 additions & 19 deletions packages/react-devtools-extensions/src/injectGlobalHook.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@

import nullthrows from 'nullthrows';
import {installHook} from 'react-devtools-shared/src/hook';
import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';

function injectCode(code) {
const script = document.createElement('script');
Expand Down Expand Up @@ -67,24 +65,23 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeWeakMap = WeakMap;
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
`;

// If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
const rendererURL = chrome.runtime.getURL('build/renderer.js');
let rendererCode;
// We need to inject the renderer interface before the app loads so we can patch the
// console before initial render.
const rendererURL = chrome.runtime.getURL('build/renderer.js');
let rendererCode;

// We need to inject in time to catch the initial mount.
// This means we need to synchronously read the renderer code itself,
// and synchronously inject it into the page.
// There are very few ways to actually do this.
// This seems to be the best approach.
const request = new XMLHttpRequest();
request.addEventListener('load', function() {
rendererCode = this.responseText;
});
request.open('GET', rendererURL, false);
request.send();
injectCode(rendererCode);
}
// We need to inject in time to catch the initial mount.
// This means we need to synchronously read the renderer code itself,
// and synchronously inject it into the page.
// There are very few ways to actually do this.
// This seems to be the best approach.
const request = new XMLHttpRequest();
request.addEventListener('load', function() {
rendererCode = this.responseText;
});
request.open('GET', rendererURL, false);
request.send();
injectCode(rendererCode);

// Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
// Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
Expand Down

0 comments on commit c1f236d

Please sign in to comment.