diff --git a/packages/react-devtools-extensions/src/contentScripts/backendManager.js b/packages/react-devtools-extensions/src/contentScripts/backendManager.js index 402a1378576..8969bf7bedf 100644 --- a/packages/react-devtools-extensions/src/contentScripts/backendManager.js +++ b/packages/react-devtools-extensions/src/contentScripts/backendManager.js @@ -207,4 +207,12 @@ if (!window.__REACT_DEVTOOLS_BACKEND_MANAGER_INJECTED__) { window.__REACT_DEVTOOLS_BACKEND_MANAGER_INJECTED__ = true; window.addEventListener('message', welcome); + + // Signal to the content script that the backend manager has been injected. + // This allows the content script to connect immediately without polling. + window.document.documentElement.setAttribute( + 'data-react-devtools-ready', + 'true', + ); + window.dispatchEvent(new CustomEvent('react-devtools-ready')); } diff --git a/packages/react-devtools-extensions/src/contentScripts/proxy.js b/packages/react-devtools-extensions/src/contentScripts/proxy.js index a4e7dd68241..e7d79a5f959 100644 --- a/packages/react-devtools-extensions/src/contentScripts/proxy.js +++ b/packages/react-devtools-extensions/src/contentScripts/proxy.js @@ -17,18 +17,23 @@ function injectProxy({target}: {target: any}) { window.__REACT_DEVTOOLS_PROXY_INJECTED__ = true; connectPort(); - sayHelloToBackendManager(); // The backend waits to install the global hook until notified by the content script. // In the event of a page reload, the content script might be loaded before the backend manager is injected. - // Because of this we need to poll the backend manager until it has been initialized. - const intervalID: IntervalID = setInterval(() => { - if (backendInitialized) { - clearInterval(intervalID); - } else { - sayHelloToBackendManager(); - } - }, 500); + // Because of this we need to synchronize with the backend manager. + // We use a data attribute and a custom event to detect when the backend manager is ready, + // avoiding the need for CPU-intensive polling (see issue #35515). + + const onBackendReady = () => { + window.removeEventListener('react-devtools-ready', onBackendReady); + sayHelloToBackendManager(); + }; + + if (document.documentElement.getAttribute('data-react-devtools-ready')) { + onBackendReady(); + } else { + window.addEventListener('react-devtools-ready', onBackendReady); + } } }