user chrome.storage

_locales/de/messages.json

@@ -1,4 +1,8 @@
 {
+  "extention_name": {
+    "message": "Piwik Injector",
+    "description": "name of the extention"
+  },
   "extention_description": {
     "message": "Füge eigenes Javascript auf beliebigen Seiten ein.",
     "description": "a short description shown in the extention list"

css/style.css

@@ -107,9 +107,14 @@ a:hover {
 }
 
 .controls__save,
-.controls__reset {
+.controls__reset,
+.controls__remove-draft {
   margin-right: 10px;
-  font-size: 18px;
+  font-size: 16px;
+}
+
+.button-warning {
+  background: rgb(223, 117, 20);
 }
 
 #editor {

js/popup.js

@@ -18,7 +18,7 @@ document.addEventListener('DOMContentLoaded', function() {
       expertMode: document.getElementById("expert-mode")
     },
     applyi18n: function() {
-      var translatableIDs = ["error-message", "error-tip", "save", "reset", "goto-host", "enable-description", "host-label", "expert-mode-label"];
+      var translatableIDs = ["error-message", "error-tip", "save", "reset", "goto-host", "enable-description", "host-label", "expert-mode-label", "draft-remove"];
       translatableIDs.forEach(function(id) {
         var translateKey = id.replace(/-/g, "_");
         document.getElementById(id).innerText = chrome.i18n.getMessage(translateKey);
@@ -36,8 +36,7 @@ document.addEventListener('DOMContentLoaded', function() {
     url: undefined,
     emptyDataPattern: {
       config: {
-        enable: false,
+        enable: false
-        extra: ''
       },
       source: ''
     },
@@ -180,7 +179,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         popup.host = response.host;
         popup.protocol = response.protocol;
-        popup.key = popup.protocol + "//" + popup.host;
+        popup.url = popup.protocol + "//" + popup.host;
 
         // Load storage (global, local) IMPORTANT: Must be called first of all storage operations
         popup.storage.load();
@@ -188,29 +187,31 @@ document.addEventListener('DOMContentLoaded', function() {
         // Set storage to store data accessible from all hosts
         popup.storage.setMode(popup.storage.MODE.global);
 
-        var hosts = popup.storage.get('hosts') || [],
+        chrome.storage.sync.get("hosts", function(items) {
-            url = popup.protocol + "//" + response.host;
+              var hosts = items.hosts;
-
+              if (!hosts) {
-        // Add current host to list
+                hosts = [];
-        if (hosts.indexOf(url) === -1) {
+              }
-          hosts.push(url);
+              // Add current host to list
-        }
+              if (hosts.indexOf(popup.url) === -1) {
-
+                hosts.push(popup.url);
-        // Fill 'hosts select'
+              }
-        hosts.forEach(function(host) {
+              // Fill 'hosts select'
-          var option = document.createElement('option');
+              hosts.forEach(function(host) {
-          option.innerText = host;
+                var option = document.createElement('option');
-          if (host === url) {
+                option.innerText = host;
-            option.setAttribute('selected', 'selected');
+                if (host === popup.url) {
-          }
+                  option.setAttribute('selected', 'selected');
-          popup.el.hostSelect.appendChild(option);
+                }
-        });
+                popup.el.hostSelect.appendChild(option);
-
+              });
-        // Store host (current included in array) if customjs is defined
-        if (response.customjs) {
-          popup.storage.set('hosts', hosts);
-        }
 
+              // Store host (current included in array) if customjs is defined
+              if (response.customjs) {
+                chrome.storage.sync.set({"hosts": hosts});
+              }
+            }
+        );
         /**
          * Set-up data (script, enable, include, extra)
          */
@@ -242,7 +243,11 @@ document.addEventListener('DOMContentLoaded', function() {
         }
 
         // Apply data (draft if exist)
-        popup.applyData(popup.storage.get('draft'));
+        chrome.storage.local.get(popup.url, function(items) {
+          if (items && Object.keys(items).length !== 0) { // if draft exists
+            popup.applyData(items[popup.url].draft);
+          }
+        });
       }
     },
 
@@ -267,7 +272,8 @@ document.addEventListener('DOMContentLoaded', function() {
         var js = popup.piwik.defaultTrackingCode;
         js = js.replace("{{PIWIKURL}}", piwikURL);
         js = js.replace("{{SITEID}}", String(siteID));
-        popup.editor.apply(js)
+        popup.editor.apply(js);
+        chrome.storage.sync.set({"piwik": {piwikURL: piwikURL, siteID: siteID}});
       },
       setExpertMode: function(expertMode, onLoad) {
         popup.editor.editorInstance.setOptions({
@@ -295,6 +301,7 @@ document.addEventListener('DOMContentLoaded', function() {
       // base64 may be smaller, but does not handle unicode characters
       // attempt base64 first, fall back to escaped text
       try {
+        throw new Error;
         b64 += (';base64,' + btoa(script));
       }
       catch (e) {
@@ -303,6 +310,18 @@ document.addEventListener('DOMContentLoaded', function() {
 
       return b64;
     },
+    decodeDataUrl: function(dataUrl) {
+      if (dataUrl.indexOf('data:text/javascript;base64,') === 0) {
+        dataUrl = dataUrl.replace('data:text/javascript;base64,', '');
+        return atob(dataUrl);
+      }
+      else if (dataUrl.indexOf('data:text/javascript;charset=utf-8,') === 0) {
+        dataUrl = dataUrl.replace('data:text/javascript;charset=utf-8,', '');
+        return decodeURIComponent(dataUrl);
+      } else {
+        return dataUrl
+      }
+    },
     applyData: function(data, notDraft) {
 
       if (data && !notDraft) {
@@ -311,6 +330,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
       data = data || this.data;
       // Default value for source
+
+      data.source = popup.decodeDataUrl(data.source);
+      console.info(data);
       if (!data.source) {
         data.source = popup.editor.defaultValue;
       }
@@ -350,11 +372,11 @@ document.addEventListener('DOMContentLoaded', function() {
       data.source = popup.generateScriptDataUrl(data.source);
 
       // Send new data to apply
-      chrome.tabs.sendMessage(popup.tabId, {method: "setData", customjs: data, reload: true});
+      // chrome.tabs.sendMessage(popup.tabId, {method: "setData", customjs: data, reload: true});
 
-      // Save local copy of data
+      var syncdata = {};
-      popup.storage.setMode(popup.storage.MODE.private);
+      syncdata[popup.url] = data;
-      popup.storage.set('data', popup.data);
+      chrome.storage.sync.set(syncdata);
 
       // Clear draft
       popup.removeDraft();
@@ -379,14 +401,16 @@ document.addEventListener('DOMContentLoaded', function() {
 
         // Remove host from hosts inside global storage
         popup.storage.setMode(popup.storage.MODE.global);
-        var oldHosts = popup.storage.get('hosts'),
+
-            newHosts = [];
+        chrome.storage.sync.get("hosts", function(items) {
-        oldHosts.forEach(function(host) {
+              var hosts = items.hosts;
-          if (host !== popup.protocol + '//' + popup.host) {
+              var index = hosts.indexOf(popup.url);
-            newHosts.push(host);
+              if (index > -1) {
-          }
+                hosts.splice(index, 1);
-        });
+              }
-        popup.storage.set('hosts', newHosts);
+              chrome.storage.sync.set({"hosts": hosts});
+            }
+        );
 
         // Remove customjs from frontend
         chrome.tabs.sendMessage(popup.tabId, {method: "removeData", reload: false});
@@ -460,8 +484,10 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         if ((source || !popup.data.source) && source !== popup.data.source) {
 
-          popup.storage.setMode(popup.storage.MODE.private);
+          var data = {};
-          popup.storage.set('draft', draft);
+          data[popup.url] = {draft: draft};
+          popup.el.draftRemoveLink.classList.remove('is-hidden');
+          chrome.storage.local.set(data);
 
           // Auto switch 'enable checkbox' on source edit
           if (!popup.el.enableCheck.classList.contains('not-auto-change')) {
@@ -469,7 +495,7 @@ document.addEventListener('DOMContentLoaded', function() {
           }
         }
       },
-      draftAutoSaveInterval = setInterval(draftAutoSave, 2000);
+      draftAutoSaveInterval = setInterval(draftAutoSave, 1000);
 
 
   /**
@@ -477,48 +503,52 @@ document.addEventListener('DOMContentLoaded', function() {
    */
 
   popup.el.hostSelect.addEventListener('change', function(e) {
-    var host = this.value,
+    var host = this.value;
-        hostData = JSON.parse(localStorage.getItem(popup.key + '-' + host), true);
+    chrome.storage.sync.get(host, function(items) {
+      var hostData = items[host];
+      console.info(hostData);
+      console.log(host);
+      if (host !== popup.url) {
+        // Stop making drafts
+        clearInterval(draftAutoSaveInterval);
 
+        // Show goto link
+        popup.el.hostGoToLink.classList.remove('is-hidden');
 
-    if (host !== popup.protocol + '//' + popup.host) {
+        // Hide controls
-      // Stop making drafts
+        popup.el.saveBtn.classList.add('pure-button-disabled');
-      clearInterval(draftAutoSaveInterval);
+        popup.el.resetBtn.classList.add('pure-button-disabled');
+        popup.el.draftRemoveLink.classList.add('is-hidden');
 
-      // Show goto link
+        // Apply other host data
-      popup.el.hostGoToLink.classList.remove('is-hidden');
+        try {
-
+          popup.applyData(hostData, true);
-      // Hide controls
+        }
-      popup.el.saveBtn.classList.add('pure-button-disabled');
+            // Hotfix for host without customjs
-      popup.el.resetBtn.classList.add('pure-button-disabled');
+        catch (err) {
-      popup.el.draftRemoveLink.classList.add('is-hidden');
+          popup.applyData(Object.assign(true, {}, popup.emptyDataPattern), true);
-
+        }
-      // Apply other host data
-      try {
-        popup.applyData(hostData.data, true);
       }
-          // Hotfix for host without customjs
+      else {
-      catch (err) {
+        // Start making drafts
-        popup.applyData(Object.assign(true, {}, popup.emptyDataPattern), true);
+        draftAutoSaveInterval = setInterval(draftAutoSave, 1000);
+
+        // Hide goto link
+        popup.el.hostGoToLink.classList.add('is-hidden');
+
+        // Show controls
+        popup.el.saveBtn.classList.remove('pure-button-disabled');
+        popup.el.resetBtn.classList.remove('pure-button-disabled');
+        if (popup.storage.get('draft')) {
+          popup.el.draftRemoveLink.classList.remove('is-hidden');
+        }
+
+        // Apply current host data
+        // popup.applyData(hostData.draft || hostData.data, !hostData.draft);
+        popup.applyData(hostData);
       }
-    }
+    });
-    else {
-      // Start making drafts
-      draftAutoSaveInterval = setInterval(draftAutoSave, 2000);
 
-      // Hide goto link
-      popup.el.hostGoToLink.classList.add('is-hidden');
-
-      // Show controls
-      popup.el.saveBtn.classList.remove('pure-button-disabled');
-      popup.el.resetBtn.classList.remove('pure-button-disabled');
-      if (popup.storage.get('draft')) {
-        popup.el.draftRemoveLink.classList.remove('is-hidden');
-      }
-
-      // Apply current host data
-      popup.applyData(hostData.draft || hostData.data, !hostData.draft);
-    }
   });
 
 
@@ -550,10 +580,17 @@ document.addEventListener('DOMContentLoaded', function() {
 
   popup.piwik.loadExpertMode();
 
-  popup.el.expertMode.addEventListener("change", function() {
+  popup.el.expertMode.addEventListener("change", function(event) {
     var enabled = event.target.checked;
     popup.piwik.setExpertMode(enabled)
   });
 
+  chrome.storage.sync.get("piwik", function(items) {
+    if (items && Object.keys(items).length !== 0) {
+      popup.el.piwikURL.value = items.items.piwikURL;
+      popup.el.siteID.value = items.piwik.siteID;
+    }
+  });
+
 
 }, false);

popup.html

@@ -41,13 +41,11 @@
                 <input type="hidden" name="script" value="">
             </div>
 
-            <div class="pure-g">
+            <div class="pure-g controls">
-                <div class="pure-u-3-5 controls">
+                <button id="save" class="controls__save pure-button pure-button-primary"
-                    <button id="save" class="controls__save pure-button pure-button-primary"
+                        name="save"></button>
-                            name="save"></button>
+                <button id="reset" class="controls__reset pure-button" name="reset"></button>
-                    <button id="reset" class="controls__reset pure-button" name="reset"></button>
+                <button id="draft-remove" class="controls__remove-draft pure-button button-warning is-hidden"></button>
-                    <a id="draft-remove" class="controls__remove-draft red-text is-hidden" href="#"></a>
-                </div>
             </div><!-- .controls -->
 
             <!--</form>-->