facebook
[DevTools] upgrade to Manifest V3
Summary
resolves #24522
To upgrade to Manifest V3, one of the biggest issue is that we are no longer allowed to add a script element with code in textContent so that it would run synchronously. It's necessary for us because we need to inject a global hook for react reconciler to detect whether devtools exist.
To do that, we'll leverage a new API chrome.scripting.registerContentScripts in V3. Particularly, we rely on the "world" option (added in Chrome v102 commit) to run it in the "main world" on the page.
This PR also renames a few content script files so that it's easier to tell them apart from other extension scripts and understand the purpose of each of them.
Manifest V3 is not yet ready for Firefox, so we need to keep some code for compatibility.
How did you test this change?
yarn build:chrome && yarn test:chrome
yarn build:edge && yarn test:edge
yarn build:firefox && yarn test:firefox
@mondaychen Too bad your code looks exactly like mine, but I forgot to delete the XHR request which isn't supported. I feel like I missed this one badly, worked on it for over a month to understand extension :(.
URGHHHH
@mondaychen I have only a slight difference, with the injected install hook.
I made a new file as you did, but I copied the whole script (including the installhook(window)) and pasted it into the file.
You imported it from import {installHook} from 'react-devtools-shared/src/hook';. Which way is better?
I did it this way because I wanted to keep it independent of other repo's. Please let me know wha tyou think.
Again, I feel like I missed this one badly@@@@
@SijaanX
I did it this way because I wanted to keep it independent of other repo's
react-devtools-shared/src/hook is also used in other places such as standalone app and inline version of devtools, and most of the logic needs to be shared. It's better to keep it there and import from it.
I understand and appreciate that you'd love to contribute. But we have a hard deadline and cannot keep waiting. Like I've suggested in the issue, if you did make significant progress but want my help, it's better to create a branch on your own fork so that I can see it, and communicate with me clearly and timely. In that way, even if you could not finish the entire thing on your own, as long as I were able to finish the work on top of yours, you will still get credits. Also in the future I'd suggest you work on something not assigned to a team member. It's way easier when you are not "racing" with a developer who has more context and is working on this project full-time.
Sorry for the belated review! This looks good. One thing though: We don't want React DevTools to slow down the initial page load. Could we add a before/after profiling trace to make sure that the page load time has not changed?
Performance impact (tested with cached reactjs.org, Chrome perf tab "start profiling & reload")
With MV3 (this PR): about 700ms
With MV2 (main branch): about 840ms
With no extension installed: about 690ms
My test perf results on other pages are similar. My conclusion is that this change brings improvement on initial page load time.