How to use a custom Storage instance in React Hook, getting QUOTA_BYTES_PER_ITEM

[Hudsonzp]

What happened?

I'm grabbing some data and putting it in storage. I'm getting the following error.

Uncaught (in promise) Error: QUOTA_BYTES_PER_ITEM quota exceeded

In my previous version (prior to Plasmo), I never encountered this error when using chrome's storage. The data is quite large and I know chrome has some limits set, but on the same data being added in the same shape in a non-plasmo version vs. Plasmo - the plasmo version is the only one that returns this error and breaks. I imagine this is because it's using the sync underneath instead of local?

Here's the shape of the data.

[
  {
    "example-type": "name",
    "title": "title",
    "url": "https://www.example.com/1",
    "description": "Lorem ipsum",
    "image-urls": [
      "https://example.com/image/1",
      "https://examples.com/image/2",
    ],
  },
{
    "example-type": "name",
    "title": "title",
    "url": "https://www.example.com/1",
    "description": "Lorem ipsum",
    "image-urls": [
      "https://example.com/image/1",
      "https://examples.com/image/2",
    ],
  }
]

So on and so forth. Prior to plasmo, this file could get to 10k plus entries.

Notes

• I tried changing storage area to "local" for parts of my application. But it doesn't seem like you can do that same customization with the React Hooks. What I mean is that swapping it here doesn't seem to effect where the storage hook is placing it. That causes different issues to pop up.

const storage = new Storage({
  area: "local"
})

• I tried using the copied key list as well. I still get the Quota issue because it must still be using sync which has the limitations.

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

Here's how to pass a custom storage to react hook: https://docs.plasmo.com/framework/storage#with-a-custom-storage-instance

You might also want to use the unlimitedStorage perm as well.

[Hudsonzp]

Will debug and let you know what I find unless you have some ideas?

[Hudsonzp]

Needed to import { Storage } from "@plasmohq/storage" 🤦

I thought it came with the hook. My mistake.

[Hudsonzp]

Hey @louisgv thanks for the help! I see the custom storage react hook now. I'm going to give it a shot here shortly.

Gotcha. So you're staying to include the unlimitedStorage permission provided by Chrome.storage.local?

[louisgv]

That perm is a bit intrusive personally, so I'd use it only if needed. Otherwise, if you need large storage, local area (NOT web localStorage), should give you ample quota I think. You just need to pass down the local instance.

I do debate on whether we should default local or sync :d...... sync is a bit more powerful bc you can carry that state with you and your signed in account (google or etc..), but it doesn't work for incognito or any browser that doesn't have an acc system lol...

Maybe we should default to local :-?...

[Hudsonzp]

For my use case, local default would certainly be better, but I can't say that people are regularly storing this much data haha.

[donmorton]

@louisgv what are the risks with storing data in local area? Can other extensions access this data, can webpages, etc? Curious as I am evaluating storage options right now

[louisgv]

@donmorton - there's actually less risk storing it in local area - it will not be synced across device. As far as browser security is concerned, it's as safe as fs storage. If the host (above the browser) is pwn'ed and manage to inject some allow policy, then they can read the extension data (together with any file in the host system) and stream it to their origin. Otherwise webpage and other ext cannot access it (it's zoned by extension ID).

If your risk factor is similar to crypto wallet cold storage or password manager, see SecureStorage: https://docs.plasmo.com/framework/storage#secure-storage