How to create login by Chrome Extension using JavaScript? Example.

//Calling API's--------------------------------------------------

//var Api = "http://localhost:22352/";

//var Api = "http://dev.indagoapi.droisys.info/";

//var Api = "http://qanew.indagoapi.droisys.info/";

//var Api = "http://stage.indagoapi.droisys.info/";

var Api = "http://stage.sba.indagoapi.droisys.info/";

//var Api = "https://indagoapi.droisys.info/";

//---------------------------------------------------------------

$(function () {

    //Username hold 

    chrome.storage.local.get(['key_u'], function (result) {

        jQuery("label[for='Username']").html(result.key_u);

    });

    //Plan hold 

    chrome.storage.local.get(['key_p'], function (result) {        

        jQuery("label[for='Plan']").html(result.key_p);

    });

    //Look for LoginToken on Page Load

    chrome.storage.sync.get('LoginToken', function (data) {

        if (data.LoginToken != null) {

            $("#sectionLogin").hide();

            $("#sectionAction").show();

        } else {

            $("#sectionLogin").show();

            $("#sectionAction").hide();

        }

    });

    $("#txtPassword").keyup(function () {

        $("#txtPassword").attr('type', 'password');

    });

    //Login Button

    $("#btnLogin").click(function () {

        if ($("#txtUserName").val().length > 0 && $("#txtPassword").val().length > 0) {

          

            var objUser = {          

                IsActive: false,

                Role: '',

                ClientOS: '',

                UserAgent: '',

                IP: '',

                Latitude: '',

                Longitude: '',

                UserName: '',

                IsTermsAccepted: true,

                UserCookie: '',

            }

            var objUserActivity = {

                _id: null,

                ClientOS: '',

                UserAgent: '',

                IP: '',

                Latitude: '',

                Longitude: '',

                UserName: '',

                LoggedOnDate: '',

            }

            var iSavvy = (function () {

                var toolsDef = {};         

                toolsDef.SetSession = function (SessionName, SessionValue) {

                    localStorage.setItem(SessionName, SessionValue);

                };

                toolsDef.GetSession = function (SessionName) {

                    var SessionData = localStorage.getItem(SessionName);

                    return SessionData;

                };

                function ipLookUp() {

                    $.getJSON("http://ip-api.com/json/?callback=?", function (data) {

                        toolsDef.SetSession("Latitude", data.lat);

                        toolsDef.SetSession("Longitude", data.lon);

                        toolsDef.SetSession("IP", data.query);

                        objUserActivity.Latitude = data.lat;

                        objUserActivity.Longitude = data.lon

                        objUserActivity.IP = data.query;

                    });

                };

                function saveUserActivity() {

                    ipLookUp();

                    objUser.ClientOS = window.ui.os;

                    objUser.UserAgent = window.ui.browser;

                    toolsDef.SetSession("ClientOS", objUser.ClientOS);

                    toolsDef.SetSession("UserAgent", objUser.UserAgent);

                }

                var UserCookie = "";

                var IsTermsAccepted = "";

                if (UserCookie == 'I agree') {

                    saveUserActivity();

                }

                toolsDef.SetSession("UserCookie", UserCookie);

                if (UserCookie == 'None') {

                    UserCookie = 'I agree';

                }

                var Objdata = {

                    'UserName': $.trim($("#txtUserName").val()),

                    'Password': $.trim($("#txtPassword").val()),

                    'ClientOS': objUser.ClientOS,

                    'UserAgent': objUser.UserAgent,

                    'Latitude': objUserActivity.Latitude,

                    'Longitude': objUserActivity.Longitude,

                    'IP': objUserActivity.IP,

                    'IsTermsAccepted': false,

                    'UserCookie': UserCookie

                };

                //In Future this code need to replace and set from api or other way

                toolsDef.SetSession("OAuthToken", "jSzcOZo9rry6DOpLGS0TEzrTQswNVWku");

                toolsDef.SetSession("AppID", "zNiphaJww8e4qYEwJ96gVK5HTAAbAXdj");

                if (iSavvyConfig.Header.AppID == null || iSavvyConfig.Header.OAuth == null) {

                    iSavvyConfig.Header.OAuth = toolsDef.GetSession("OAuthToken");

                    iSavvyConfig.Header.AppID = toolsDef.GetSession("AppID");

                }

                var url = 'User/Login';

                $('label[id*=lblUsername').html('');

                $('label[id*=lblPlan').html('');

                jQuery("#btnCaptureScreen").hide();

                jQuery("#btnCaptureElement").hide();

                jQuery("#btnLogout").hide();

                jQuery("#btnCaptureHistory").hide();

                jQuery("#btnCaptureSelectedArea").hide();

                debugger;

                var x = Api + "api/User/Login";

                debugger;

                var result = $.ajax({

                    type: "POST",

                    url: x,

                    data: '{UserName: "' + $.trim($("#txtUserName").val()) + '",Password: "' + $.trim($("#txtPassword").val()) + '" ,ClientOS: "' + objUser.ClientOS + '" ,UserAgent: "' + objUser.UserAgent + '" ,Latitude: "' + objUserActivity.Latitude + '" ,Longitude: "' + objUserActivity.Longitude + '" ,IP: "' + objUserActivity.IP + '" ,IsTermsAccepted: "false",UserCookie: "I agree",}',

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    headers: { "ApplicationID": "58f5e3ea03102d23ec744380", "OAuth": "jSzcOZo9rry6DOpLGS0TEzrTQswNVWku", "AppID": "zNiphaJww8e4qYEwJ96gVK5HTAAbAXdj" },

                    success: function (result) {

                        debugger;

                        if (result.Status == 1) {

                            var u = result.Result.User.FirstName + " " + result.Result.User.LastName;

                            jQuery("label[for='Username']").html(u);

                            jQuery("label[for='Plan']").html("Plan:Basic");

                            var plan = "Plan:Basic";

                            jQuery("#btnCaptureScreen").show();

                            jQuery("#btnCaptureElement").show();

                            jQuery("#btnLogout").show();

                            jQuery("#btnCaptureHistory").show();

                            jQuery("#btnCaptureSelectedArea").show();

                            debugger;

                           

                            //sessionStorage.setItem("user", u);

                            

                            chrome.storage.local.set({ key_u: u }, function () {

                            });

                            chrome.storage.local.set({ key_p: plan }, function () {

                            });

                            $("#sectionLogin").hide();

                            $("#sectionAction").show();

                            debugger;

                        }

                        else if (result.Status == -2) {

                            debugger;

                            alert("Your account is inactive. Please contact your Administrator.");

                            $('label[id*=lblUsername').html('');

                            $('label[id*=lblPlan').html('');

                            jQuery("#btnCaptureScreen").hide();

                            jQuery("#btnCaptureElement").hide();

                            jQuery("#btnLogout").hide();

                            $("#sectionLogin").show();

                            $("#sectionAction").hide();

                            chrome.storage.sync.remove(['LoginToken']);

                            $("#sectionLogin").show();

                            $("#sectionAction").hide();

                            $('label[id*=k').html('');

                            if (toolsDef.routes[route]) {

                                window.location.href = toolsDef.routes[route].url;

                            }

                        }

                        else {

                            debugger;

                            alert("Invalid credentials, Please try again");

                            $("#sectionLogin").show();

                            $("#sectionAction").hide();

                            $('label[id*=lblUsername').html('');

                            $('label[id*=lblPlan').html('');

                            jQuery("#btnCaptureScreen").hide();

                            jQuery("#btnCaptureElement").hide();

                            jQuery("#btnLogout").hide();

                            chrome.storage.sync.remove(['LoginToken']);

                            $("#sectionLogin").show();

                            $("#sectionAction").hide();

                            $('label[id*=k').html('');

                            if (toolsDef.routes[route]) {

                                window.location.href = toolsDef.routes[route].url;

                            }

                            

                        }

                    }

                })

                toolsDef.Logout = function () {

                    iSavvy.NewUserActivityPost("2025");

                    var url = iSavvyConfig.GetAPIAction("User", iSavvyConfig.Apiroutes["User"].Logout);

                    //var url = 'CoreUser/Logout';

                    var Objdata = {

                    };

                    var result = iSavvy.PostCall(url, Objdata);

                    if (result.Status == 1) {

                        //

                        iSavvy.ShowAlert('success', 'Your logout has been successful');

                        iSavvy.CleareAllSession();

                        var pageURL = $(location).attr("href");

                        if (pageURL.indexOf("/SearchDocuments/SBAPackage") != -1)

                            window.location.href = '/Home/Index';

                    }

                    else {

                        //

                        iSavvy.ShowAlert('error', 'Logout Fail');

                    }

                }

   

                return toolsDef;

            })();

            var success = true

            if (success) {

                chrome.storage.sync.set({

                    'LoginToken': 'fashdjasfgduahskfdhakjdgjHKD'

                }, function () {

                    $("#sectionLogin").hide();

                    $("#sectionAction").show();

                });

            }

        }

        else {

            alert("Please enter login details");

        }

    });

    //Logout Button

    $("#btnLogout").click(function () {

        chrome.storage.sync.remove(['LoginToken']);

        $("#sectionLogin").show();

        $("#sectionAction").hide();

        $('label[id*=k').html('');

        if (toolsDef.routes[route]) {

            window.location.href = toolsDef.routes[route].url;

        }

    });

    //Entire Screen Capture Button

    $("#btnCaptureScreen").click(function () {

        var user= $("label[for='Username']").html();

        chrome.tabs.query({

            active: true,

            currentWindow: true

        },

            function (tabs) {

                debugger;

                var id= tabs[0].id;

                var url=tabs[0].url;

                var title=tabs[0].title;

                //

                //debugger;

                //var result = $.ajax({

                //    type: "POST",

                //    url: "http://localhost:49687/Api/Login/LastCapturedScreenDetails",

                //    data: '{username: "' + user + '",screeenID: "' + id + '" ,screenURL: "' + url + '"}',

                //    contentType: "application/json; charset=utf-8",

                //    dataType: "json",

                //    //headers: { "ApplicationID": "58f5e3ea03102d23ec744380", "OAuth": "jSzcOZo9rry6DOpLGS0TEzrTQswNVWku", "AppID": "zNiphaJww8e4qYEwJ96gVK5HTAAbAXdj" },

                //    success: function (response) {

                //        debugger;

                //        response.data;

                //    }

                //});

                //debugger;                

                chrome.tabs.captureVisibleTab(null, {

                    format: "png"

                },

                    function (src) {

                        debugger;

                        //var id = tabs[0].id + ".jpg";

                        var title = tabs[0].title + ".jpg";

                        debugger;

                        chrome.downloads.download({

                            url: src,

                            //filename: id,

                            filename: title,

                            saveAs: true

                       });

                    }

                );

           });

    });

    //Capture Selected Element Button

    $("#btnCaptureElement").click(function () {

        //var user = $("label[for='Username']").html();

        chrome.tabs.query({

            active: true,

            currentWindow: true

        },

            function (tabs) {

                debugger;

                chrome.tabs.executeScript(null, {

                    code: "alert(window.getSelection().toString());"

                })

                debugger;

            });

    });

    //Capture History

    $("#btnCaptureHistory").click(function () {

        chrome.tabs.query({

            active: true,

            currentWindow: true

        },

            function (tabs) {

                debugger;

                chrome.history.search({ text: '', maxResults: 10 }, function (tabs) {

                    debugger;

                    tabs.forEach(function (page) {

                        alert(page.url);

                    });

                });

                debugger;

            });

    });

    //Capture Selected Area Screen

    $("#btnCaptureSelectedArea").click(function () {

        chrome.tabs.query({

            active: true,

            currentWindow: true

        },

            function (tabs) {

                debugger;

             

                //chrome.tabs.getSelected(null, function (tabs) {

                //    debugger;

                //    chrome.tabs.executeScript({

                //        code: "document.addEventListener('mouseup', highlightSelectedBlock, false);function highlightSelectedBlock () {let elementWhereSelectionStart = window.getSelection().anchorNode;let closestBlockElement = elementWhereSelectionStart.parentNode; closestBlockElement.style.outline = '3px solid blue'; }"

                //    });

                //});

                debugger;

            });

    });

});

---------------

<!DOCTYPE html>

<html lang="en">

<head>

    <title>MyIndago.com</title>

    <!-- CSS -->

    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <link href="css/custom.css" rel="stylesheet" />

    <!-- JS -->

    <script src="js/jquery.min.js"></script>

    <script src="js/global.config.js"></script>

    <script src="js/appcore.js"></script>

    <script src="js/index.js"></script>

    <script src="js/iSavvy.global.config.js"></script>

    <script src="Scripts/jquery-3.3.1.js"></script>

</head>

<body>

    <div class="row centerform ">

        <div class="col-sm-4">

            <div class="row">

                <img src="images/osrLogo.png" class="center">

            </div>

            <br />

            <div id='sectionLogin'>

                <div class="row">

                    <div class="form-content">

                        <div class="form-group">

                            <label class="control-label">Enter your username</label>

                            <input type="text" id="txtUserName" class="form-control" placeholder="Username" />

                        </div>

                        <div class="input-password form-group">

                            <label class="control-label">Enter your password</label>

                            <input type="password" id="txtPassword" class="form-control" placeholder="Password" />

                            <a id="btnshow" class="btnshow"><i title="Show" class="icon-basic-eye"></i></a>

                        </div>

                    </div>

                </div>

                <div class="row">

                    <input type="button" class="btn btn-dark pull-right" style="padding-right:-15px" id="btnLogin" value="Sign In" />

                </div>

            </div>

            <div id='sectionAction' style='display:none'>

                <div class="row">

                    <table style="border:none;">

                        <tr>

                            <td rowspan="3"><img src="images/userProfile.png" class="img-responsive" alt="" height="64" width="64"></td>

                        </tr>

                        <tr>

                            <td>

                                <div class="profile-usertitle-name">

                                    <!--<input id="txtUser" type="text" />-->

                                    <label for="Username" style="vertical-align: middle" id="lblUsername"></label>

                                    <!--<label id="txtUser"></label>-->

                                    <!--Umesh Kumar Singh-->

                                </div>

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <div class="profile-usertitle-name">

                                    <!--<input id="txtPass" type="text" />-->

                                    <!--<label for="Plan" style="vertical-align: middle">Plan: Basic</label>-->

                                    <label for="Plan" style="vertical-align: middle" id="lblPlan"></label>

                                </div>

                            </td>

                        </tr>

                    </table>

                </div>

                <div class="row profile">

                    <div class="profile-sidebar">

                        <div class="profile-usermenu">

                            <ul class="nav">

                                <li>

                                    <a href="#" id="btnCaptureScreen">

                                        Capture Entire Screen

                                    </a>

                                </li>

                                <li>

                                    <a href="#" id="btnCaptureElement">

                                        Capture Selected Element

                                    </a>

                                </li>

                                <li>

                                    <a href="#" id="btnCaptureHistory">

                                        Capture History

                                    </a>

                                </li>

                                <li>

                                    <a href="#" id="btnCaptureSelectedArea">

                                        Capture Selected Area Screen

                                    </a>

                                </li>

                                

                                <li>

                                    <a href="#" id="btnLogout">

                                        Logout

                                    </a>

                                </li>

                            </ul>

                        </div>

                    </div>

                </div>

            </div>

            <div class="row">

                <p class="footer-text">

                    Version 2.8.0 &copy;2018 OneSource Regulatory. All rights reserved.

                </p>

            </div>

        </div>

    </div>

</body>

</html>

---------------------

{

  "manifest_version": 2,

  "name": "MyIndago",

  "description": "MyIndago - Taking drug searchs to next level",

  "version": "1.0",

  "background": { 

        "persistent": false,

"scripts": [ "js/index.js" ,"js/iSavvy.global.config.js"]

  },

  "icons": { 

"16": "images/icon16.png",

"32": "images/icon32.png",

"128": "images/icon128.png" 

},

  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

  "browser_action": {

    "default_icon": "images/icon16.png",

    "default_popup": "index.html"

  },

  "permissions": [ "storage" , "<all_urls>", "history", "activeTab","<all_urls>","sessions","tabs","tabCapture", "unlimitedStorage","downloads","cookies",

    "https://*/",

    "http://*/"],

  "web_accessible_resources": [

    "images/icon128.png"

  ],

  "commands": {

  "_execute_browser_action": {

        "suggested_key": {

          "default": "Ctrl+Shift+I"

        }

      }

  }

}

Share: