Sharing a local storage object across a web-app and a Chrome extension

Question

I need to store a users profile and his preferences in a localStorage object \ cookies in a way that they'll be accessible(readable) and writable from both the web-app, and the chrome extension (that are basically part of the same product).

I found this cool library and this article that specifies how to use it.

The problem is that xauth.org is down, and so is the server page that is required to use the library.

Any alternatives

Answer 1

You can use both localStorage and cookies.

1. If you inject a content script in the web app's page, its localStorage is shared with domain's own storage. You can then communicate with your background script to pass information.

2. If you include "cookies" permission in your manifest, you can manipulate cookies using chrome.cookies API.

Edit: You can also make your extension externally connectable from the web app to maintain synchronization of the changes.

Answer 2

Update 2016

This cross-storage from zendesk is a great alternative to the 2 librarys that you mention

Even better you can config which client site/domain has a specific permission (either to get, set, delete)

Sample codes:

Hub

// Config s.t. subdomains can get, but only the root domain can set and del
CrossStorageHub.init([
  {origin: /\.example.com$/,            allow: ['get']},
  {origin: /:\/\/(www\.)?example.com$/, allow: ['get', 'set', 'del']}
]);

Note the $ for matching the end of the string. The RegExps in the above example will match origins such as valid.example.com, but not invalid.example.com.malicious.com.

Client

var storage = new CrossStorageClient('https://store.example.com/hub.html');

storage.onConnect().then(function() {
  return storage.set('newKey', 'foobar');
}).then(function() {
  return storage.get('existingKey', 'newKey');
}).then(function(res) {
  console.log(res.length); // 2
}).catch(function(err) {
  // Handle error
});