Ensuring storage of Redux state and preventing visibility in browser Developer Tools

I need guidance on securely storing the persisted Redux state locally, ensuring it cannot be accessed or displayed through browser development tools. I want to understand the strategies and techniques used by metamask-extension to achieve this level of security. Any insights, code snippets, or recommended best practices would be highly appreciated.

I have attempted to utilize redux-persist-transform-encrypt to encrypt and store the Redux state locally.

const encryptKey = encryptTransform({
  secretKey: "secrete-key",
});

const encryptionTransform = createTransform(
  (inboundState, key) => {
    return encryptKey.in(inboundState, key);
  },
  (outboundState, key) => {
    return encryptKey.out(outboundState, key);
  }
);

const customStore = localforage.createInstance({
  name: "Extension",
  storeName: "Extension Storage",
});

const persistConfig = {
  key: "root",
  storage: customStore,
  transform: [encryptionTransform],
};

const rootReducer = combineReducers({
  appState: appStateReducer,
  wallet: walletReducer,
  userPreferences: preferenceReducer,
  connectedWebsites: connectedWebsiteReducer,
  announcements: announcementsReducer,
  language: languageReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  devTools: false,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

However, I encountered an issue where the encrypted data is still visible in the browser's developer tools as persist:root.

In contrast, metamask-extension manages to hide the persisted data and securely store the encrypted vault/state in the following location locally:

C:\\Users\\USER_NAME\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Local Extension Settings\\nkbihfbeogaeaoehlefnkodbefgpgknn.

I am seeking guidance on how to achieve similar secure storage of the encrypted persisted Redux state as implemented by metamask-extension.

Metamask is a browser extension and probably uses one of the storage solutions for browser extensions, which would explain that file you found. I would assume they use storage.local, which is not to be confused with localStorage, which is to be used by websites, not extensions.