Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DevTools] upgrade to Manifest V3 #25145

Merged
merged 12 commits into from
Oct 22, 2022
Merged

[DevTools] upgrade to Manifest V3 #25145

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
83e8123
upgrade to manifest v3 (chrome)
mondaychen Aug 25, 2022
2c8b0bc
manifest v3 for edge
mondaychen Aug 25, 2022
9b23880
fallback logic for firefox
mondaychen Aug 25, 2022
6ae72f0
fix lint
mondaychen Aug 25, 2022
12a081c
Use new method to inject content scripts + rename files
mondaychen Sep 8, 2022
78f3570
cleanup
mondaychen Sep 8, 2022
e53b5fe
fix renderer logic
mondaychen Sep 8, 2022
4835a51
fallback logic when world is not supported
mondaychen Sep 27, 2022
0edb72a
cleaner code
mondaychen Sep 27, 2022
ba9dc3b
fix lint
mondaychen Sep 27, 2022
5357227
minor improvements per review
mondaychen Oct 21, 2022
26ba645
more nits
mondaychen Oct 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/react-devtools-extensions/chrome/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
"panel.html",
"build/react_devtools_backend.js",
"build/proxy.js",
"build/prepareInjection.js",
"build/renderer.js",
"build/installHook.js"
],
Expand Down
1 change: 0 additions & 1 deletion packages/react-devtools-extensions/edge/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
"panel.html",
"build/react_devtools_backend.js",
"build/proxy.js",
"build/prepareInjection.js",
"build/renderer.js",
"build/installHook.js"
],
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/devtools/views/Components/Tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@ export default function Tree(props: Props): React.Node {

const zeroElementsNotice = (
<div className={styles.ZeroElementsNotice}>
<p>Loading elements from the React app...</p>
<p>Loading React Element Tree...</p>
<p>
If this seems stuck, please follow the{' '}
<a
Expand Down
4 changes: 2 additions & 2 deletions packages/react-devtools/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,12 @@ Or you could develop with a local HTTP server like [`serve`](https://www.npmjs.c

**If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment**, try [the standalone version instead](https://github.com/facebook/react/tree/main/packages/react-devtools). Chrome apps are currently not inspectable.

**If your React DevTools tab is showing an empty tree**, please read the "the issue with Chrome v101 and earlier versions" part below.
**If your Components tab is empty, refer to "Chrome v101 and earlier" section below**, please read the "the issue with Chrome v101 and earlier versions" part below.

**If you still have issues** please [report them](https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools). Don't forget to specify your OS, browser version, extension version, and the exact instructions to reproduce the issue with a screenshot.

### The Issue with Chrome v101 and earlier versions
mondaychen marked this conversation as resolved.
Show resolved Hide resolved
As we migrate to a Chrome Extension Manifest V3, we start to use a new method to hook the DevTools with the inspected page. This new method is more secure, but relies on a new API that's only supported in Chrome v102+. For Chrome v101 or earlier, we use a fallback method, which can cause malfunctions (e.g. an empty tree in the React component tab) if the JS resources on your page is loaded from cache. Please upgrade to Chrome v102+ to avoid this issue.
As we migrate to a Chrome Extension Manifest V3, we start to use a new method to hook the DevTools with the inspected page. This new method is more secure, but relies on a new API that's only supported in Chrome v102+. For Chrome v101 or earlier, we use a fallback method, which can cause malfunctions (e.g. empty React component tab) if the JS resources on your page is loaded from cache. Please upgrade to Chrome v102+ to avoid this issue.

## Local development
The standalone DevTools app can be built and tested from source following the instructions below.
Expand Down