Log in to my web from a chrome extension

Question

I've got a web where logged in users can fill out a form to send information. I wanted my users to do this from a chrome extension too. I managed to get the form to sen information working but I only want to be logged in users to be able to do that. It's like a twitter or Springpad extension when the user first opens up the extension, it would have to log in or register. I saw the following answer at stack overflow: Login to website with chrome extension and get data from it

I gave it a try and put this code in background.html:

function login() {
    $.ajax({
        url: "http://localhost/login", type: "GET", dataType: "html", success: function() {
            $.ajax({
                url: "http://localhost/login", type: "POST", data: {
                    "email": "[email protected]",
                    "password": "mypassword",
                },
            dataType: "html",
            success: function(data) {
               //now you can parse your report screen
            }
            });
        }
    }); 
}

In my popup.html I put the following code:

var bkg = chrome.extension.getBackgroundPage()
$(document).ready(function() {
    $('#pageGaffe').val(bkg.getBgText());  
    bkg.login();        
});

And on my server, which is in node.js, I've got a console.log that shows user information when he logs in, so I saw that when I load my extension, it does log in. The problem is how can I get the user to log in by itself, instead of manually putting my details in the code, how to stay logged in in the extension and when submitting the form, sending the user's details to the web.

I hope I've managed to explain myself correctly.

Thanks.

Answer 1

Before answering this question I would like to bring to your notice that you can make cross origin xhr from your content scripts as of Chrome 13 if you have declared proper permissions. Here is the extract from the page

Version note: As of Chrome 13, content scripts can make cross-origin requests to the same servers as the rest of the extension. Before Chrome 13, a content script couldn't directly make requests; instead, it had to send a message to its parent extension asking the extension to make a cross-origin request.

Coming to the point. You simply have to make an XmlHttpRequest to your domain from your extension (content script or background page) and wait for the response.

At Server

Read the request and session cookie. If session is valid send proper response, else send an error code. 401 or anything else.

At client

If response is proper display it, else display a login link directing to login page of your website.

How it works:

It will work if cookies in user's browser is enabled. Whenever user logs in to your website your server sets a session cookie which resides in user's browser. Now with every request that the browser sends to your domain, this cookie is transmitted. This cookie will be transmitted even if the request is from a Google Chrome Extension.

Caveat

Make sure you display proper cues to user indicating that they are logged in to your application. Since your UI will be mostly inside the extension, it is possible that user might not be aware of their valid session with your website and they might leave an active session unattended which might be abused if user is accessing it from a public internet kiosk.

Reference

You can take a look at a similar implementation that I have done with my extension here.