103

I want my chrome extension to save some information, and I'm not sure how to start the code... I need it to save strings. For example - The user inputs a string (In a text area over the popup) and this string is shown on the popup. When the user exits it and returns I want the string to remain the same. (I belive it has to save it) I don't want to save it on my server or anything like that, I want it to be saved on the users cache or something.

Ariel
  • 2,638
  • 4
  • 23
  • 27
  • When user exits do you mean closes that popup or closes browser? – serg Mar 19 '11 at 20:53
  • Does it really matter? It should work when he closes the browser. – Ariel Mar 19 '11 at 22:05
  • Ok, then localStorege is the answer (otherwise you could just store values in a background page) – serg Mar 19 '11 at 22:06
  • If the content you're trying to save comes from a form (like _options_) I suggest [webext-options-sync](https://github.com/fregante/webext-options-sync). It's based on `chrome.storage.sync` but also takes care of auto-saving and auto-restoring a form. – fregante Jul 25 '19 at 19:52

2 Answers2

171

You can now leverage Google Chrome's storage API to do this as well. Unlike localStorage, this is accessible from content scripts as well.

//  Somewhere in your manifest...

{
    "permissions": [
        "storage"
    ]
}

//  Usage:

//  PERSISTENT Storage - Globally
//  Save data to storage across their browsers...

chrome.storage.sync.set({ "yourBody": "myBody" }, function(){
    //  A data saved callback omg so fancy
});

chrome.storage.sync.get(/* String or Array */["yourBody"], function(items){
    //  items = [ { "yourBody": "myBody" } ]
});

//  LOCAL Storage

// Save data to storage locally, in just this browser...

chrome.storage.local.set({ "phasersTo": "awesome" }, function(){
    //  Data's been saved boys and girls, go on home
});

chrome.storage.local.get(/* String or Array */["phasersTo"], function(items){
    //  items = [ { "phasersTo": "awesome" } ]
});

More info on how these shenanigans work here: https://developer.chrome.com/extensions/storage#type-StorageArea

Former answer:

Use localStorage. Google Chrome implements some features of HTML5, and it is one of them.

//Pull text from user inputbox
var data = document.getElementById("this_input").value;
//Save it to the localStorage variable which will always remember what you store in it
localStorage["inputText"] = data;

You should note you can only access your storage from the background page (no content scripts) so you'll have to use messaging for that.

mattsven
  • 22,305
  • 11
  • 68
  • 104
  • 4
    Thanks! One more thing - Where is it saved? (Where can I find this localstorage files, basically) – Ariel Mar 20 '11 at 20:18
  • No problem. :) Hmm...I'm not sure. That's something you'd have to ask around for, if it exists. BTW, check my answer if I helped. – mattsven Mar 20 '11 at 20:51
  • 1
    @BeauCielBleu You are right, thanks. Updated. Check it? – mattsven Jun 18 '14 at 01:30
  • @mattsven Yep. And thanks for the sync/local difference explanation ;) – BeauCielBleu Jun 18 '14 at 06:25
  • Tight quotas for `chrome.storage.sync` are worth a mention – Xan Jun 18 '14 at 06:53
  • Can you update this with how to actually access the data after you get it? None of the syntaxes I've tried work, I get an object with a proto: Object inside of it, and can't get the actual data. An simple example and an example with arrays would be awesome. – Zook Jul 17 '14 at 20:29
  • This would be much better if you put the update first. Using `localStorage` should not be the first thing people see when looking at the answer to this question. – Makyen Jan 11 '17 at 05:25
  • @Makyen Good idea. Done. – mattsven Jan 12 '17 at 09:17
  • 1
    @mattsven Maybe this is a stupid question, but how do I get the item out of the get callback? I'm trying to return a variable from there or set a global variable and it isn't working. – Truth Dec 17 '17 at 17:25
  • @Truth something like: https://gist.github.com/anonymous/7e50a3caae36843ecf00ef453ecd9c0d – mattsven Dec 17 '17 at 22:19
  • is chrome storage persistent?? localStorage can be deleted by the user, what about chrome storage? – Alexander Mills Jan 29 '18 at 20:46
  • I'm sure Chrome gives users the ability to delete either if they really want. – mattsven Jan 31 '18 at 14:46
  • I wanted to how do we read the chrome policies from an extension ? I have pushed one user policy from the EMM partner application to the all enrolled devices, I have set the "chromeApplicationsSettings" and under that "apps": [ { "appName": "Honey", "installed": true, "pinned": false, "extensionPolicy": "{\"key1\":\"https://some.xyz.com\",\"key2\":\"chrome\"}", "appInstallAllowed": { "appInstallAllowedType": "APP_INSTALL_ALLOWED" }, "appId": "someId" } ], is it possible to read the extensionPolicy – Jaydeep Shil Apr 22 '19 at 10:33
4

There is a specific API now, check this here: https://developer.chrome.com/extensions/storage

Note that it is only available on your background page and works in an isolated world (you don't access the values contained in the HTML5 localStorage of the web site).

BeauCielBleu
  • 379
  • 2
  • 11
  • 9
    It's a very confusing formulation. One of the main advantages is that it DOES work in Content Scripts without additional effort like Messaging. – Xan Jun 23 '14 at 13:30
  • 1
    you can read about implementing chrome storage api [here](https://dev.to/ambujsahu81/where-to-store-data-in-chrome-extension--1be6) – Ambuj sahu Jan 25 '23 at 12:17