Access extension data on other pages

Question

I want to save some value (say userid) from my extension and then want to access it on other pages. I cannot do it using cookie because I can access cookie only within the extension.

Is there a way to do that?

Answer 1

I am sorry, it might just be me being thick but I still don't really understand what you are trying to do.

If you are wanting to create a variable that persists across different domains, you need to use chrome.storage. It is similar to HTML5 localStorage but with some significant improvements (persisting across domains being a main one for me). You can read more about setting and getting the values here:

http://developer.chrome.com/extensions/storage.html

If this isn't what you need, please try to give a specific example of what you are trying to do and I will try again.

EDIT: Please see below for examples.

You can set a variable into storage like this (the function is an optional param):

var storage = chrome.storage.local;
var myVal="foo";

storage.set({'myVar': myVal}, function() {
    alert('myVar has been saved in local storage');
});

You can retrieve it like this (function is NOT optional):

storage.get('myVar', function(items) {
    if (items.myVar) {
        alert(items.myVar);
    }
});

You can return default values when 'myVar' is undefined by storage.get({'myVar': ''}) - this saves checking with the "if (items.myVar) {" line.

EDIT: Please see below for issues to watch out for.

Firstly, the methods are asynchronous. So...

alert("1");
storage.get('myVar', function(items) {
    alert("2");
});
alert("3");

will probably output 1, then 3, then 2. Not a big deal but saves a lot of restructuring later if you know beforehand.

Secondly, please note that there is a limit to the amount of storage space you have. For chrome.storage.sync (for which the variable are automatically synced across all of that users browsers) the storage space is very limited at about 100kb. (there are other limits as well, such as a max of 512 separate variables - see the documentation link above). Basically, chrome.storage.sync is for a few small variables only.

chrome.storage.local has much more storage space at about 5mb (unless you set the unlimited storage permission). Unlike chrome.storage.sync there is no other limits on storage chrome.storage.local.

If a set will take you over the storage limit, then it fails.

Thirdly, using a variable as your variable name does NOT work:

var myVal="foo";
var myVarName='myVar';

storage.set({myVarName: myVal}, function() {
    alert('THIS WILL NOT WORK');
});

If like me, you really wanted/needed to do something like this, the way to do something like this is by creating an object and assigning it the variables as properties and then putting the object in storage. For example:

var myVarName='myVar';
var mySecondVarName='mySecondVar';

var myVal="foo";
var mySecondVal="bar";

var obj = {};
obj[myVarName] = myVal;
obj[mySecondVarName] = mySecondVal;
//add as many vars as you want to save to the storage 
//(as long as you do not exceed the max storage space as mentioned above.)

storage.local.set(obj);

you can then get the values with:

chrome.storage.local.get(myVarName, function (items) {
    if (items[myVarName]) {
        alert('You got the value that was set to myVarName');
    }
});

Or if you wanted the value for mySecondVarName:

chrome.storage.local.get(mySecondVarName, function (items) {
    if (items[mySecondVarName]) {
        alert('You got the value that was set to mySecondVarName');
    }
});

And these can be nested.