feat: add debug mode

background.js

+let activate = false;
 let css = `body {
 	background-color: [couleur];
 }
@@ -9,9 +10,7 @@ h1, h2 {
 	color: rgb([chiffre 0:255],255,255);
 }`;
 let parameters = `[[\"       \",\"typo\",\"sans-serif;serif;cursive;fantasy\",\"r\",\"note:10\",\"onset:E\"],[\"       \",\"chiffre\",\"0:1000\",\"i:100\",\"cc:60\",\"onset:D\"],[\"       \",\"chiffre2\",\"0:200\",\"d\",\"cc:60\",\"loud\"],[\"       \",\"couleur\",\"#000:#fff\",\"r\",\"cc:60\",\"onset:E\"],[\"       \",\"opacité\",\"0:1\",\"d\",\"cc:1\",\"hi\"]]`;
-let activate = false;
-let audioB = false;
-let midiB = false;
+let all = "";
 let audioI = false;
 let midiI = false;
 let popup = false;
@@ -40,27 +39,26 @@ let records = {
 		[]
 	],
 	info: [
-		{isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''},
-		{isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''},
-		{isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''},
-		{isLoop:false, isRecording:false, controllerPlayPause: '', controllerRecord: ''}
+		{ isLoop: false, isRecording: false, controllerPlayPause: '', controllerRecord: '' },
+		{ isLoop: false, isRecording: false, controllerPlayPause: '', controllerRecord: '' },
+		{ isLoop: false, isRecording: false, controllerPlayPause: '', controllerRecord: '' },
+		{ isLoop: false, isRecording: false, controllerPlayPause: '', controllerRecord: '' }
 	]
 };
-let all = "";
+let debug = false;
 
 //Initialize the CSS storage on startup
 chrome.runtime.onInstalled.addListener(() => {
-	chrome.storage.local.set({ css });
 	chrome.storage.sync.set({ activate });
-	chrome.storage.sync.set({ audioB });
-	chrome.storage.sync.set({ midiB });
+	chrome.storage.local.set({ css });
+	chrome.storage.local.set({ parameters });
+	chrome.storage.local.set({ all });
 	chrome.storage.sync.set({ audioI });
 	chrome.storage.sync.set({ midiI });
 	chrome.storage.sync.set({ popup });
 	chrome.storage.sync.set({ loopPlay });
 	chrome.storage.local.set({ records });
-	chrome.storage.local.set({ parameters });
-	chrome.storage.local.set({ all });
+	chrome.storage.sync.set({ debug });
 });
 
 

content.js

@@ -6,6 +6,7 @@ var buflen = 1024;
 var buf = new Float32Array(buflen);
 var audio = false;
 var midi = false;
+var debug = false;
 var audioSample = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 
 var parameterSave = {};
@@ -214,7 +215,8 @@ function audioApi() {
             }
         }
         else {
-            console.info('Audio suspend');
+            if (debug)
+                console.info('Audio suspend');
             if (window.streamReference) {
                 audioContext.suspend();
                 window.streamReference.getAudioTracks().forEach(function (track) {
@@ -237,7 +239,8 @@ function didntGetStream() {
     chrome.storage.sync.set({ audioI: false });
     audio = false;
     chrome.runtime.sendMessage({ type: 'updateUi', data: false });
-    console.error('Stream generation failed.');
+    if (debug)
+        console.error('Stream generation failed.');
 }
 
 var mediaStreamSource = null;
@@ -252,7 +255,8 @@ async function gotStream(stream) {
     mediaStreamSource.connect(analyser);
     // Create a new volume meter and connect it.
     await audioContext.audioWorklet.addModule(chrome.runtime.getURL("worklet.js"));
-    console.log(chrome.runtime.getURL("worklet.js"));
+    if (debug)
+        console.log(chrome.runtime.getURL("worklet.js"));
     const node = new AudioWorkletNode(audioContext, 'vumeter');
     node.port.onmessage = event => {
         let _volume = 0
@@ -263,8 +267,8 @@ async function gotStream(stream) {
     }
     mediaStreamSource.connect(node);
     audioContext.resume();
-
-    console.info('Audio start');
+    if (debug)
+        console.info('Audio start');
     chrome.storage.sync.set({ audioI: true });
     chrome.runtime.sendMessage({ type: 'updateUi', data: true });
     // kick off the visual updating
@@ -454,7 +458,8 @@ function audioEvent() {
                             value = value.replace('[' + template.templateFull + ']', range(template, 1));
                         }
                         else if (attack && template.eventType == 'attack') {
-                            console.log('Attack');
+                            if (debug)
+                                console.log('Attack');
                             eventIn = true;
                             value = value.replace('[' + template.templateFull + ']', '');
                         }
@@ -497,7 +502,8 @@ function pureCss() {
  * @param {type, data} message parameters 
  */
 function onMessage({ type, data }) {
-    console.info('Message received from CSSLSD back :', type, data);
+    if (debug)
+        console.info('Message received from CSSLSD back :', type, data);
     switch (type) {
         case 'update': {
             pureCss();
@@ -540,15 +546,27 @@ function onMessage({ type, data }) {
             chrome.runtime.sendMessage({ type: 'updateUi', data: false });
             break;
         }
+        case 'debug': {
+            if (debug) {
+                chrome.storage.sync.set({ debug: false });
+                debug = false;
+            }
+            else {
+                chrome.storage.sync.set({ debug: true });
+                debug = true;
+            }
+            break;
+        }
     }
 }
 
 
 chrome.storage.sync.set({ popup: true });
 chrome.runtime.onMessage.addListener(onMessage);
-chrome.storage.sync.get(['activate'], function (result) {
+chrome.storage.sync.get(['activate', 'debug'], function (result) {
     if (result.activate) {
         audioApi();
         midiApi();
     }
+    debug = result.debug;
 });

main.js

@@ -161,6 +161,9 @@ $(document).on('input', '#loopList span', function () {
 $(document).on('click', '#doc', function () {
 	chrome.tabs.create({ 'url': "/README.html" });
 });
+$(document).on('click', '#debug', function () {
+	sendMessage({ type: 'debug', data: false });
+});
 
 var allParameters;
 document.getElementById("parameters").addEventListener("input", function () {

popup.html

@@ -16,11 +16,11 @@
       <p>Controle MIDI ID :<br /><span id="midiEvent">Aucun</span></p>
       <div class="infos">
         <div style="flex: 1 1 auto"></div>
-        Etat
+        ON/OFF
         <div id="onOff" class="onOff"></div>
         MIDI
         <div class="midiI"></div>
-        Audio
+        AUDIO
         <div class="audioI"></div>
       </div>
     </div>
@@ -235,7 +235,7 @@
     </div>
 
     <p style="text-align: center">
-      &COPY; 2022 - Universite de Lille - <a id="doc">Voir la documentation</a>
+      &COPY; 2022 - Universite de Lille - <a id="doc">Voir la documentation</a> - <a id="debug">Mode debug</a> 
     </p>
     <script src="cssParser.js" type="text/javascript" charset="utf-8"></script>
     <script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>