How does an extension store a file?

For an example, if I was making an extension that played a notification noise and I wanted to let the user set an audio file to use as the notification sound, how would I save that in the add-on?

As far as I’m aware, the <input> element for a file passes a fake filepath to Firefox, so I couldn’t just store the file path in the Storage API (it would be weird if Firefox allowed extensions to just access files like that away).

Would I need to have JavaScript make a Blob() from the file and store that in the Storage API? Is that even allowed? Is there a better way to do it?

I’m not sure if the storage API by now supports all the things you can store in an indexedDB, even though it is an indexed DB these days. In short, you’d use an indexed DB.

The MDN documentation explains usage with a library:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files#store_files_data_locally_using_the_indexeddb_file_storage_library

https://github.com/freaktechnik/notification-sounds/blob/main/scripts/stored-sound.js is my much simplified version of such an interaction that lets you store a blob with a name as an ID and retrieve it.

1 Like

You can also convert the Blob to base64 string and store that in whatever storage you need (it it will fit).
But due to the encoding overhead it will take ~30% more space. Also performance may suffer if you try to load many of these directly in the HTML (it may be better to convert them back to Blob and use URL.createObjectURL to get a link).

1 Like