rpl and wbamberg Add an indexedDB file storage example: image-reference-collector (#224)
* new example: image-reference-collector (indexedDB file storage demo)

* fix: added missing deps, updated all npm dependencies and webpack config to v.2

* chore: Renamed the example to store-collected-images

* chore: Removed from utils/image-store any direct call to the UI code

* move example built using webpack into its own subdir

* tweak browser action title

* added plain webextension example (without webpack build step)

* added README.md file to plain webextension example

* small changed based on the review comments

* fixed typo in store-collected-images example (webpack-based version)

* Remove React from the store-collected-images (plain webextension version)

* Fix eslint errors on store-collected-images example (both versions)

* Fix some typos in the README files
Latest commit 7b6b03a Jul 20, 2017


"Image Reference Collector" example

What it does

This example adds a context menu which targets any image element in the webpage. When the context menu item is clicked, the add-on opens a window and adds the related image element to the preview list of the collected images. The user can then store the collected images by giving the collection a name and pressing the save button.

Once a collection of reference images has been stored by the add-on, they can be navigated using the extension page that the add-on will open in a tab when the user press the add-on browserAction.

What it shows

The main goal of this example is showing how to use the idb-file-storage library to store and manipulate files in a WebExtension.

  • How to store blob into the add-on IndexedDB storage
  • How to list the stored blobs (optionally by filtering the listed blobs)
  • How to turn the stored blobs into blob urls to show them in the extension page
  • How to remove the stored blobs from the extension IndexedDB storage.

entension demo screencast

This example is written in two forms:

  • a plain webextension (which doesn't need any build step)
  • a webextension built using webpack

The code that stores and retrieves the files from the IndexedDB storage is in the file named utils/image-store.js in both the example version.


The icon for this add-on is provided by icons8.