chrome.storage.sync undefined?

I'm trying to use chrome storage in an extension, via a content_script, but I keep failing on

Uncaught TypeError: Cannot read property 'sync' of undefined 

This is my code:

testChromeStorage();

function testChromeStorage() {	
    console.log("Saving");
	chrome.storage.sync.set({'value': theValue}, function() {
		message('Settings saved');
	});
	chrome.storage.sync.get("value", function (retVal) {
            console.log("Got it? " + retVal.value);
    });
}

You have to add the "storage" permission in your manifest.json file, i.e.:

...
  "permissions": [
	"storage"
  ],
...

For more information, see: https://developer.chrome.com/extensions/storage

RELOAD THE EXTENSION

I had the "permissions" key added in my manifest file but still I struggled to get this fixed.

After adding the permission:-

"permissions": [
    "storage"
 ]

Goto your extension using: chrome://extensions/ & click the Reload button:-

If someone was facing this issue on Firefox, please note, that it is not supported yet:

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage#Chrome_incompatibilities

For my purposes it was sufficient to replace chrome.storage.sync by chrome.storage.local.

Regarding the Firefox implementation state it might be worth to look also here from time to time:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs#storage

RESTART THE DEV SERVER

Despite adding the permission and reloading the extension, I sync was still undefined.

Turned out I needed to restart the dev server for the new manifest to picked up. Which makes sense since this file was not being watched. Doh!

See https://developer.chrome.com/extensions/content_scripts.html:

> However, content scripts have some limitations. They cannot: > > Use chrome. APIs (except for parts of chrome.extension)*

(emphasis added)