clear-urls-browser-extension/popup_new.js

/**
 * Initialize the UI.
 * 
 */
function init()
{
  setGlobalStatus();
  changeStatistics();
  setTabcounter();
}

/**
 * Get the globalCounter value from the browser storage
 * @param  {(data){}    Return value form browser.storage.local.get
 */
function changeStatistics(){
  var element = $("#statistics_value");
  var elGlobalPercentage = $("#statistics_value_global_percentage");
  var elProgressbar_blocked = $('#progress_blocked');
  var elProgressbar_non_blocked = $('#progress_non_blocked');
  var elTotal = $('#statistics_total_elements');
  var globalPercentage = 0;
  var globalCounter;
  var globalURLCounter;

  browser.storage.local.get('globalCounter', function(data){   
    if(data.globalCounter){
      globalCounter = data.globalCounter;
    }
    else {
      globalCounter = 0;
    }

    element.text(globalCounter.toLocaleString());
  });

  browser.storage.local.get('globalURLCounter', function(data){   
    if(data.globalURLCounter){
      globalURLCounter = data.globalURLCounter;
    }
    else {
      globalURLCounter = 0;
    }

    globalPercentage = ((globalCounter/globalURLCounter)*100).toFixed(3);

    if(isNaN(Number(globalPercentage))) globalPercentage = 0;

    elGlobalPercentage.text(globalPercentage+"%");
    elProgressbar_blocked.css('width', globalPercentage+'%');
    elProgressbar_non_blocked.css('width', (100-globalPercentage)+'%');
    elTotal.text(globalURLCounter);
  });
};

/**
 * Change the value of the globalStatus.
 * Call by onChange()
 * 
 */
function changeGlobalStatus() {
  var element = $('#globalStatus').is(':checked');

  browser.storage.local.set({'globalStatus': element});
};

/**
 * Set the values for the global status switch
 */
function setGlobalStatus() {
  var element = $('#globalStatus');

  browser.storage.local.get('globalStatus', function(data) {
    if(data.globalStatus) {
      element.prop('checked', true);
    }
    else if(data.globalStatus === null || typeof(data.globalStatus) == "undefined"){
      element.prop('checked', true);
      browser.storage.local.set({'globalStatus': true});
    }
    else {
      element.prop('checked', false);
    }
  });
};

/**
 * Change the value of the badgedStatus.
 * Call by onChange()
 * 
 */
function changeTabcounter() {
  var element = $('#tabcounter').is(':checked');

  browser.storage.local.set({'badgedStatus': element});
};

/**
 * Set the values for the tabcounter switch
 */
function setTabcounter() {
  var element = $('#tabcounter');

  browser.storage.local.get('badgedStatus', function(data) {
    if(data.badgedStatus)
    {
      element.prop('checked', true);
    }
    else if(data.badgedStatus === null || typeof(data.badgedStatus) == "undefined"){
      element.prop('checked', true);
      browser.storage.local.set({'badgedStatus': true});
    }
    else {
      element.prop('checked', false);
    }
  });
}

/**
 * Reset the global statistic
 * 
 */
function resetGlobalCounter(){
  browser.storage.local.set({"globalCounter": 0});
  browser.storage.local.set({"globalURLCounter": 0});
};

$(document).ready(function(){
  init();
  $("#globalStatus").on("change", changeGlobalStatus);
  $('#reset_counter_btn').on("click", resetGlobalCounter);
  $('#tabcounter').on('change', changeTabcounter);

  browser.storage.onChanged.addListener(changeStatistics);
});