Chrome Extension and IndexDB Integration

Question

So, I am working on a project(building a chrome extension) that requires data to be stored on the local machine of the user. The size of data is quite large hence I thought of using IndexDB for this purpose.

My Question is whether is it possible to connect a chrome extension with IndexDB and query the database at the same time??

If Yes, Then how can I integrate them. In which file(popup.js or background.js or any other file) should I include the source code for creating the database. I want the code for creating the database to run only once. After that I only want to update or delete data only.

If No, then is there any other way to achieve this?? The data is large hence I cannot store data in local storage.

Any paper, online material, advice or method from chrome developers or any other valid site would be helpful. Any example would help me alot. Thankyou.

Answer 1

• You can store tons of data in any HTML5 storage (including IndexedDB or localStorage) and chrome.storage.local with "unlimitedStorage" permission.

• HTML5 data is stored per URL origin and each extension has its own one that looks like chrome-extension://id where id is a 32-character string that is the extension's id. In Firefox the origin looks like moz-extension://id.

• Extension's own HTML5 storage:

  • can be accessed in any extension page (popup, options, background) just like you would do it in a web page, there are no differences.
  • cannot be accessed in a content script as it runs in a web page and thus can only access HTML5 storage of the web page's URL origin.
• chrome.storage.local can be accessed in any extension page and in a content script.
• No need for special event to create/upgrade your IndexedDB storage - it'll happen automatically if needed - simply open it as shown in the documentation whenever you need to access it and your onupgradeneeded callback will be invoked in case there was no DB or it was outdated.
• Use a wrapper library for IndexedDB that provides a simplified syntax. Some are listed in the documentation, but you can probably find better ones yourself.