BANGALORE, INDIA: This article outlines how chrome extensions can leverage HTML 5 local storage feature to persist data across popup and browser sessions. It uses a sample extension which is already available in the Extension Gallery. This article is limited to structured storage and retrieval from local storage. SQL support and web storage is out of scope for this article.

Prerequisites

Before you read this article, you should already be familiar with:

    * Chrome Extensions
    * HTML 5 Local storage and the associated APIs window.localStorage
    * Javascript

Setting up and running the Sample Extension

   1. Install the extension from the extension gallery

      Extension is available at the following URL : https://chrome.google.com/extensions/detail/hmbpgbeiphknbkjjfppodijapijlpkkc

   2. Click on the Extension Browser Action
   3. Extension will show last three names entered in the popup
   4. Enter a new name and see the names change
   5. Close the popup or the browser, the Names are still retrieved beyond the lifecycle of the session or the browser instance

The objective of this sample is to:

Show usage of HTML 5 Local Storage APIs within the extension

Figure 1: Sample popup screen when user clicks on the browser action

Figure 1 shows the popup.html before user interaction starts.

All the interaction with the Local Storage takes place through background.html. Figure 2 elaborates how this interaction looks like,

Figure 2 : Interaction between Popup page, backogrund page and Chrome's Local Storage