maxjhandsome
/
react
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
react/packages/react-devtools-extensions
History
Mengdi Chen 4b09b0ae4d [DevTools] upgrade to Manifest V3 (#25145) 
## 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](e5ad3451c1))
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`
 		2022-12-03 10:41:45 -05:00
..
.circleci Reorganized things again into packages 2019-08-13 11:37:25 -07:00
chrome [DevTools] upgrade to Manifest V3 (#25145) 2022-12-03 10:41:45 -05:00
edge [DevTools] upgrade to Manifest V3 (#25145) 2022-12-03 10:41:45 -05:00
firefox [DevTools] upgrade to Manifest V3 (#25145) 2022-12-03 10:41:45 -05:00
flow-typed Flow: remove explicit object syntax (#25223) 2022-09-09 16:03:48 -04:00
icons Optimized DevTools extension images 2021-08-02 09:32:46 -04:00
popups Updated scripts and config to replace "master" with "main" branch (#21768) 2021-06-29 14:26:24 -04:00
src [DevTools] upgrade to Manifest V3 (#25145) 2022-12-03 10:41:45 -05:00
README.md Include install command for devtools-extension build instructions (#25053) 2022-10-05 11:27:09 -04:00
build.js Prevent errors/crashing when multiple installs of DevTools are present (#22517) 2021-10-14 17:15:31 -04:00
deploy.chrome.html Fixed a bunch of Lint issues 2019-08-13 21:59:07 -07:00
deploy.edge.html React developer tools extension for Microsoft Edge (#18041) 2020-02-18 09:40:30 -08:00
deploy.firefox.html Fixed a bunch of Lint issues 2019-08-13 21:59:07 -07:00
deploy.html make link https (#19147) 2020-06-30 12:43:52 +01:00
deploy.js Cleaned up some extnesions build script stuff 2019-08-13 22:15:38 -07:00
improveImages.mjs [DevTools] Optimize Images yarn command (part 2) (#21968) 2021-08-02 09:32:17 -04:00
main.html Fixed a bunch of Lint issues 2019-08-13 21:59:07 -07:00
package.json Prevent errors/crashing when multiple installs of DevTools are present (#22517) 2021-10-14 17:15:31 -04:00
panel.html Fixed a bunch of Lint issues 2019-08-13 21:59:07 -07:00
utils.js [Codemod] Update copyright header to Meta (#25315) 2022-12-03 10:40:55 -05:00
webpack.backend.js DevTools supports ENV-injected version for better internal bug reports (#22635) 2021-10-27 17:18:48 -04:00
webpack.config.js [DevTools] upgrade to Manifest V3 (#25145) 2022-12-03 10:41:45 -05:00

README.md

This is the source code for the React DevTools browser extension.

Installation

The easiest way to install this extension is as a browser add-on:

Local development

You can also build and install this extension from source.

Prerequisite steps

DevTools depends on local versions of several NPM packages1 also in this workspace. You'll need to either build or download those packages first.

1 Note that at this time, an experimental build is required because DevTools depends on the createRoot API.

To install all necessary dependencies, run the following command from the root of the repository:

yarn install

Build from source

To build dependencies from source, run the following command from the root of the repository:

yarn build-for-devtools

Download from CI

To use the latest build from CI, run the following commands starting from the root of the repository:

cd scripts/release
yarn install
./download-experimental-build.js

Build steps

Once the above packages have been built or downloaded, you can build the extension by running:

cd packages/react-devtools-extensions/

yarn build:chrome # => packages/react-devtools-extensions/chrome/build
yarn run test:chrome # Test Chrome extension

yarn build:firefox # => packages/react-devtools-extensions/firefox/build
yarn run test:firefox # Test Firefox extension

yarn build:edge # => packages/react-devtools-extensions/edge/build
yarn run test:edge # Test Edge extension