1
0
Fork 0

user chrome.storage

This commit is contained in:
Lukas Winkler 2017-08-27 17:14:19 +02:00
parent c8abebedc8
commit e47689270e
4 changed files with 133 additions and 89 deletions

View file

@ -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"

View file

@ -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 {

View file

@ -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,
extra: ''
enable: false
},
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,19 +187,20 @@ 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') || [],
url = popup.protocol + "//" + response.host;
// Add current host to list
if (hosts.indexOf(url) === -1) {
hosts.push(url);
chrome.storage.sync.get("hosts", function(items) {
var hosts = items.hosts;
if (!hosts) {
hosts = [];
}
// Add current host to list
if (hosts.indexOf(popup.url) === -1) {
hosts.push(popup.url);
}
// Fill 'hosts select'
hosts.forEach(function(host) {
var option = document.createElement('option');
option.innerText = host;
if (host === url) {
if (host === popup.url) {
option.setAttribute('selected', 'selected');
}
popup.el.hostSelect.appendChild(option);
@ -208,9 +208,10 @@ document.addEventListener('DOMContentLoaded', function() {
// Store host (current included in array) if customjs is defined
if (response.customjs) {
popup.storage.set('hosts', hosts);
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
popup.storage.setMode(popup.storage.MODE.private);
popup.storage.set('data', popup.data);
var syncdata = {};
syncdata[popup.url] = 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 = [];
oldHosts.forEach(function(host) {
if (host !== popup.protocol + '//' + popup.host) {
newHosts.push(host);
chrome.storage.sync.get("hosts", function(items) {
var hosts = items.hosts;
var index = hosts.indexOf(popup.url);
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);
popup.storage.set('draft', draft);
var data = {};
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,11 +503,12 @@ document.addEventListener('DOMContentLoaded', function() {
*/
popup.el.hostSelect.addEventListener('change', function(e) {
var host = this.value,
hostData = JSON.parse(localStorage.getItem(popup.key + '-' + host), true);
if (host !== popup.protocol + '//' + popup.host) {
var host = this.value;
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);
@ -495,7 +522,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Apply other host data
try {
popup.applyData(hostData.data, true);
popup.applyData(hostData, true);
}
// Hotfix for host without customjs
catch (err) {
@ -504,7 +531,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
else {
// Start making drafts
draftAutoSaveInterval = setInterval(draftAutoSave, 2000);
draftAutoSaveInterval = setInterval(draftAutoSave, 1000);
// Hide goto link
popup.el.hostGoToLink.classList.add('is-hidden');
@ -517,10 +544,13 @@ document.addEventListener('DOMContentLoaded', function() {
}
// Apply current host data
popup.applyData(hostData.draft || hostData.data, !hostData.draft);
// popup.applyData(hostData.draft || hostData.data, !hostData.draft);
popup.applyData(hostData);
}
});
});
/**
* Protect 'enable checkbox' if was manually modified
@ -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);

View file

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