Securely incorporating local resources into an extension page

I’ve been working on an extension in which users can build documents by clicking buttons and adding different elements to the DOM. The necessary information is stored in a database in the extension and used to reconstruct the documents at a later time.

Because this is currently initiated through the user first opening a local HTML page (which is only an empty container into which the extension injects the HTML, CSS, JS), the user can incorporate local resources into their custom made documents and the extension can instruct the content script and page script to fetch/load them through a relative path to the local HTML file’s location.

This works now. However, I would like to make this an extension page instead of injecting into a local HTML file and still provide means for the user to incorprate local resources into their documents. I experimented with having a user click in an extension page load a local PDF and it can work, but a local page still needs to be opened in a separtate tab and the CSP in the manifest must be changed to permit the loading of objects.

My question is can this be accomplished without having the user open a local file in a separate tab? For example, could the user select the local folder from whence they wish to load their local resources from within an extension page? There needs to be some type of user-provided/user-initiated “hook” to a relative path of the local disk from which to load the user’s local resources. Is this at all possible in a manner that will meet add-on security policies and be safe for the users?

Thank you.

What you can do is have the user select a file using a file input and “storing” the file in the indexedDB. You can then generate a blob: URI to refer to the file to do whatever you want with it. See also

2 Likes

Thank you. I like this idea.

The only issue is that I’d like to provide users a means of writing their work to disk and then loading/building a new module of work in the emptied extension database. The only method I’ve come across that can accomplish this is to convert all the data into a single giant blob to be downloaded. That will take up a bit of RAM when the resources are included in the database.

There needs to be a way of downloading and restoring the SQLite file directly or a way of streaming the data to disk instead of first generating a giant blob in RAM.

It appears that there are limited options remaining. I either should not have built this in the extension environment or need to use nativing messaging and build some sort of ultility than can use SQLite outside of the browser such that there is no size limitation and need to download indexedDB to disk.

Thanks again.

May I ask a late follow-up question please?

Do MIME types need to be handled in this type of situation?

If the user can load any file into the database and the browser will later attempt to display/play it, how can it be determined first that, if the user says their loading an image (or audio, video, PDF, etc.) file, it is a an image file; and, second, should anything regarding MIME type be included when the resource is passed from the database to the browser?

When I was attempting to handle all of this using locally stored files, I never thought about it in advance and just handled load errors. Is there a better method?

Thank you.