dillon1000/react
Commit
Browse files refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded (#27323)
`chrome.devtools.inspectedWindow.eval` is asynchronous, so using it in `setInterval` is a mistake. Sometimes this results into mounting React DevTools twice, and user sees errors about duplicated fibers in store. With these changes, `executeIfReactHasLoaded` executed recursively with a threshold (in case if page doesn't have react). Although we minimize the risk of mounting DevTools twice here, this approach is not the best way to have this problem solved. Dumping some thoughts and ideas that I've tried, but which are out of the scope for this release, because they can be too risky and time-consuming. Potential changes: - Have 2 content scripts: - One `prepareInjection` to notify service worker on renderer attached - One which runs on `document_idle` to finalize check, in case if there is no react - Service worker will notify devtools page that it is ready to mount React DevTools panels or should show that there is no React to be found - Extension port from devtools page should be persistent and connected when `main.js` is executed - Might require refactoring the logic of how we connect devtools and proxy ports Some corner cases: - Navigating to restricted pages, like `chrome://<something>` and back - When react is lazily loaded, like in an attached iframe, or just opened modal - In-tab navigation with pre-cached pages, I think only Chrome does it - Firefox is still on manifest v2 and it doesn't allow running content scripts in ExecutionWorld.MAIN, so it requires a different approach
Changed paths1 file
First-parent comparisonpackages/react-devtools-extensions/src/main/index.js ModifiedPatch
Files changed
Rendering syntax-highlighted changes…