feat: keybind for save (ctrl+s) and activate (ctrl+o)

main.js

@@ -35,6 +35,7 @@ function loadEditor() {
 				{ value: '[onset:A]', score: 1, meta: 'Audio note A' },
 				{ value: '[onset:A#]', score: 1, meta: 'Audio note A#' },
 				{ value: '[onset:B]', score: 1, meta: 'Audio note B' },
+				{ value: '[attack]', score: 1, meta: 'Audio attack' },
 				{ value: '[note:24,0,1]', score: 1, meta: 'MIDI Note C between 0 and 1.' },
 				{ value: '[note:26,0,1]', score: 1, meta: 'MIDI Note D between 0 and 1.' },
 				{ value: '[note:28,0,1]', score: 1, meta: 'MIDI Note E between 0 and 1.' },
@@ -148,6 +149,46 @@ $('#save').on('click', function () {
 	updateCss();
 });
 
+$(document).keydown(function (event) {
+	// If Control or Command key is pressed and the S key is pressed
+	// run save function. 83 is the key code for S.
+	if ((event.ctrlKey || event.metaKey) && event.which == 83) {
+		// Save Function
+		event.preventDefault();
+		updateCss();
+		return false;
+	}
+}
+);
+$(document).keydown(function (event) {
+	// If Control or Command key is pressed and the S key is pressed
+	// run save function. 83 is the key code for S.
+	if ((event.ctrlKey || event.metaKey) && event.which == 79) {
+		// Save Function
+		event.preventDefault();
+		activateButton = !activateButton;
+		chrome.storage.sync.set({ activate: activateButton }, function () {
+			if (activateButton) {
+				$('#onOff').text('Désactiver');
+				var API = chrome || browser;
+				API.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+					if (tabs[0] && tabs[0].favIconUrl) {
+						chrome.storage.sync.set({ activateFav: tabs[0].favIconUrl });
+					}
+				});
+			} else {
+				$('#onOff').text('Activer');
+			}
+			chrome.tabs.query({ active: true, currentWindow: true },
+				function (tabs) {
+					chrome.tabs.sendMessage(tabs[0].id, { type: 'start', data: activateButton });
+				}
+			);
+		});
+		return false;
+	}
+}
+);
 
 $('#onOff').on('click', function () {
 	activateButton = !activateButton;

popup.html

@@ -15,8 +15,8 @@
 		Audio : <div class="audioI"></div>
 	</div>
 	<div class="actions">
-		<button id="onOff">Activer</button>
-		<button id="save">Enregister</button>
+		<button id="onOff">Activer<br><kbd>CTR</kbd> + <kbd>O</kbd></button>
+		<button id="save">Enregister<br><kbd>CTR</kbd> + <kbd>S</kbd></button>
 		<p>Appareils MIDI :<br><span id="midiDevices">Aucun</span></p>
 		<p>Controle MIDI ID :<br><span id="midiEvent">Aucun</span></p>
 	</div>

style.css

@@ -87,3 +87,17 @@ body {
 			  animation-timing-function: ease-out;
 	}
   }
+
+  kbd {
+    background-color: rgb(17, 17, 17);
+    border-radius: 3px;
+    border: 1px solid #353535;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
+    color: rgb(202, 202, 202);
+    display: inline-block;
+    font-size: .85em;
+    font-weight: 700;
+    line-height: 1;
+    padding: 2px 4px;
+    white-space: nowrap;
+   }