storage improvement

The command pattern has been implemented so that ClearURLs also works in private mode.
See also: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage

core_js/log.js

@@ -1,20 +1,20 @@
+/*jshint esversion: 6 */
 /**
 * Get the log and display the data as table.
 */
 var log = {};
 
-var core = function (func) {
-        return browser.runtime.getBackgroundPage().then(func);
-};
-
 /**
 * Reset the global log
 */
 function resetGlobalLog(){
-    core(function (ref){
-        obj = {"log": []};
-        ref.setData('log', JSON.stringify(obj));
+    obj = {"log": []};
+
+    browser.runtime.sendMessage({
+        function: "setData",
+        params: ['log', JSON.stringify(obj)]
     });
+
     getLog();
     location.reload();
 }
@@ -24,8 +24,11 @@ function resetGlobalLog(){
 */
 function getLog()
 {
-    core(function (ref){
-        log = ref.getData('log');
+    browser.runtime.sendMessage({
+        function: "getData",
+        params: ['log']
+    }).then((data) => {
+        log = data.response;
 
         // Sort the log | issue #70
         log.log.sort(function(a,b) {
@@ -108,3 +111,7 @@ function setText()
     $('#head_3').text(translate('log_html_table_head_3'));
     $('#head_4').text(translate('log_html_table_head_4'));
 }
+
+function handleError(error) {
+    console.log(`Error: ${error}`);
+}

core_js/message_handler.js

@@ -0,0 +1,24 @@
+/*jshint esversion: 6 */
+/*
+ * This script is responsible for the communication between background and content_scripts.
+ */
+
+/**
+ * [handleMessage description]
+ * @param  request      The message itself. This is a JSON-ifiable object.
+ * @param  sender       A runtime.MessageSender object representing the sender of the message.
+ * @param  sendResponse A function to call, at most once, to send a response to the message. The function takes a single argument, which may be any JSON-ifiable object. This argument is passed back to the message sender.
+ */
+function handleMessage(request, sender, sendResponse)
+{
+    var fn = window[request.function];
+
+    if(typeof fn === "function")
+    {
+        var response = fn.apply(null, request.params);
+
+        sendResponse({response});
+    }
+}
+
+browser.runtime.onMessage.addListener(handleMessage);

core_js/popup.js

@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 var element = $("#statistics_value");
 var elGlobalPercentage = $("#statistics_value_global_percentage");
 var elProgressbar_blocked = $('#progress_blocked');
@@ -14,23 +15,31 @@ var statisticsStatus;
 var currentURL;
 var reportServer;
 
-var core = function (func) {
-    return browser.runtime.getBackgroundPage().then(func);
-};
-
-function getData()
+async function getData()
 {
-    core(function (ref){
-        globalCounter = ref.getData('globalCounter');
-        globalurlcounter = ref.getData('globalurlcounter');
-        globalStatus = ref.getData('globalStatus');
-        badgedStatus = ref.getData('badgedStatus');
-        hashStatus = ref.getData('hashStatus');
-        loggingStatus = ref.getData('loggingStatus');
-        statisticsStatus = ref.getData('statisticsStatus');
-        currentURL = ref.getCurrentURL();
-        reportServer = ref.getData('reportServer');
-    });
+    await browser.runtime.sendMessage({
+        function: "getEntireData",
+        params: []
+    }).then((data) => {
+        data = data.response;
+        globalCounter = data.globalCounter;
+        globalurlcounter = data.globalurlcounter;
+        globalStatus = data.globalStatus;
+        badgedStatus = data.badgedStatus;
+        hashStatus = data.hashStatus;
+        loggingStatus = data.loggingStatus;
+        statisticsStatus = data.statisticsStatus;
+        reportServer = data.reportServer;
+
+        browser.runtime.sendMessage({
+            function: "getCurrentURL",
+            params: []
+        }).then((data) => {
+            currentURL = data.response;
+
+            return null;
+        }, handleError);
+    }, handleError);
 }
 
 /**
@@ -48,8 +57,8 @@ function init()
 }
 
 /**
-* Get the globalCounter value from the browser storage
-* @param  {(data){}    Return value form browser.storage.local.get
+* Get the globalCounter and globalurlcounter value from the storage
+* @param  {(data){}    Return value form storage
 */
 function changeStatistics()
 {
@@ -93,19 +102,29 @@ function changeSwitchButton(id, storageID)
     changeVisibility(id, storageID);
 
     element.on('change', function(){
-        core(function (ref){
-            ref.setData(storageID, element.is(':checked'));
-            if(storageID == "globalStatus") ref.changeIcon();
+        browser.runtime.sendMessage({
+            function: "setData",
+            params: [storageID, element.is(':checked')]
+        }).then((data) => {
+            if(storageID == "globalStatus"){
+                browser.runtime.sendMessage({
+                    function: "changeIcon",
+                    params: []
+                });
+            }
             changeVisibility(id, storageID);
 
-            ref.saveOnExit();
+            browser.runtime.sendMessage({
+                function: "saveOnExit",
+                params: []
+            });
         });
     });
 }
 
 /**
- * Change the visibility of sections.
- */
+* Change the visibility of sections.
+*/
 function changeVisibility(id, storageID)
 {
     var element;
@@ -113,13 +132,13 @@ function changeVisibility(id, storageID)
     switch(storageID)
     {
         case "loggingStatus":
-            element = $('#log_section');
-            break;
+        element = $('#log_section');
+        break;
         case "statisticsStatus":
-            element = $('#statistic_section');
-            break;
+        element = $('#statistic_section');
+        break;
         default:
-            element = "undefine";
+        element = "undefine";
     }
 
     if(element != "undefine")
@@ -137,10 +156,10 @@ function changeVisibility(id, storageID)
 }
 
 /**
- * Set the value of a switch button.
- * @param {string} id      HTML id
- * @param {string} varname js internal variable name
- */
+* Set the value of a switch button.
+* @param {string} id      HTML id
+* @param {string} varname js internal variable name
+*/
 function setSwitchButton(id, varname)
 {
     var element = $('#'+id);
@@ -151,25 +170,29 @@ function setSwitchButton(id, varname)
 * Reset the global statistic
 */
 function resetGlobalCounter(){
-    core(function (ref){
-        globalurlcounter = 0;
-        globalCounter = 0;
-        ref.setData('globalCounter', 0);
-        ref.setData('globalurlcounter', 0);
-        ref.saveOnExit();
-
-        changeStatistics();
+    browser.runtime.sendMessage({
+        function: "setData",
+        params: ['globalCounter', 0]
     });
-}
 
-if(!browser.extension.inIncognitoContext)
-{
-    getData();
+    browser.runtime.sendMessage({
+        function: "setData",
+        params: ['globalurlcounter', 0]
+    });
+
+    browser.runtime.sendMessage({
+        function: "saveOnExit",
+        params: []
+    });
+
+    globalCounter = 0;
+    globalurlcounter = 0;
+
+    changeStatistics();
 }
 
 $(document).ready(function(){
-    if(!browser.extension.inIncognitoContext)
-    {
+    getData().then(() => {
         init();
         $('#reset_counter_btn').on("click", resetGlobalCounter);
         changeSwitchButton("globalStatus", "globalStatus");
@@ -180,13 +203,7 @@ $(document).ready(function(){
         $('#settings').attr('href', browser.extension.getURL('./html/settings.html'));
         $('#reportButton').on("click", reportURL);
         setText();
-    } else {
-        $('#config_section').remove();
-        $('#statistic_section').remove();
-        $('#status_section').remove();
-        $('#log_section').remove();
-        $('#incognito').css('display', '');
-    }
+    });
 
 });
 
@@ -212,21 +229,21 @@ function setText()
 }
 
 /**
- * Helper function to inject the translated text and tooltip.
- *
- * @param   {string}    id ID of the HTML element
- * @param   {string}    attribute Name of the attribute used for localization
- * @param   {boolean}   tooltip
- */
+* Helper function to inject the translated text and tooltip.
+*
+* @param   {string}    id ID of the HTML element
+* @param   {string}    attribute Name of the attribute used for localization
+* @param   {boolean}   tooltip
+*/
 function injectText(id, attribute, tooltip)
 {
     object = $('#'+id);
     object.text(translate(attribute));
 
     /*
-        This function will throw an error if no translation
-        is found for the tooltip. This is a planned error.
-     */
+    This function will throw an error if no translation
+    is found for the tooltip. This is a planned error.
+    */
     tooltip = translate(attribute+"_title");
 
     if(tooltip != "")
@@ -246,8 +263,8 @@ function translate(string)
 }
 
 /**
- * Send the url to the DB on clearurls.röb.it to checked for tracking fields.
- */
+* Send the url to the DB on clearurls.röb.it to checked for tracking fields.
+*/
 function reportURL()
 {
     $.ajax({
@@ -264,3 +281,7 @@ function reportURL()
         }
     });
 }
+
+function handleError(error) {
+    console.log(`Error: ${error}`);
+}

core_js/settings.js

@@ -1,9 +1,5 @@
 var settings = [];
 
-var core = function (func) {
-        return browser.runtime.getBackgroundPage().then(func);
-};
-
 getData();
 
 /**
@@ -17,11 +13,21 @@ $(document).ready(function(){
 
     $("#badged_color input").on("change", function () {
         settings.badged_color = $(this).val();
-        core(function (ref){
-            ref.setData('badged_color', settings.badged_color);
-            ref.setBadgedStatus();
-            ref.saveOnExit();
-        });
+
+        browser.runtime.sendMessage({
+            function: "setData",
+            params: ["badged_color", settings.badged_color]
+        }).then(handleResponse, handleError);
+
+        browser.runtime.sendMessage({
+            function: "setBadgedStatus",
+            params: []
+        }).then(handleResponse, handleError);
+
+        browser.runtime.sendMessage({
+            function: "saveOnExit",
+            params: []
+        }).then(handleResponse, handleError);
     });
 });
 
@@ -31,11 +37,20 @@ $(document).ready(function(){
  */
 function reset()
 {
-    core(function (ref){
-        ref.initSettings();
-        ref.saveOnExit();
-        ref.reload();
-    });
+    browser.runtime.sendMessage({
+        function: "initSettings",
+        params: []
+    }).then(handleResponse, handleError);
+
+    browser.runtime.sendMessage({
+        function: "saveOnExit",
+        params: []
+    }).then(handleResponse, handleError);
+
+    browser.runtime.sendMessage({
+        function: "reload",
+        params: []
+    }).then(handleResponse, handleError);
 }
 
 /**
@@ -43,18 +58,47 @@ function reset()
  */
 function save()
 {
-    core(function (ref){
-        ref.setData('badged_color', $('input[name=badged_color]').val());
-        ref.setBadgedStatus();
-        ref.setData('ruleURL', $('input[name=rule_url]').val());
-        ref.setData('hashURL', $('input[name=hash_url]').val());
-        ref.setData('types', $('input[name=types]').val());
-        ref.setData('reportServer', $('input[name=report_server]').val());
-        ref.saveOnExit();
-        ref.reload();
-    });
+    browser.runtime.sendMessage({
+        function: "setData",
+        params: ["badged_color", $('input[name=badged_color]').val()]
+    }).then(handleResponse, handleError);
 
-    location.reload();
+    browser.runtime.sendMessage({
+        function: "setBadgedStatus",
+        params: []
+    }).then(handleResponse, handleError);
+
+    browser.runtime.sendMessage({
+        function: "setData",
+        params: ["ruleURL", $('input[name=rule_url]').val()]
+    }).then(handleResponse, handleError);
+
+    browser.runtime.sendMessage({
+        function: "setData",
+        params: ["hashURL", $('input[name=hash_url]').val()]
+    }).then(handleResponse, handleError);
+
+    browser.runtime.sendMessage({
+        function: "setData",
+        params: ["types", $('input[name=types]').val()]
+    }).then(handleResponse, handleError);
+
+    browser.runtime.sendMessage({
+        function: "setData",
+        params: ["reportServer", $('input[name=report_server]').val()]
+    }).then(handleResponse, handleError);
+
+    browser.runtime.sendMessage({
+        function: "saveOnExit",
+        params: []
+    }).then(handleResponse, handleError);
+
+    browser.runtime.sendMessage({
+        function: "reload",
+        params: []
+    }).then(handleResponse, handleError);
+
+    //location.reload();
 }
 
 /**
@@ -72,13 +116,30 @@ function translate(string)
  */
 function getData()
 {
-    core(function (ref){
-        settings.badged_color = ref.getData('badged_color');
-        settings.rule_url = ref.getData('ruleURL');
-        settings.hash_url = ref.getData('hashURL');
-        settings.types = ref.getData('types');
-        settings.reportServer = ref.getData('reportServer');
-    });
+    browser.runtime.sendMessage({
+        function: "getData",
+        params: ["badged_color"]
+    }).then((data) => handleResponseData(data, "badged_color", "badged_color"), handleError);
+
+    browser.runtime.sendMessage({
+        function: "getData",
+        params: ["ruleURL"]
+    }).then((data) => handleResponseData(data, "rule_url", "rule_url"), handleError);
+
+    browser.runtime.sendMessage({
+        function: "getData",
+        params: ["hashURL"]
+    }).then((data) => handleResponseData(data, "hash_url", "hash_url"), handleError);
+
+    browser.runtime.sendMessage({
+        function: "getData",
+        params: ["types"]
+    }).then((data) => handleResponseData(data, "types", "types"), handleError);
+
+    browser.runtime.sendMessage({
+        function: "getData",
+        params: ["reportServer"]
+    }).then((data) => handleResponseData(data, "reportServer", "report_server"), handleError);
 }
 
 /**
@@ -89,17 +150,30 @@ function setText()
     document.title = translate('settings_html_page_title');
     $('#page_title').text(translate('settings_html_page_title'));
     $('#badged_color_label').text(translate('badged_color_label'));
-    $('input[name=badged_color]').val(settings.badged_color);
     $('#reset_settings_btn').text(translate('setting_html_reset_button'));
     $('#reset_settings_btn').prop('title', translate('setting_html_reset_button_title'));
     $('#rule_url_label').text(translate('setting_rule_url_label'));
-    $('input[name=rule_url]').val(settings.rule_url);
     $('#hash_url_label').text(translate('setting_hash_url_label'));
-    $('input[name=hash_url]').val(settings.hash_url);
     $('#types_label').html(translate('setting_types_label'));
-    $('input[name=types]').val(settings.types);
     $('#save_settings_btn').text(translate('settings_html_save_button'));
     $('#save_settings_btn').prop('title', translate('settings_html_save_button_title'));
     $('#report_server_label').html(translate('setting_report_server_label'));
-    $('input[name=report_server]').val(settings.reportServer);
+}
+
+/**
+ * Handle the response from the storage and saves the data.
+ * @param  {JSON-Object} data Data JSON-Object
+ */
+function handleResponseData(data, varName, inputID)
+{
+    settings[varName] = data.response;
+    $('input[name='+inputID+']').val(data.response);
+}
+
+function handleResponse(message) {
+  console.log(`Message from the background script:  ${message.response}`);
+}
+
+function handleError(error) {
+  console.log(`Error: ${error}`);
 }

core_js/storage.js

@@ -0,0 +1,196 @@
+/*jshint esversion: 6 */
+/*
+ * This script is responsible for the storage.
+*/
+var storage = [];
+
+/**
+* Writes the storage variable to the disk.
+*/
+function saveOnExit()
+{
+    var json = {};
+
+    Object.entries(storage).forEach(([key, value]) => {
+        switch (key) {
+            case "ClearURLsData":
+            case "log":
+            json[key] = JSON.stringify(value);
+            break;
+            case "types":
+            json[key] = value.toString();
+            break;
+            default:
+            json[key] = value;
+        }
+    });
+    console.log(translate('core_save_on_disk'));
+    browser.storage.local.set(json);
+}
+
+/**
+* Save the value under the key on the disk.
+* @param  {String} key
+* @param  {Object} value
+*/
+function saveOnDisk(key, value)
+{
+    browser.storage.local.set({key: value});
+}
+
+/**
+* Retrieve everything and save on the RAM.
+*/
+function getDataFromDisk()
+{
+    browser.storage.local.get().then(initStorage, error);
+}
+
+/**
+* Return the value under the key.
+* @param  {String} key
+* @return {Object}
+*/
+function getData(key)
+{
+    return storage[key];
+}
+
+/**
+ * Return the entire storage object.
+ * @return {Object}
+ */
+function getEntireData()
+{
+    return storage;
+}
+
+/**
+* Save the value under the key on the RAM.
+* @param {String} key
+* @param {Object} value
+*/
+function setData(key, value)
+{
+    switch (key) {
+        case "ClearURLsData":
+        case "log":
+        storage[key] = JSON.parse(value);
+        break;
+        case "hashURL":
+        case "ruleURL":
+        storage[key] = replaceOldGithubURLs(value);
+        break;
+        case "types":
+        storage[key] = value.split(',');
+        break;
+        default:
+        storage[key] = value;
+    }
+}
+
+/**
+* Write error on console.
+*/
+function error(e)
+{
+    console.log(translate('core_error'));
+    console.error(e);
+}
+
+/**
+* Set default values, if the storage is empty.
+* @param  {Object} items
+*/
+function initStorage(items)
+{
+    initSettings();
+
+    if(!isEmpty(items)) {
+        Object.entries(items).forEach(([key, value]) => {
+            setData(key, value);
+        });
+    }
+
+    // Start the clearurls.js
+    start();
+}
+
+/**
+* Set default values for the settings.
+*/
+function initSettings()
+{
+    storage.ClearURLsData = [];
+    storage.dataHash = "";
+    storage.badgedStatus = true;
+    storage.globalStatus = true;
+    storage.globalurlcounter = 0;
+    storage.globalCounter = 0;
+    storage.hashStatus = "error";
+    storage.loggingStatus = false;
+    storage.log = {"log": []};
+    storage.statisticsStatus = true;
+    storage.badged_color = "ffa500";
+    storage.hashURL = "https://gitlab.com/KevinRoebert/ClearUrls/raw/master/data/rules.hash";
+    storage.ruleURL = "https://gitlab.com/KevinRoebert/ClearUrls/raw/master/data/data.json";
+    storage.types = ["font", "image", "imageset", "main_frame", "media", "object", "object_subrequest", "other", "script", "stylesheet", "sub_frame", "websocket", "xbl", "xml_dtd", "xmlhttprequest", "xslt"];
+    storage.reportServer = "https://clearurls.xn--rb-fka.it";
+}
+
+/**
+* Replace the old GitHub URLs with the
+* new GitLab URLs.
+*/
+function replaceOldGithubURLs(url)
+{
+    switch (url) {
+        case "https://raw.githubusercontent.com/KevinRoebert/ClearUrls/master/data/rules.hash?flush_cache=true":
+        return "https://gitlab.com/KevinRoebert/ClearUrls/raw/master/data/rules.hash";
+        case "https://raw.githubusercontent.com/KevinRoebert/ClearUrls/master/data/data.json?flush_cache=true":
+        return "https://gitlab.com/KevinRoebert/ClearUrls/raw/master/data/data.json";
+        default:
+        return url;
+    }
+}
+
+/**
+* Load local saved data, if the browser is offline or
+* some other network trouble.
+*/
+function loadOldDataFromStore()
+{
+    localDataHash = storage.dataHash;
+}
+
+/**
+* Save the hash status to the local storage.
+* The status can have the following values:
+*  1 "up to date"
+*  2 "updated"
+*  3 "update available"
+*  @param status_code the number for the status
+*/
+function storeHashStatus(status_code)
+{
+    switch(status_code)
+    {
+        case 1: status_code = "hash_status_code_1";
+        break;
+        case 2: status_code = "hash_status_code_2";
+        break;
+        case 3: status_code = "hash_status_code_3";
+        break;
+        default: status_code = "hash_status_code_4";
+    }
+
+    storage.hashStatus = status_code;
+}
+
+/**
+* Save every minute the temporary data to the disk.
+*/
+setInterval(saveOnExit, 60000);
+
+// Start storage
+getDataFromDisk();

core_js/tools.js

@@ -0,0 +1,164 @@
+/*jshint esversion: 6 */
+/*
+ * This script is responsible for some tools.
+*/
+
+/**
+* Check if an object is empty.
+* @param  {Object}  obj
+* @return {Boolean}
+*/
+function isEmpty(obj)
+{
+    return (Object.getOwnPropertyNames(obj).length === 0);
+}
+
+/**
+* Translate a string with the i18n API.
+*
+* @param {string} string Name of the attribute used for localization
+*/
+function translate(string)
+{
+    return browser.i18n.getMessage(string);
+}
+
+/**
+* Reloads the extension.
+*/
+function reload()
+{
+    browser.runtime.reload();
+}
+
+/**
+* Check if it is an android device.
+* @return bool
+*/
+function checkOSAndroid()
+{
+    if(os == "android")
+    {
+        return true;
+    }
+    else{
+        return false;
+    }
+}
+
+/**
+* Return the number of parameters query strings.
+* @param  {String}     url URL as String
+* @return {int}        Number of Parameters
+*/
+function countFields(url)
+{
+    var matches = (url.match(/[^\/|\?|&]+=[^\/|\?|&]+/gi) || []);
+    var count = matches.length;
+
+    return count;
+}
+
+/**
+* Returns true if fields exists.
+* @param  {String}     url URL as String
+* @return {boolean}
+*/
+function existsFields(url)
+{
+    var matches = (url.match(/\?.+/i) || []);
+    var count = matches.length;
+
+    return (count > 0);
+}
+
+/**
+* Load local saved data, if the browser is offline or
+* some other network trouble.
+*/
+function loadOldDataFromStore()
+{
+    localDataHash = storage.dataHash;
+}
+
+/**
+* Save the hash status to the local storage.
+* The status can have the following values:
+*  1 "up to date"
+*  2 "updated"
+*  3 "update available"
+*  @param status_code the number for the status
+*/
+function storeHashStatus(status_code)
+{
+    switch(status_code)
+    {
+        case 1: status_code = "hash_status_code_1";
+        break;
+        case 2: status_code = "hash_status_code_2";
+        break;
+        case 3: status_code = "hash_status_code_3";
+        break;
+        default: status_code = "hash_status_code_4";
+    }
+
+    storage.hashStatus = status_code;
+}
+
+/**
+* Increase by {number} the GlobalURLCounter
+* @param  {int} number
+*/
+function increaseGlobalURLCounter(number)
+{
+    if(storage.statisticsStatus)
+    {
+        storage.globalurlcounter += number;
+    }
+}
+
+/**
+* Increase by one the URLCounter
+*/
+function increaseURLCounter()
+{
+    if(storage.statisticsStatus)
+    {
+        storage.globalCounter++;
+    }
+}
+
+/**
+* Change the icon.
+*/
+function changeIcon()
+{
+    if(storage.globalStatus){
+        browser.browserAction.setIcon({path: "img/clearurls.svg"});
+    } else{
+        browser.browserAction.setIcon({path: "img/clearurls_gray.svg"});
+    }
+}
+
+/**
+* Get the badged status from the browser storage and put the value
+* into a local variable.
+*
+*/
+function setBadgedStatus()
+{
+    if(!checkOSAndroid() && storage.badgedStatus){
+        browser.browserAction.setBadgeBackgroundColor({
+            'color': '#'+storage.badged_color
+        });
+    }
+}
+
+/**
+* Returns the current URL.
+* @return {String} [description]
+*/
+function getCurrentURL()
+{
+    return currentURL;
+}