user chrome.storage
This commit is contained in:
parent
c8abebedc8
commit
e47689270e
4 changed files with 133 additions and 89 deletions
|
@ -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"
|
||||
|
|
|
@ -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 {
|
||||
|
|
115
js/popup.js
115
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,
|
||||
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);
|
||||
|
|
|
@ -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>-->
|
||||
|
|
Reference in a new issue