Uncaught TypeError: Cannot read property 'local' of undefined in chrome extension

I have written a Chrome extension. I cannot use localStorage.setItem and localStorage.getItem for storing and retrieving because background and browser action runs in different environment [as seen here].

So I decided to use the Chrome storage API:

var storage = chrome.storage.local;
var myTestVar = 'somevar';
var obj = {};
obj[myTestVar] = $("#somevar").val();
storage.set(obj);

which produced the following error:

Uncaught TypeError: Cannot read property 'local' of undefined

What am I doing wrong?

Make sure that all necessary permissions have been declared in the manifest file. "storage", in your case.

In general, the following steps should fix the problem of apparently undefined Chrome APIs:

1. Read the documentation of the API you're using and get yourself familiar with the prerequisites, usually manifest permissions (e.g. chrome.storage#manifest).
2. Check if your (user's) Chrome version supports the API, by looking at What's new.
3. Check if the script is running in the right context. Most APIs are only available to the extension's process. (the chrome.storage API can also be used in content script though)
4. Otherwise, resort to your usual debugging skills: Typos, variable shadowing, ...