DRAFT: feat(25903): Move state management from storage.local to IndexedDB

[DDDDDanica]

Description

We currently rely on the Chrome Storage API to maintain state, but after evaluating performance and reliability, we’ve decided to transition to the IndexedDB API. This PR introduces a new ExtensionStore class that wraps IndexedDB, which has been fully implemented and tested. The existing reliance on storage.local has been replaced, accompanied by updated unit tests to ensure smooth functionality. Additionally, the ReadOnlyNetworkStore, previously used for testing, has been migrated to TypeScript.

Previously, using chrome.storage.local.get(console.log) in the DevTools console allowed us to easily retrieve the local storage data. Now, with the transition to IndexedDB, we can either

• use a script to access it, NOTE: This cannot be performed in production code due to lavamoat limitation

indexedDB.open('ExtensionStore').onsuccess = function (event) {
  const db = event.target.result;
  const transaction = db.transaction('ExtensionStore', 'readonly');
  const objectStore = transaction.objectStore('ExtensionStore');
  objectStore.getAll().onsuccess = function (e) {
    console.log(e.target.result);
  };
};

• or find the data within the Application tab in DevTools. (see recordings below)

Related issues

Fixes: #25903

Manual testing steps

1. Onboard extension
2. Inspect chrome dev tools -> application -> indexDB -> extensionStore -> find the state there
3. alternatively, chrome dev tools -> console ->

indexedDB.open('ExtensionStore').onsuccess = function (event) {
  const db = event.target.result;
  const transaction = db.transaction('ExtensionStore', 'readonly');
  const objectStore = transaction.objectStore('ExtensionStore');
  objectStore.getAll().onsuccess = function (e) {
    console.log(e.target.result);
  };
};

You can find the local state

Some other edge cases i want to cover:

1. Perform an onboarding, indexedDB loaded
2. Clear cache and hard reload, state is back
3. Toggle off and on extension, state is back
4. Delete storage by chrome.storage.local.clear(function() { console.log('All items have been removed from chrome.storage.local.'}); and refresh, state is back
5. Delete storage by chrome.storage.local.clear, toggle extension, state is back

Screenshots/Recordings

Before

After

indexDB.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [512cab6]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2009 ± 93 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1648	2503	2005	192	92
		domContentLoaded	1640	2380	1970	184	88
		load	1648	2491	2009	194	93
		domInteractive	14	69	37	15	7

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 102 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 1.31 KiB (0.02%)

[metamaskbot]

Builds ready [cf7325b]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1790 ± 54 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1614	2104	1780	108	52
		domContentLoaded	1596	1977	1750	90	43
		load	1605	2117	1790	113	54
		domInteractive	14	193	45	38	18

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 102 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 1.31 KiB (0.02%)

[davidmurdoch]

Not sure who this question is for, but why do we think this is better/faster than chrome.storage.local? I know the linked issue says "We believe IndexedDB is more reliable and performant."... but who believes this and why?

[sonarcloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
85.4% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [0abff79]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1815 ± 71 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	249	2185	1731	368	177
		domContentLoaded	1604	2159	1778	138	66
		load	1612	2188	1815	147	71
		domInteractive	21	159	53	32	15

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 102 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 2.08 KiB (0.03%)