Login to website with chrome extension and get data from it

Question

I am developing a Chrome/Chromium extension that will be reading school grades from the school system with grades. Problem is that site doesn't remember logged user. Because of this, I cannot use AJAX.

Only if I'm logged to that page on other tabs. But I want to login to that page in the background and automatically. The solution may be maybe iframe tag, but Chrome/Chromium don't allow me to read and manipulate with iframe content. Is there any solution how to manipulate in the page as the logged user? Thank you

Answer 1

You can emulate form submit through javascript from a background page. First you need to carefully inspect what data is sent through the login form and to which URL (form could be altered with javascript before sending so you need to know what actually is sent, not just what's in <form> element). You can use Chrome's console for simple stuff, if it is not enough then there is Tamper Data plugin for Firefox, and for hardcore traffic inspection you can use Wireshark analyzer.

Then in a background page (I am using jQuery here):

$.ajax({
    url: "https://login_form.html",
    type: "GET",
    dataType: "html",
    success: function() {
        $.ajax({
            url: "https://login_form_submits_to.html",
            type: "POST",
            data: {
                    "username": "username",
                    "password": "password",
                    "extra_field": "value"
            },
            dataType: "html",
            success: function(data) {
                   //now you can parse your report screen
            }
        });
    }
});

Good thing is that Chrome persists session and cookies, so it is like logging in manually (if you now open your site in the browser you should be logged in).