Browser storage API enables extensions to store and retrieve data, and listen for changes to the stored item. In SUSI Firefox add-on the browser storage is implemented to store the chat history in the browser memory. This allows the extension to maintain persistence when the popup is closed or opened. This article gives a brief idea about how to implement browser storage using SUSI Firefox add-on as a use case.

Adding Permission

To use this API you need to include the “storage” permission in your manifest.json file.

“permissions”: [
 “storage”
]

Adding this in the manifest.json file will grant your extension the permission to use the storage API

Properties of Storage

There are three properties of storage which allows the developer to use different types of storage areas. One can choose a suitable property to meet the requirements.

1. Storage.sync – Represents the sync storage area. Data stored in sync storage are synced by the browser and are available across all instances of that browser (even on different devices) that the user is logged in. Note – Currently storage.sync is supported by modern browsers and recent versions of Firefox. Please refer the documentation for more details.
2. Storage.local – Represents the local storage area. Items in local storage are local to the machine the extension was installed on.
3. Storage.managed – Represents the managed storage area. Items in managed storage are set by the domain administrator and are read-only for the extension. Trying to modify this namespace results in an error.

In SUSI Firefox add-on Storage.sync is being used to leverage the benefit of storage sync across all instances of the browser. So the chat history and settings are synced across the browsers logged in by the user.

Storing Data

browser.storage.<storageType>.set(keys)  – This function allows one or more item to be stored in the browser storage. If there in key-value already existing then the value will be updated to the new value supplied in the function. The function returns a promise.

Note – <storageType> will be one of the writable storage types — storage.sync or storage.local

This is a snippet taken from SUSI Firefox add-on where the theme value from settings page is being stored in the browser storage.

if(response.settings.theme){
browser.storage.sync.set({
theme: response.settings.theme
});
}

Retrieving Data

browser.storage.<storageType>.get(keys)  – Retrieves one or more items from the storage area. A key or array of keys is used to identify the item(s) to be retrieved from storage. If an empty string, object or array is passed, an empty object will be retrieved. If you pass null, or an undefined value, the entire storage contents will be retrieved. The function returns a promise.

Note – <storageType> will be one of the writable storage types — storage.sync or storage.local

This is a snippet taken from SUSI Firefox add-on where the settings preferences are being persisted by retrieving setting values from storage.

var buffer = browser.storage.sync.get(null);
buffer.then(function(res){
if(res["theme"]){
if(res["theme"]=="dark"){
$("#theme").val("dark");
}
else{
$("#theme").val("light");
}
}
if(res["loggedUser"]){
loginForm.style.display="none";
logoutButton.style.display="block";
}
else{
loginForm.style.display="block";
logoutButton.style.display="none";
}

});

Null values are being passed in the get function.

Key Points To Remember

• Storage API is asynchronous. For all storage related transaction, you will need to manage the promises. So it is to carry out any kind of memory related action by using then() method to avoid spurious results
• Values are scoped to the extension, not to a specific domain (i.e. the same set of key/value pairs are available to all scripts in the background context and content scripts). So the values can be used across different scripts and it acts like a common data store for the scripts.
• The values stored can be any JSON-ifiable value, not just String. This includes Array and Object, but only when their contents can be represented as JSON, which does not include DOM nodes.

Resources

• More info storage API  : https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage
• More info on promises : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
• SUSI_firefoxbot repo: https://github.com/fossasia/susi_firefoxbot