Configurable storage method

[ohmree]

I'd like to use the WebExtension storage instead of localStorage to store the current theme in my vue-based browser addon.

I've managed to come up with a solution using some composables from VueUse (and a few of my own, modeled after theirs) but it isn't as smooth as with this package so I'll fork this repo and try to hack on it.

Since the storage backend I want to use is async it does present an issue, but I think just wrapping the .get/.set/.remove calls in a setTimeout should work.

[DylanVann]

Yeah async is going to be in an issue. The challenge of this package is avoiding a flash of an incorrect theme, so it needs to be synchronous, or else you need to hide all the content and wait for it.

[ohmree]

Yeah async is going to be in an issue. The challenge of this package is avoiding a flash of an incorrect theme, so it needs to be synchronous, or else you need to hide all the content and wait for it.

I've thought about that but wasn't sure it'd be an issue, are you sure there's no way around it?

[ohmree]

So I have managed to bolt browser.storage support onto this but it's buggy and I think I know why (PDM is written with the assumption of the storage backend being blocking while browser.storage is async).

Maybe svelte-webext-stores (or some of the code from it) could be used in PDM to provide a backend-agnostic storage mechanism?

I'd use it directly if my project used svelte but as I've stated already, my addon is vue-based (😢).

EDIT: or I could just use PDM as-is, sure theme preferences will be erased if for example the user deletes their browser data (to which browser.storage might be more resilient) but it's just some colors, it's not the end of the world.
Though it's not ideal, I'd prefer to store all of my preferences in the webext storage and have them sync across devices for users who are logged into their browser.