Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Log in to my web from a chrome extension

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.

like image 629
Alberto Elias Avatar asked Sep 02 '11 17:09

Alberto Elias


People also ask

How do I pin an extension to my browser?

Open the Extensions by clicking the puzzle icon next to your profile avatar. A dropdown menu will appear, showing you all of your enabled extensions. Each extension will have a pushpin icon to the right of it. To pin an extension to Chrome, click the pushpin icon so that the icon turns blue.

Can Chrome extensions access passwords?

They can help you take notes, manage passwords, block ads, and more. But do you know how browser extensions actually work? Some require access to almost everything your browser sees. Everything from the sites you visit, keystrokes, even your passwords.

Are Chrome extensions linked to account?

When you sync with a Google account, the extensions are synced between devices using that account. There is no “multi-account” version of this feature, and such a thing would be of very limited use, anyway.


1 Answers

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.

like image 81
Juzer Ali Avatar answered Oct 07 '22 01:10

Juzer Ali