Close the Chrome Extension automatically

Question

I am trying to close the extension automatically after saving my data.

Here is the code which is used to save the data:

$(function(){

    function  displayMessage(string){
        alert(string);
    }

    var submit = $('#submit');
    $('#create').submit(function(){
        $('#loading_image').html('<img src="images/wait.gif">');
        var user_email = localStorage.getItem('email');
        var api = localStorage.getItem("user_api_key");
        var auth = "apikey" +' ' +(user_email+":"+api);
        var favicon_key = localStorage.getItem("favicon_image_key");
        var peoples = [];
        var tags_peoples = $("#s2id_people .select2-choices .select2-search-choice");
        for (i=0; i<tags_peoples.length; i++) {
            peoples.push({"label": tags_peoples[i].childNodes[1].textContent})
        }
        var subjects = [];
        var tags_subjects = $("#s2id_subjects .select2-choices .select2-search-choice");
        for (i=0; i<tags_subjects.length;i++) {
            subjects.push({"label": tags_subjects[i].childNodes[1].textContent})
        }
        var places = [];
        var tags_places = $("#s2id_places .select2-choices .select2-search-choice");
        for (i=0; i<tags_places.length; i++) {
            places.push({"label": tags_places[i].childNodes[1].textContent})
        }
        var begin = $(".daterangepicker_start_input")[0].childNodes[1].value;
        var end = $(".daterangepicker_end_input")[0].childNodes[1].value;
        var data = {
            'content': $('#title').val(),
            'people': peoples,
            'subjects': subjects,
            'begin_date': begin,
            'end_date': end,
            'places': places
        }
        $.ajax({
            type: "POST",
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", auth);
                xhr.setRequestHeader("Content-Type","application/json");
                xhr.setRequestHeader("Accept","application/json");
            },
            url: "https://my_site_url/api/v3/data/",
            dataType: "json",
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function(data) {
                $('#loading_image').hide();
                window.location.href = 'saved.html';
                setTimeout(function(){
                    window.close();
                }, 2000);               
            },

            error: function(data) {
                $('#div1').text("Error on saving the data");
                $('#loading_image').hide();
            },
            complete: function() {
                submit.removeAttr('disabled').text('Save');
            }
        });

        return false;
    });
});

I am using this to close the extension

setTimeout(function(){window.close();}, 3000);

But this doesn't work. Should I write any EventListener to close the extension automatically?

Appreciated the answers

Answer 1

Consider this snippet from your code:

window.location.href = 'saved.html';
setTimeout(function(){
  window.close();
}, 2000);

This will not work. As soon as you change location, the page starts to navigate away, eventually wiping the window state and all timeouts set when the new page loads.

You need to set the timeout from saved.html for this to work.