You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)
Inspect chrome dev tools -> application -> indexDB -> extensionStore -> find the state there
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:
Perform an onboarding, indexedDB loaded
Clear cache and hard reload, state is back
Toggle off and on extension, state is back
Delete storage by chrome.storage.local.clear(function() { console.log('All items have been removed from chrome.storage.local.'}); and refresh, state is back
Delete storage by chrome.storage.local.clear, toggle extension, state is back
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.
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?
Bundle size diffs [🚨 Warning! Bundle size has increased!]
background: 102 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 2.08 KiB (0.03%)
DDDDDanica
changed the title
feat(25903): Move state management from storage.local to IndexedDB
DRAFT: feat(25903): Move state management from storage.local to IndexedDB
Oct 3, 2024
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
We currently rely on the Chrome
Storage
API to maintain state, but after evaluating performance and reliability, we’ve decided to transition to theIndexedDB
API. This PR introduces a newExtensionStore
class that wrapsIndexedDB
, which has been fully implemented and tested. The existing reliance onstorage.local
has been replaced, accompanied by updated unit tests to ensure smooth functionality. Additionally, theReadOnlyNetworkStore
, 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 toIndexedDB
, we can eitherApplication
tab in DevTools. (see recordings below)Related issues
Fixes: #25903
Manual testing steps
indexDB
-> extensionStore -> find the state thereYou can find the local state
Some other edge cases i want to cover:
chrome.storage.local.clear(function() { console.log('All items have been removed from chrome.storage.local.'})
; and refresh, state is backchrome.storage.local.clear
, toggle extension, state is backScreenshots/Recordings
Before
After
indexDB.mov
Pre-merge author checklist
Pre-merge reviewer checklist