react/packages/react-devtools-extensions
Ruslan Lesiutin f37c7bc653
feat[react-devtools/extension]: use chrome.storage to persist settings across sessions (#30636)
Stacked on https://github.com/facebook/react/pull/30610 and whats under
it. See [last
commit](248ddba186).

Now, we are using
[`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/api/storage)
to persist settings for the browser extension across different sessions.
Once settings are updated from the UI, the `Store` will emit
`settingsUpdated` event, and we are going to persist them via
`chrome.storage.local.set` in `main/index.js`.

When hook is being injected, we are going to pass a `Promise`, which is
going to be resolved after the settings are read from the storage via
`chrome.storage.local.get` in `hookSettingsInjector.js`.
2024-09-18 18:26:39 +01:00
..
.circleci Reorganized things again into packages 2019-08-13 11:37:25 -07:00
chrome feat[react-devtools/extension]: use chrome.storage to persist settings across sessions (#30636) 2024-09-18 18:26:39 +01:00
edge feat[react-devtools/extension]: use chrome.storage to persist settings across sessions (#30636) 2024-09-18 18:26:39 +01:00
firefox feat[react-devtools/extension]: use chrome.storage to persist settings across sessions (#30636) 2024-09-18 18:26:39 +01:00
flow-typed lint: enable reportUnusedDisableDirectives and remove unused suppressions (#28721) 2024-06-21 12:24:32 -04:00
icons Optimized DevTools extension images 2021-08-02 09:32:46 -04:00
popups feat[devtools/extension]: show disclaimer when page doesnt run react and refactor react polling logic (#27373) 2023-09-20 13:30:50 +01:00
src feat[react-devtools/extension]: use chrome.storage to persist settings across sessions (#30636) 2024-09-18 18:26:39 +01:00
build.js refactor: resolve browser via env variables based on build rather than user agent (#27179) 2023-08-29 10:40:02 +01: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 Added windows powershell syntax to build scripts (#27692) 2023-11-16 11:35:43 +00: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 [DevTools] Implement Owner Stacks (#30417) 2024-07-22 18:49:44 -04:00
panel.html feat[devtools/extension]: show disclaimer when page doesnt run react and refactor react polling logic (#27373) 2023-09-20 13:30:50 +01:00
README.md Include install command for devtools-extension build instructions (#25053) 2022-10-05 11:27:09 -04:00
utils.js chore[react-devtools]: unify console patching and default to ansi escape symbols (#29869) 2024-06-17 16:31:36 +01:00
webpack.backend.js chore[react-devtools]: add global for native and use it to fork backend implementation (#30533) 2024-08-02 10:51:15 +01:00
webpack.config.js feat[react-devtools/extension]: use chrome.storage to persist settings across sessions (#30636) 2024-09-18 18:26:39 +01:00

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