Files
react/packages/react-devtools-extensions/src/contentScripts/installHook.js
T
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](https://github.com/facebook/react/pull/30636/commits/248ddba18608e1bb5ef14c823085a7ff9d7a54a3).

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

57 lines
1.5 KiB
JavaScript

import {installHook} from 'react-devtools-shared/src/hook';
let resolveHookSettingsInjection;
function messageListener(event: MessageEvent) {
if (event.source !== window) {
return;
}
if (event.data.source === 'react-devtools-hook-settings-injector') {
// In case handshake message was sent prior to hookSettingsInjector execution
// We can't guarantee order
if (event.data.payload.handshake) {
window.postMessage({
source: 'react-devtools-hook-installer',
payload: {handshake: true},
});
} else if (event.data.payload.settings) {
window.removeEventListener('message', messageListener);
resolveHookSettingsInjection(event.data.payload.settings);
}
}
}
// Avoid double execution
if (!window.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
const hookSettingsPromise = new Promise(resolve => {
resolveHookSettingsInjection = resolve;
});
window.addEventListener('message', messageListener);
window.postMessage({
source: 'react-devtools-hook-installer',
payload: {handshake: true},
});
// Can't delay hook installation, inject settings lazily
installHook(window, hookSettingsPromise);
// Detect React
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on(
'renderer',
function ({reactBuildType}) {
window.postMessage(
{
source: 'react-devtools-hook',
payload: {
type: 'react-renderer-attached',
reactBuildType,
},
},
'*',
);
},
);
}