How to pass Basic Authentication when call Web API in C#? Example.

Posted on April 27, 2019by Codox Word with No comments
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Security.Principal;
using System.Threading;
using System.Web;
using System.Web.Http.Controllers;
using System.Web.Http.Filters;

namespace BasicAuthentication
{
    public class BasicAuthenticationAttribute : AuthorizationFilterAttribute
    {
        public override void OnAuthorization(HttpActionContext actionContext)
        {
            if (actionContext.Request.Headers.Authorization != null)
            {
                var authToken = actionContext.Request.Headers
                  .Authorization.Parameter;

                // decoding authToken we get decode value in 'Username:Password' format
                var decodeauthToken = System.Text.Encoding.UTF8.GetString(
                  Convert.FromBase64String(authToken));

                // spliting decodeauthToken using ':'
                var arrUserNameandPassword = decodeauthToken.Split(':');

                // at 0th postion of array we get username and at 1st we get password
                if (IsAuthorizedUser(arrUserNameandPassword[0], arrUserNameandPassword[1]))
                {
                    // setting current principle
                    Thread.CurrentPrincipal = new GenericPrincipal(
                      new GenericIdentity(arrUserNameandPassword[0]), null);
                }
                else
                {
                    actionContext.Response = actionContext.Request
                      .CreateResponse(HttpStatusCode.Unauthorized);
                }
            }
            else
            {
                actionContext.Response = actionContext.Request
                  .CreateResponse(HttpStatusCode.Unauthorized);
            }
        }

        public static bool IsAuthorizedUser(string Username, string Password)
        {
            // In this method we can handle our database logic here...
            return Username == "bhushan" && Password == "demo";
        }
    }
}
----------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace BasicAuthentication.Controllers
{
 
    public class ValuesController : ApiController
    {
        [BasicAuthentication]
        public string Get()
        {
            return "WebAPI Method Called";
        }
    }
}

/*$.ajax({
type:'GET',
url:"api/values/Get",
datatype:'json',
headers:
    {
        Authorization : 'Basic '+ btoa(username+':'+password)
    },
    success: function(data){
    },
    error: function(data){
    }
});*/

How to make Tableau interface? Example.

Posted on April 08, 2019by Codox Word with No comments
<!DOCTYPE html>
<meta charset="utf-8">
<!-- For Dimensions & drag n drop functionality-->
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<!-- SYNCFUSION LIBRARIES -->
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<!-- BOOTSTRAP LIBRARIES -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- D3 CHART LIBRARIES -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .modal-content {
        background-color: #fefefe;
        margin-left: 743px;
        padding: 9px;
        border: 1px solid #888;
        width: 22%;
        margin-top: 192px;
    }
</style>
<script>
    var RowID = "";
    function PopUp(rowId) {
        debugger
        $("#myModal").show();
        var innerDiv = document.createElement('div');
        innerDiv.id = rowId;
        RowID = rowId;
        innerDiv.className = 'modal-content';
        $("#myModal").appendChild(innerDiv);
        innerDiv.innerHTML = "Remove";
    }
    function Remove()
    {
        debugger;
        $('#div2').text(RowID).empty();
        $("#myModal").hide();
        $("#dvTable").show();
        $("#dvColumn").hide();

    }
    $(document).ready(function () {
        debugger
        var modal = document.getElementById('myModal');
        window.onclick = function (event) {
            if (event.target == modal) {
                debugger
                $("#myModal").hide();
            }
        }
    });
</script>

<!-- CSS for D3 chart -->
<style>
    .pieTooltip {
        background: #eee;
        box-shadow: 0 0 5px #999999;
        color: #333;
        font-size: 12px;
        left: 130px;
        padding: 10px;
        position: absolute;
        text-align: center;
        top: 95px;
        width: 80px;
        z-index: 10;
        display: block;
        opacity: 0;
    }

    .legend {
        font-size: 12px;
    }

    rect {
        cursor: pointer; /* NEW */
        stroke-width: 2;
    }

        rect.disabled { /* NEW */
            fill: transparent !important; /* NEW */
        }

    body {
        background-color: #F1F3F3;
    }

    .axis {
        font: 15px sans-serif;
    }

        .axis path,
        .axis line {
            fill: none;
            stroke: #D4D8DA;
            stroke-width: 1px;
            shape-rendering: crispEdges;
        }

    .barToolTip {
        position: absolute;
        display: none;
        min-width: 80px;
        height: auto;
        background: none repeat scroll 0 0 #ffffff;
        border: 1px solid #6F257F;
        padding: 14px;
        text-align: center;
    }
</style>
<!-- CSS for drag n drop functionality -->
<style type="text/css">
    .txt {
        width: 50%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
    }

    .auto-style1 {
        width: 100%;
        border: solid;
        border-color: black;
    }

    .auto-style2 {
        width: 366px;
    }

    .auto-style3 {
        width: 78px;
    }

    #div1 {
        float: left;
        width: 200px;
        height: 300px;
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
    }

    #div2 {
        float: left;
        width: 500px;
        height: 30px;
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
    }

    #div3 {
        float: left;
        width: 200px;
        height: 300px;
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
    }

    #div4 {
        float: left;
        width: 500px;
        height: 30px;
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
    }

    .auto-style4 {
        width: 366px;
        font-size: xx-large;
    }

    .mt10 {
        margin-top: 10px;
    }

    .mb10 {
        margin-bottom: 10px;
    }
</style>
<!-- Script for Excel file browse functionality -->
<script>
    function isJSON(something) {
        if (typeof something != 'string')
            something = JSON.stringify(something);
        try {
            JSON.parse(something);
            return true;
        } catch (e) {
            return false;
        }
    }
    var ExcelToJSON = function () {
        this.parseExcel = function (file) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var data = e.target.result;
                var workbook = XLSX.read(data, {
                    type: 'binary'
                });
                handleFileSelect1();
                workbook.SheetNames.forEach(function (sheetName) {
                    var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
                    var x = XL_row_object[0];

                    var json_object1 = JSON.stringify(XL_row_object);
                    var i = 1;
                    $.each(x, function (key, val) {
                        if (isNaN(val)) {
                            debugger
                            var rowId="empid"+i;
                            var row = '<tr draggable="true" ondragstart="drag(event)" id="empid' + i + '" ><td> ' + key + ' </td></tr>' + '<br>'
                            $("tr").click(function () {
                                var table = this.id;
                            });
                            $("#tblDimensions").append(row);
                            i = i + 1;
                        } else {
                            var row = '<tr draggable="true" onClick="OpenMeasurePopUp();" ondragstart="drag(event)" id="empid' + i + '" ><td> ' + key + ' </td></tr>' + '<br>'
                            $("#tblMeasures").append(row);
                            i = i + 1;
                        }
                    });

                    $('input[id=hdJson]').val(json_object1);

                    BindTable(XL_row_object);
                })
            };
            reader.onerror = function (ex) {
                console.log(ex);
            };
            reader.readAsBinaryString(file);
        };
    };
    function handleFileSelect(evt) {
        var files = evt.target.files;
        $('input[id=GetColPushValue]').val(files);
        var xl2json = new ExcelToJSON();
        xl2json.parseExcel(files[0]);
    }
    function handleFileSelect1() {

        var CalFieldName;
        var name = $("#Text1").val();
        var prevValue = $('input[id=hdJson]').val();
        if (prevValue == "" || prevValue == null) {

        }
        else {
            var originalValue = $("#hdJson").val();
            var p = [];
            var json1 = JSON.parse(originalValue);
            let newinfo = json1.map(function (person) {
                var arr = [];
                $.each(json1, function (key1, value) {
                    $.each(value, function (k, v) {

                        CalFieldName = $("#txtCalculatedHeader").val();
                        CalMeasure = $("#txtMeasure").val();
                        var col = $("#txtCalculationOn").val();// Passing here calculated name like (Name,Address etc.) field
                        var row = $("#txtMeasureValue").val();// Passing here calculated name like (Amount etc.) field
                        if (col == k) {

                            arr.push({ [CalFieldName]: v });
                        }
                        if (row == k) {

                            arr.push({ [CalMeasure]: v });
                        }
                    });
                });
                p = Array.from(arr);
            });
            var x = p[0];

            var i;
            var rowCount = $('#tblDimensions tr').length;
            if (rowCount == "" || rowCount == null) {
                i = 1;
            }
            else {
                i = rowCount + 1;
            }
            $.each(p[0], function (key, val) {

                if (isNaN(val)) {
                    var keyType = "";
                    var selected = "";
                    if (key = CalFieldName) {

                        key = $("#txtCalculatedHeader").val();
                        selected = $('select#dllDimensionsType option:selected').val();
                    }
                    if (selected == "Upper") {
                        var row = '<tr draggable="true" ondragstart="drag(event)" id="' + selected + i + '"><td> ' + key + ' </td></tr>' + '<br>';
                    }
                    else if (selected == "Lower") {
                        var row = '<tr draggable="true" ondragstart="drag(event)" id="' + selected + i + '"><td> ' + key + ' </td></tr>' + '<br>';
                    }
                    $("tr").click(function () {
                        var table = this.id;
                    });
                    $("#tblDimensions").append(row);
                    i = i + 1;
                }
                else {

                    var keyType = "";
                    var selected1 = "";
                    if (key == CalMeasure) {

                        key = $("#txtMeasure").val();
                        selected1 = $('select#ddlMeasuresType option:selected').val();
                    }
                    if (selected1 == "Count") {
                        var row = '<tr draggable="true" ondragstart="drag(event)" id="' + selected1 + i + '"><td> ' + key + ' </td></tr>' + '<br>';
                    }
                    $("tr").click(function () {
                        var table = this.id;
                    });
                    $("#tblMeasures").append(row);
                    i = i + 1;
                }

            });
            var obj = JSON.parse(originalValue);
            let newinfo1 = obj.map(function (person) {
                $.each(person, function (key, val) {

                    CalFieldName = $("#txtCalculatedHeader").val();
                    CalMeasure = $("#txtMeasure").val();
                    var col = $("#txtCalculationOn").val();// Passing here calculated name like (Name,Address etc.) field
                    var row = $("#txtMeasureValue").val();// Passing here calculated name like (Amount etc.) field
                    if (col == key) {

                        return addKeyValue(person, CalFieldName, val);

                    }
                    if (row == key) {

                        return addKeyValue(person, CalMeasure, val);
                    }
                });
            });

            var json_object1 = JSON.stringify(obj);

            $('input[id=hdJson]').val(json_object1);

            $('#myModalDimension').modal('hide');
            $('#myModalMeasure').modal('hide');

            $("#txtCalculatedHeader").val('').innerText;
            $("#txtCalculationOn").val('').innerText;
            $('#ddlFunctionType').change(function () {
                $('#ddlFunctionType').prop('selectedIndex', 0).innerText;
            });
        }
    }
    function addKeyValue(obj, key, data) {
        obj[key] = data;
    }
</script>
<!-- Script for drag n drop functionality -->
<script>
    var arrPush = [];
    //This code for upper two div (dimnesions & column)
    function allowDrop(ev) {
        ev.preventDefault();
    }
    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {

        for (var i = arrPush.length; i > 0; i--) {
            arrPush.pop();
        }
        var div2Value = $("#div2").text().trim();
        var div4Value = $("#div4").text().trim();
        var t;
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        debugger;
        if (div2Value == null || div2Value == "" && ev.path[0].id != "div1") {
            debugger;
            var something = ev.target.appendChild(document.getElementById(data).cloneNode(true));
            var txt = something.innerText.trim();
            $("#div2").append(something);
            $("#div2 tr").on('click', function () {
                debugger
                PopUp(txt);
            });
        }
        else if (div2Value == null || div2Value == "" && ev.path[0].id == "div1") {
            ev.target.appendChild(document.getElementById(data));
        }
        else {
            ev.target.appendChild(document.getElementById(data).cloneNode(false));
            $("#div2").empty();
        }
        var hdColumnVal = ev.target.innerText.trim();
        $('input[id=hdColumnValue]').val(hdColumnVal);
        var type = data.substring(0, 5);

        if (div2Value == "" && div4Value == "" && ev.path[0].id != "div1") {

            getValueByColumn(hdColumnVal);
            $("#dvTable").hide();
            $("#dvColumn").show();
            $("#barchart").hide();
            $("#piechart").hide();
            $("#typeSelect").show();
        }
        else if (div2Value == "" && div4Value == "" && ev.path[0].id == "div1") {

            GetValueByDimensions(hdColumnVal, div4Value);
            $("#dvTable").show();
            $("#dvColumn").hide();
            $("#barchart").hide();
            $("#piechart").hide();
            $("#typeSelect").show();
        }
        else if (div2Value == "" && div4Value != "") {

            GetValueByDimensions(hdColumnVal, div4Value);
            $("#dvTable").hide();
            $("#dvColumn").hide();
            $("#barchart").show();
            $("#piechart").hide();
            $("#typeSelect").show();
        }
        else if (div2Value != "" && div4Value == "") {

            GetValueByDimensions(hdColumnVal, div4Value);
            $("#dvTable").show();
            $("#dvColumn").hide();
            $("#barchart").hide();
            $("#piechart").hide();
            $("#typeSelect").show();
        }
        else if (div2Value != "" && div4Value != "") {

            getValueByColumn(div4Value);
            $("#dvTable").hide();
            $("#dvColumn").show();
            $("#barchart").hide();
            $("#piechart").hide();
            $("#typeSelect").show();
        }
    }
    //Display column records(by drag n drop dimensions)
    function getValueByColumn(text) {

        var p = [];
        var v = $("#hdJson").val();
        var json = JSON.parse(v);
        var dim = [];
        $.each(json, function (key1, value) {
            $.each(value, function (k, v) {
                var col = text;
                if (col == k) {

                    dim.push({ [text]: v });
                }
            });
            p = Array.from(dim);
        });
        if (p.length > 0) {
            BindColumn(p);
            $("#dvTable").hide();
            $("#dvColumn").show();
        }
        else {
            $("#dvTable").show();
            $("#dvColumn").hide();
        }
    }
    //This code for lower two div (measures & row)
    function allowDrop1(ev1) {
        ev1.preventDefault();
    }
    function drag1(ev1) {
        ev1.dataTransfer.setData("text", ev1.target.id);
    }
    function drop1(ev1) {
        debugger
        for (var i = arrPush.length; i > 0; i--) {
            arrPush.pop();
        }
        var div2Value = $("#div2").text().trim();
        var div4Value = $("#div4").text().trim();
        ev1.preventDefault();
        var data = ev1.dataTransfer.getData("text");
        debugger
        if (div4Value == null || div4Value == "" && ev1.path[0].id != "div3") {
            ev1.target.appendChild(document.getElementById(data).cloneNode(true));
        }
        else if (div4Value == null || div4Value == "" && ev1.path[0].id == "div3") {
            ev1.target.appendChild(document.getElementById(data));
        }
        else {
            ev1.target.appendChild(document.getElementById(data).cloneNode(false));
            $("#div4").empty();
        }
        var rowVal = ev1.target.innerText.trim();
        var hdColumnVal = $("#hdColumnValue").val().trim();
        var hdRow = $("#hdRow").val(rowVal);
        var type = data.substring(0, 5);
        if (div2Value == "" && rowVal != null) {
            getValueByRow(rowVal);
        }
        else {
            var currentID = ev1.currentTarget.id;
            if (currentID == "div4") {

                GetValueByDimensions(hdColumnVal, rowVal);
                $("#dvTable").hide();
                $("#dvColumn").hide();
                $("#typeSelect").show();
            }
            if (currentID == "div3") {

                getValueByColumn(hdColumnVal);
                $("#dvTable").hide();
                $("#dvColumn").show();
                $("#barchart").hide();
                $("#piechart").hide();
                $("#typeSelect").show();
            }
            if (div2Value == "" || div2Value == null) {

                GetValueByDimensions(hdColumnVal, rowVal);
                $("#dvTable").hide();
                $("#dvColumn").show();
                $("#typeSelect").show();
            }
        }
    }
    //Display row records(by drag n drop measures)
    function getValueByRow(text) {

        var p = [];
        var v = $("#hdJson").val();
        var json = JSON.parse(v);

        var dim = [];
        $.each(json, function (key1, value) {
            $.each(value, function (k, v) {
                var col = text;
                if (col == k) {

                    dim.push({ [col]: v });
                }
            });
            p = Array.from(dim);
        });

        var kk = p;

        var qty = $('#div4 tr td').text(text);

        if (qty.length > 0) {

            BindColumn(p);
            $("#dvTable").hide();
            $("#dvColumn").show();
        }
        else {

            $("#dvTable").show();
            $("#dvColumn").hide();
        }
    }
    //Get column & row values in array
    function GetValueByDimensions(hdColumnVal, rowVal) {
        {


            var v = $("#hdJson").val();
            var json = JSON.parse(v);
            var dim = [];
            var measure = [];
            $.each(json, function (key1, value) {
                $.each(value, function (k, v) {
                    var col = hdColumnVal;
                    if (col == k) {
                        dim.push(v);
                    }
                    else if (rowVal == k) {
                        measure.push(v);
                    }
                });
            });
            //For Dimensions
            var AX = $.map(dim, function (value, index) {
                var divColumnValue = hdColumnVal;
                //var type = t;


                if (type == "Upper") {
                    return [{ id: index, divColumnValue: value.toUpperCase() }];
                }
                else if (type == "Lower") {
                    return [{ id: index, divColumnValue: value.toLowerCase() }];
                }
                else {
                    return [{ id: index, divColumnValue: value }];
                }
                var type = null;
            });
            //For Measures
            var AY = $.map(measure, function (value, index) {
                var divRowValue = rowVal;
                return [{ id: index, divRowValue: value }];
            });
            var res = AX.map(x => Object.assign(x, AY.find(y => y.id == x.id)))
            $.each(res, function (index, obj) {
                var bind = { x: res[index].divColumnValue, value: res[index].divRowValue };
                arrPush.push(bind);
            });
            if ($("#div4").find('td').text().trim() == "" || $("#div4").find('td').text().trim() == null) {

                $("#dvExportMenu").hide();
                $("#typeSelect").hide();
                $('#dvTable').hide();
                $('#dvColumn').show();
            }
            else {


                barChart(arrPush);
                $("#barchart").show();
                $("#piechart").hide();
                $('#dvTable').hide();
                $('#dvColumn').hide();
                $("#typeSelect").show();


            }
        }
    }
    //bar chart
    function barChart(arrPush) {
        debugger
        d3.selectAll("g > *").remove();
        var svg = d3.select("#barchart svg"),
        margin = { top: 20, right: 20, bottom: 30, left: 50 },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;
        var barToolTip = d3.select("body").append("div").attr("class", "barToolTip");
        var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
            y = d3.scaleLinear().rangeRound([height, 0]);
        var colours = d3.scaleOrdinal().range(["steelblue"]);
        var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        var data = arrPush;//Array data
        x.domain(data.map(function (d) { return d.x; }));
        y.domain([0, d3.max(data, function (d) { return d.value; })]);
        g.append("g").attr("class", "axis axis--x").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));
        g.append("g").attr("class", "axis axis--y").call(d3.axisLeft(y).ticks(5).tickFormat(function (d) { return parseInt(d); }).tickSizeInner([-width])).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", "0.71em").attr("text-anchor", "end").attr("fill", "#5D6971").text("Average " + "(£) " + $("#hdRow").val());
        g.selectAll(".bar").data(data).enter().append("rect").attr("x", function (d) { return x(d.x); }).attr("y", function (d) { return y(d.value); })
            .attr("width", x.bandwidth())
            .attr("height", function (d) { return height - y(d.value); })
            .attr("fill", function (d) { return colours(d.x); })
            .on("mousemove", function (d) {
                barToolTip
                 .style("left", d3.event.pageX - 50 + "px")
                 .style("top", d3.event.pageY - 70 + "px")
                 .style("display", "inline-block")
                 .html((d.x) + "<br>" + "£" + (d.value));
            }).on("mouseout", function (d) { barToolTip.style("display", "none"); });
    }
    //pie chart
    function pieChart(arrPush) {
        d3.selectAll("g > *").remove();
        var dataset = arrPush;//Array data
        var colorScheme = ["#E57373", "#BA68C8", "#7986CB", "#A1887F", "#90A4AE", "#AED581", "#9575CD", "#FF8A65", "#4DB6AC", "#FFF176", "#64B5F6", "#00E676"];
        var margin = { top: 50, bottom: 50, left: 50, right: 50 };
        var width = 500 - margin.left - margin.right,
            height = width,
            radius = Math.min(width, height) / 2;
        var donutWidth = 75;
        var legendRectSize = 18;
        var legendSpacing = 4;

        dataset.forEach(function (item) {
            item.enabled = true;
        });
        var color = d3.scaleOrdinal().range(["#E57373", "#BA68C8", "#7986CB", "#A1887F", "#90A4AE", "#AED581", "#9575CD", "#FF8A65", "#4DB6AC", "#FFF176", "#64B5F6", "#00E676"]);
        var svg = d3.select("#piechart")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        var arc = d3.arc().outerRadius(radius - 10).innerRadius(radius - donutWidth);
        var pie = d3.pie().sort(null).value(function (d) { return d.value; });
        var pieTooltip = d3.select("#piechart").append('div').attr('class', 'pieTooltip');
        pieTooltip.append('div').attr('class', 'x');
        pieTooltip.append('div').attr('class', 'count');
        pieTooltip.append('div').attr('class', 'percent');
        var path = svg.selectAll('path').data(pie(dataset)).enter().append('path').attr('d', arc).attr('fill', function (d, i) {
            return color(d.data.x);
        }).each(function (d) { this._current = d; });
        path.on('mouseover', function (d) {
            var total = d3.sum(dataset.map(function (d) {
                return (d.enabled) ? d.value : 0;
            }));
            var percent = Math.round(1000 * d.data.value / total) / 10;
            pieTooltip.select('.x').html(d.data.x.toUpperCase()).style('color', 'black');
            pieTooltip.select('.count').html(d.data.value);
            pieTooltip.select('.percent').html(percent + '%');
            pieTooltip.style('display', 'block');
            pieTooltip.style('opacity', 2);
        });
        path.on('mousemove', function (d) {
            pieTooltip.style('top', (d3.event.layerY + 10) + 'px').style('left', (d3.event.layerX - 25) + 'px');
        });
        path.on('mouseout', function () {
            pieTooltip.style('display', 'none');
            pieTooltip.style('opacity', 0);
        });
        var legend = svg.selectAll('.legend').data(color.domain()).enter().append('g').attr('class', 'legend').attr('transform', function (d, i) {
            var height = legendRectSize + legendSpacing;
            var offset = height * color.domain().length / 2;
            var horz = -2 * legendRectSize;
            var vert = i * height - offset;
            return 'translate(' + horz + ',' + vert + ')';
        });
        legend.append('rect').attr('width', legendRectSize).attr('height', legendRectSize).style('fill', color).style('stroke', color).on('click', function (x) {
            var rect = d3.select(this);
            var enabled = true;
            var totalEnabled = d3.sum(dataset.map(function (d) {
                return (d.enabled) ? 1 : 0;
            }));
            if (rect.attr('class') === 'disabled') {
                rect.attr('class', '');
            } else {
                if (totalEnabled < 2) return;
                rect.attr('class', 'disabled');
                enabled = false;
            }
            pie.value(function (d) {
                if (d.label === label) d.enabled = enabled;
                return (d.enabled) ? d.value : 0;
            });
            path = path.data(pie(dataset));
            path.transition().duration(750).attrTween('d', function (d) {
                var interpolate = d3.interpolate(this._current, d);
                this._current = interpolate(0);
                return function (t) {
                    return arc(interpolate(t));
                };
            });
        });
        legend.append('text').attr('x', legendRectSize + legendSpacing).attr('y', legendRectSize - legendSpacing).text(function (d) { return d; })
    };
    //Chart selection by dropdown.
    function switchType() {
        var select = document.getElementById("typeSelect").value;
        if (select == "pie") {

            $("#piechart").empty();
            $("#barchart").hide();
            $('#dvTable').hide();
            $('#dvColumn').hide();
            pieChart(arrPush);
            $("#piechart").show();
            $("#typeSelect").show();

        }
        else if (select == "bar") {
            barChart(arrPush);
            $("#barchart").show();
            $("#piechart").hide();
            $('#dvTable').hide();
            $('#dvColumn').hide();
            $("#typeSelect").show();
        }
    }
    //Bind table when browse excel.
    function BindTable(XL_row_object) {

        var col = [];
        for (var key in XL_row_object[0]) {
            col.push(key);
        }
        $('#dvTable').empty();
        var grid = new ej.grids.Grid({
            dataSource: XL_row_object,
            allowSorting: true,
            allowPaging: true,
            allowFiltering: true,
            filterSettings: { type: 'Excel' },
            allowResizing: true,
            allowScrolling: true,
            commonWidth: 100,
            height: 200,
            pageSettings: { pageSize: 8, pageCount: 3, pageSizes: [10, 20, 50, 100] },
            columns: col,
        });
        grid.appendTo('#dvTable');
    }
    //Bind table accroding to column & row (dimesnions & measures).
    function BindColumn(XL_row_object) {

        var col = [];
        for (var key in XL_row_object[0]) {
            col.push(key);
        }
        $('#dvColumn').empty();
        var grid = new ej.grids.Grid({
            dataSource: XL_row_object,
            allowSorting: true,
            allowPaging: true,
            allowFiltering: true,
            filterSettings: { type: 'Excel' },
            allowResizing: true,
            allowScrolling: true,
            commonWidth: 100,
            height: 200,
            pageSettings: { pageSize: 8, pageCount: 3, pageSizes: [10, 20, 50, 100] },
            columns: col,
        });
        grid.appendTo('#dvColumn');
    }

</script>
<form enctype="multipart/form-data">
    <input type="hidden" id="hdGetArrayValue" value="" />
    <input type="hidden" id="hdRow" value="" />
    <input type="hidden" id="GetColPushValue" value="" />
    <input type="hidden" id="GetArray" value="" />
    <input type="hidden" id="hdColumnValue" value="" />
    <input type="hidden" id="hd" value="" />
    <input id="upload" type="file" name="files[]">
    <div id="storeInformation">
        <input type="hidden" id="hdJson" value="" />
    </div>
    <div id="myModal" class="modal">
        <div class="modal-content" onclick="Remove();">
            Remove
        </div>
    </div>
    <table class="auto-style1">
        <tr>
            <td class="auto-style4">
                <strong>Tableau System</strong>
            </td>
            <td class="auto-style3">
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="auto-style2">
                &nbsp;
            </td>
            <td class="auto-style3">
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="auto-style2">
                <span style="color: rgb(0, 0, 0); font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 700; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Dimensions</span>
            </td>
            <td class="auto-style3">
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="auto-style2">
                <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="overflow-y: scroll" class="component">
                    <table id="tblDimensions">
                        <tbody></tbody>
                    </table>
                </div>
            </td>
            <td class="auto-style3">
                Columns
            </td>
            <td>
                <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" height="53px" width="640px" class="ui-layout-center">
                </div>
            </td>
        </tr>
        <tr>
            <td class="auto-style2">
                <span style="color: rgb(0, 0, 0); font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 700; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Measures</span>
            </td>
            <td class="auto-style3">
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td class="auto-style2">
                <div id="div3" ondrop="drop1(event)" ondragover="allowDrop1(event)" style="overflow-y: scroll">
                    <table id="tblMeasures">
                        <tbody></tbody>
                    </table>
                </div>
            </td>
            <td class="auto-style3">
                Rows
            </td>
            <td>
                <div id="div4" ondrop="drop1(event)" ondragover="allowDrop1(event)" height="53px"
                     width="640px">
                </div>
            </td>
        </tr>
        <tr>
            <td class="auto-style2">
                <div id="dvTable">

                </div>
                <div id="dvColumn">

                </div>
            </td>
            <td class="auto-style2">
                <select id="typeSelect" onchange="switchType()">
                    <option value="bar">Bar</option>
                    <option value="line">Line</option>
                    <option value="pie">Pie</option>
                </select>

                <div id="barchart">
                    <svg width="960" height="500"></svg>
                </div>
                <div id="piechart">
                    <svg width="960" height="500"></svg>
                </div>
                <!--<div id="chartContainer" style="height: 370px; width: 250%;">
                </div>-->
                <div id="dvExportMenu" class="pull-right" style="display: none">
                    <input id="btnPDF" type="button" value="Download as PDF" onclick="MyChartpdf()" />
                    <input id="btnXLSX" type="button" value="Download as XLS" onclick="MyChartXlsx()" />
                </div>
            </td>
        </tr>
    </table>
</form>

<!-- Modal Dimension -->
<div class="modal fade" id="myModalDimension" tabindex="-1" role="dialog" aria-labelledby="myModalDimensionCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <!--<div class="modal-header">
                <h5 class="modal-title" id="myModalDimensionLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>-->
            <div class="modal-body">
                Calculated Field : <input type="text" id="txtCalculatedHeader" class="form-control">

                Calculation On : <input type="text" id="txtCalculationOn" class="form-control mt10"><br />
                Functions :
                <select id="dllDimensionsType" class="form-control mt10">

                    <option selected="selected">Select</option>
                    <option value="Upper">Upper</option>
                    <option value="Lower">Lower</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" id="Button1" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Measure -->
<div class="modal fade" id="myModalMeasure" tabindex="-1" role="dialog" aria-labelledby="myModalMeasureCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <!--<div class="modal-header">
                <h5 class="modal-title" id="myModalMeasureLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>-->
            <div class="modal-body">
                Calculated Field : <input type="text" id="txtMeasure" class="form-control">

                Calculation On : <input type="text" id="txtMeasureValue" class="form-control mt10"><br />
                Functions :
                <select id="ddlMeasuresType" class="form-control mt10">
                    <option selected="selected">Select</option>
                    <option value="Count">Count</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" id="Button2" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<script>
    document.getElementById('upload').addEventListener('change', handleFileSelect, false);
    document.getElementById('Button1').addEventListener('click', handleFileSelect1, false);
    document.getElementById('Button2').addEventListener('click', handleFileSelect1, false);
</script>

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

Posted on April 08, 2019by Codox Word with No comments
//Calling API's--------------------------------------------------
//var Api = "http://localhost:22352/";
//---------------------------------------------------------------
$(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"
        }
      }
  }
}
Subscribe to: Comments (Atom)