hotfix: variables size, big into local

background.js

@@ -50,7 +50,7 @@ let all = "";
 
 //Initialize the CSS storage on startup
 chrome.runtime.onInstalled.addListener(() => {
-	chrome.storage.sync.set({ css });
+	chrome.storage.local.set({ css });
 	chrome.storage.sync.set({ activate });
 	chrome.storage.sync.set({ audioB });
 	chrome.storage.sync.set({ midiB });
@@ -58,9 +58,9 @@ chrome.runtime.onInstalled.addListener(() => {
 	chrome.storage.sync.set({ midiI });
 	chrome.storage.sync.set({ popup });
 	chrome.storage.sync.set({ loopPlay });
-	chrome.storage.sync.set({ records });
-	chrome.storage.sync.set({ parameters });
-	chrome.storage.sync.set({ all });
+	chrome.storage.local.set({ records });
+	chrome.storage.local.set({ parameters });
+	chrome.storage.local.set({ all });
 });
 
 

content.js

@@ -131,7 +131,7 @@ function midiEvent(type, data) {
             }
         }
     });
-    chrome.storage.sync.get(['all'], function (result) {
+    chrome.storage.local.get(['all'], function (result) {
         result.all.forEach(element => {
             value = element.value;
             midiValue = data.value;
@@ -341,7 +341,7 @@ function freqToBin(freq, rounding = 'round') {
 }
 
 // Allow to store the current note in an index, for duration computation
-chrome.storage.sync.get(['records'], function (result) {
+chrome.storage.local.get(['records'], function (result) {
     RECORDED = result.records.loop;
     INFOLOOP = result.records.info;
 });
@@ -357,14 +357,14 @@ const record = (status, number) => {
         recordingTime = performance.now();
         recordCount = number;
     }
-    chrome.storage.sync.set({ 'records': { loop: RECORDED, info: INFOLOOP } });
+    chrome.storage.local.set({ 'records': { loop: RECORDED, info: INFOLOOP } });
 };
 
 
 // Start loop
 const loop = (number) => {
     INFOLOOP[number].isLoop = !INFOLOOP[number].isLoop;
-    chrome.storage.sync.set({ 'records': { loop: RECORDED, info: INFOLOOP } });
+    chrome.storage.local.set({ 'records': { loop: RECORDED, info: INFOLOOP } });
     isRecording = false;
     if (RECORDED[number].length) {
         const loopLength = RECORDED[number][RECORDED[number].length - 1].time;
@@ -390,7 +390,7 @@ const reset = (number) => {
     RECORDED[number].length = 0;
     isRecording = false;
     isLoop = false;
-    chrome.storage.sync.set({ 'records': { loop: RECORDED, info: INFOLOOP } });
+    chrome.storage.local.set({ 'records': { loop: RECORDED, info: INFOLOOP } });
 }
 const presets = {
     low: [20, 250],
@@ -431,7 +431,7 @@ function audioEvent() {
     }
     audioSample.shift();
     audioSample.push(meter.volume);
-    chrome.storage.sync.get(['all'], function (result) {
+    chrome.storage.local.get(['all'], function (result) {
         if (result.all.length > 0) {
             result.all.forEach(element => {
                 value = element.value;
@@ -476,7 +476,7 @@ function audioEvent() {
 }
 
 function pureCss() {
-    chrome.storage.sync.get(['all'], function (result) {
+    chrome.storage.local.get(['all'], function (result) {
         if (result.all.length > 0) {
             result.all.forEach(element => {
                 element.templates.forEach(template => {

main.js

@@ -36,7 +36,7 @@ var icon = "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-tabler i
 
 function setAutocompleteParameters() {
 	var autoComplete = [];
-	chrome.storage.sync.get(['parameters'], function (result) {
+	chrome.storage.local.get(['parameters'], function (result) {
 		parameters = JSON.parse(result.parameters);
 		parameters.forEach(p => {
 			autoComplete.push({ value: '[' + p[1] + ']', score: 1, meta: p[3] + " " + p[4] });
@@ -64,7 +64,7 @@ function loadEditor() {
 		enableSnippets: true,
 		enableLiveAutocompletion: true
 	});
-	chrome.storage.sync.get(['css'], function (result) {
+	chrome.storage.local.get(['css'], function (result) {
 		editor.getSession().setValue(result.css)
 	});
 	setAutocompleteParameters();
@@ -107,7 +107,7 @@ function initUi() {
 			$('.midiI').removeClass('active');
 		}
 	});
-	chrome.storage.sync.get(['records'], function (result) {
+	chrome.storage.local.get(['records'], function (result) {
 		$('#loopList').text('');
 		for (let i = 0; i < result.records.loop.length; i++) {
 			if (result.records.loop[i].length > 0) {
@@ -118,7 +118,7 @@ function initUi() {
 			}
 		}
 	});
-	chrome.storage.sync.get(['parameters'], function (result) {
+	chrome.storage.local.get(['parameters'], function (result) {
 		parameters = JSON.parse(result.parameters);
 		var tbl_body = "";
 		parameters.forEach(p => {
@@ -141,7 +141,7 @@ function initUi() {
 }
 $(document).on('input', '#loopList span', function () {
 	spans = $('#loopList span');
-	chrome.storage.sync.get(['records'], function (result) {
+	chrome.storage.local.get(['records'], function (result) {
 		records = result.records;
 		row = 0;
 		for (let i = 0; i < 4; i++) {
@@ -149,7 +149,7 @@ $(document).on('input', '#loopList span', function () {
 			records.info[i].controllerPlayPause = spans[row].textContent;
 			records.info[i].controllerRecord = spans[row + 1].textContent;
 		}
-		chrome.storage.sync.set({ 'records': records });
+		chrome.storage.local.set({ 'records': records });
 	});
 });
 
@@ -169,17 +169,17 @@ function saveParameters() {
 		});
 	});
 	allParameters = JSON.stringify(tbl);
-	chrome.storage.sync.set({ parameters: JSON.stringify(tbl) });
+	chrome.storage.local.set({ parameters: JSON.stringify(tbl) });
 	updateCss();
 	setAutocompleteParameters();
 }
 
 function analyseAll() {
-	chrome.storage.sync.get(['parameters', 'css'], function (result) {
+	chrome.storage.local.get(['parameters', 'css'], function (result) {
 		var all = [];
 		var parser = new CSSParser();
 		var sheet = parser.parse(result.css, false, false);
-		if (sheet.cssRules.length > 0) {
+		if (sheet !== null && sheet.cssRules.length > 0) {
 			sheet.cssRules.forEach(element => {
 				if (element.declarations.length > 0) {
 					element.declarations.forEach(css => {
@@ -282,7 +282,7 @@ function analyseAll() {
 				}
 			});
 		}
-		chrome.storage.sync.set({ all: all });
+		chrome.storage.local.set({ all: all });
 	});
 }
 
@@ -292,7 +292,7 @@ function analyseAll() {
  */
 function updateCss() {
 	let cssStr = editor.getValue();
-	chrome.storage.sync.set({ css: cssStr });
+	chrome.storage.local.set({ css: cssStr });
 	analyseAll();
 	chrome.tabs.query({ active: true, currentWindow: true },
 		function (tabs) {
@@ -419,7 +419,7 @@ $(document).on('click', '#loopReset', function () {
 
 $('#download').on('click', function () {
 	const filename = 'data.json';
-	chrome.storage.sync.get(['parameters'], function (result) {
+	chrome.storage.local.get(['parameters'], function (result) {
 		const jsonStr = JSON.stringify([editor.getValue(), result.parameters]);
 
 		let element = document.createElement('a');
@@ -442,8 +442,8 @@ $('#upload').on('change', function () {
 		const jsonStr = e.target.result;
 		const jsonObj = JSON.parse(jsonStr);
 		console.log(jsonObj);
-		chrome.storage.sync.set({ css: jsonObj[0] });
-		chrome.storage.sync.set({ parameters: jsonObj[1] });
+		chrome.storage.local.set({ css: jsonObj[0] });
+		chrome.storage.local.set({ parameters: jsonObj[1] });
 		editor.setValue(jsonObj[0]);
 		initUi();
 	};

manifest.json

@@ -16,6 +16,7 @@
     "permissions": [
         "storage",
         "activeTab",
+        "unlimitedStorage",
         "scripting"
     ],
     "action": {
@@ -29,7 +30,7 @@
             "js": [
                 "webmidi.js",
                 "cssParser.js",
-                "content.min.js"
+                "content.js"
             ],
             "run_at": "document_end",
             "match_about_blank": true