Storing Developer Credentials in Google Chrome

Submitted by jwill on Sun, 2009-12-27 14:41

Recently, we covered the building blocks of building extensions for Chrome. In this post, I show you how to use HTML5 localStorage to store developer credentials securely.

Storing Developer Credentials

When we set up the manifest file to store the properties of our extension, We designated that we would use an options html page to input our Ribbit credentials for the application. Using an options page allows us to package our extension and give it to friends to use without exposing our information. To login to a Ribbit developer account, we need a couple of form elements to identify our application and the phone number that will be rung when a call is made:

Clicking "Save" will store the credentials in HTML5 localStorage. Rest assured that only our extension can read those settings and you are in no means sharing the data with other extensions or Google:


function save_options() {
 
    var token = document.getElementById("token");
 
    var appId = document.getElementById("appId");
 
    var username = document.getElementById("username");
 
    var pwd = document.getElementById("password");
 
    var phone = document.getElementById("phone");
 

 
    localStorage["token"] = token.value;
 
    localStorage["appId"] = appId.value;
 
    localStorage["phone"] = phone.value;
 
    localStorage["username"] = username.value;
 
    localStorage["password"] = pwd.value;
 
    
 
    // Update status to notify user.
 
    var status = document.getElementById("status");
 
    status.innerHTML = "Options saved."
 
    setTimeout(function() {
 
        status.innerHTML = "";
 
    }, 750);
 
    
 
    console.log("Options saved to localStorage.");
 
}

When the options page is loaded, the page is automatically repopulated with the stored data


 function restore_options() {
 
    var token = localStorage["token"];
 
    if (token == "") {
 
        return;
 
    }
 
    var appId = localStorage["appId"];
 
    var phoneNumber = localStorage["phone"];
 
    var username = localStorage["username"];
 
    var password = localStorage["password"];
 
    
 
    var tokenId = document.getElementById("token");
 
    var app = document.getElementById("appId");
 
    var phone = document.getElementById("phone");
 
    var user = document.getElementById("username");
 
    var pwd = document.getElementById("password");
 
    
 
    tokenId.value = token;
 
    app.value = appId;
 
    phone.value = phoneNumber;
 
    user.value = username;
 
    pwd.value = password;
 
    
 
    console.log("Restoring options from localStorage.");
 
}

We can reach the options page of any installed extension by navigating to chrome://extensions and clicking the associated Options button.

Logging In

In the following snippet, we are telling the extension to use the stored credentials to login whenever the popup page is opened.


function init() {
 
    var token = localStorage["token"];
 
    var appId = localStorage["appId"];
 
    var username = localStorage["username"];
 
    var password = localStorage["password"];
 
    
 
    if (token != "") {
 
        Ribbit.init(token, appId);
 
        Ribbit.Login(loginCallback, username, password);
 
        console.log("Attempting login with stored credentials.");  
 
    }
 
    
 
    console.log("Attempting login");                
 
}
 

 
init();

After login is completed, you'd can call functions like in any other Ribbit Javascript application.