Added Options Page

Added Options Page allowing user to customize shortcuts and other
parameters

inject.js

@@ -92,18 +92,24 @@ chrome.extension.sendMessage({}, function(response) {
         videoTags.forEach(function(v) {
           if (!v.paused && !v.classList.contains("vc-cancelled")) {
             if (action === 'rewind') {
-              v.playbackRate -= 0.10;
-              v.currentTime -= 10;
-            } else if (action === 'faster') { v.playbackRate += 0.10 }
-              else if (action === 'slower') { v.playbackRate = Math.max(v.playbackRate - 0.10, 0.00) }
+              v.playbackRate -= speedStep;
+              v.currentTime -= rewindTime;
+            } else if (action === 'faster') { 
+                v.playbackRate += speedStep }
+              else if (action === 'slower') { 
+                  v.playbackRate = Math.max(v.playbackRate - speedStep, 0.00) }
           }
         });
       }
 
-      document.addEventListener('keydown', function(event) {
-        if      (event.keyCode == 65) { runAction('rewind') } // A
-        else if (event.keyCode == 68) { runAction('faster') } // D
-        else if (event.keyCode == 83) { runAction('slower') } // S
+      document.addEventListener('keypress', function(event) {
+        
+        // if lowercase letter pressed, check for uppercase key code
+        var keyCode = String.fromCharCode(event.keyCode).toUpperCase().charCodeAt();
+
+        if      (keyCode == rewindKeyCode) { runAction('rewind') }
+        else if (keyCode == fasterKeyCode) { runAction('faster') } 
+        else if (keyCode == slowerKeyCode) { runAction('slower') }
 
         return false;
       }, true);
@@ -120,6 +126,23 @@ chrome.extension.sendMessage({}, function(response) {
       videoTags.forEach(function(video) {
         var control = new tc.videoController(video);
       });
+        
+      var speedStep, rewindTime, rewindKeyCode, slowerKeyCode, fasterKeyCode;
+      
+      chrome.storage.sync.get({ 
+        speedStep:        0.25, // default 0.25x
+        rewindTime:       10,   // default 10s
+          rewindKeyCode:  65,   // default: A
+          slowerKeyCode:  83,   // default: S
+          fasterKeyCode:  68    // default: D
+        },              
+        function(storage) { 
+          speedStep     = Number(storage.speedStep);
+          rewindTime    = Number(storage.rewindTime);
+          rewindKeyCode = Number(storage.rewindKeyCode);
+          slowerKeyCode = Number(storage.slowerKeyCode);
+          fasterKeyCode = Number(storage.fasterKeyCode);
+      });                     
     }
   }, 10);
 });

manifest.json

@@ -10,6 +10,7 @@
     "128": "icons/icon128.png"
   },
   "permissions": [ "activeTab", "storage" ],
+  "options_page": "options.html",
   "content_scripts": [{
       "all_frames": true,
       "matches": [ "http://*/*", "https://*/*"],

options.css

@@ -0,0 +1,101 @@
+body {
+	margin: 0;
+	padding-left: 15px;
+	padding-top: 53px;
+	font-family: sans-serif;
+	font-size: 12px;
+	color: rgb(48, 57, 66);
+}
+
+h1, h2, h3 {
+	font-weight: normal;
+	line-height: 1;
+    user-select: none;
+	cursor: default;
+}
+h1 {
+	font-size: 1.5em;
+	margin: 21px 0 13px;
+}
+h3 {
+	font-size: 1.2em;
+	margin-bottom: 0.8em;
+	color: black;
+}
+p {
+	margin: 0.65em 0;
+}
+
+header {
+	position: fixed;
+	top: 0;
+	left: 15px;
+	right: 0;
+	border-bottom: 1px solid #EEE;
+	background: linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92));
+}
+header, section {
+	min-width: 600px;
+	max-width: 738px;
+}
+section {
+	padding-left: 18px;
+	margin-top: 8px;
+	margin-bottom: 24px;
+}
+section h3 {
+	margin-left: -18px;
+}
+
+button, select {
+	-webkit-appearance: none;
+	position: relative;
+	
+	margin: 0 1px 0 0;
+	padding: 0 10px;
+	min-width: 4em;
+	min-height: 2em;
+	
+	background-image:         linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE);
+	border: 1px solid rgba(0,0,0,0.25);
+	border-radius: 2px;
+	outline: none;
+	box-shadow: 0 1px 0 rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.75);
+	color: #444;
+	text-shadow: 0 1px 0 rgb(240,240,240);
+	font: inherit;
+	
+    user-select: none;
+}
+
+select {
+    padding-right: 20px;
+
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAaUlEQVQoz2P4//8/A7UwdkEGhiggTsODo4g2LBEImJmZvwE1/UfHIHGQPNGGAbHCggULFrKxsf1ENgjEB4mD5EnxJoaByAZB5Yk3DNlAPj6+L8gGkWUYzMC3b982IRtEtmFQjaxYxDAwAGi4TwMYKNLfAAAAAElFTkSuQmCC'), linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE);
+    background-position: right center;
+    background-repeat: no-repeat;
+}
+
+input[type="text"] {
+    width: 120px;
+}
+
+.row {
+    margin: 5px 0px;
+}
+
+label {
+    display: inline-block;
+    width: 150px;
+}
+
+#rewindTime {
+    width: 69px;
+    text-align: center;
+}
+
+#status {
+    color: #9D9D9D;
+    display: inline-block;
+    margin-left: 50px;
+}

options.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>HTML5 Video Playback Speed Controller Options</title>
+		<link rel="stylesheet" type="text/css" href="options.css" />	
+	</head>
+	<body>
+		<header>
+			<h1>HTML5 Video Playback Speed Controller</h1>
+		</header>
+        
+        <section>
+            <h3>Shortcuts</h3>
+            <div class="row">
+                <label for="rewindKeyInput">Rewind</label>
+                <input id="rewindKeyInput" placeholder="Press a Key" type="text" value=""/>
+            </div>
+            <div class="row">
+                <label for="slowerKeyInput">Slow Down</label>
+                <input id="slowerKeyInput" placeholder="Press a Key" type="text" value=""/>
+            </div>
+            <div class="row">
+                <label for="fasterKeyInput">Speed Up</label>
+                <input id="fasterKeyInput" placeholder="Press a Key" type="text" value=""/>
+            </div>
+        </section>
+      
+        <section>
+			<h3>Others</h3>
+            <div class="row">
+                <label for="rewindTime">Rewind Time (s)</label> 
+                <input id="rewindTime" type="text" value=""/> 
+            </div>
+            <div class="row">
+                <label for="speedStep">Speed change step</label>
+                <select id="speedStep">
+                    <option value="0.10">0.10 x</option>
+                    <option value="0.20">0.20 x</option>
+                    <option value="0.25">0.25 x</option>
+                    <option value="0.50">0.50 x</option>
+                    <option value="0.75">0.75 x</option>
+                    <option value="1.00">1.00 x</option>
+                </select>
+            </div>
+        </section>
+		
+        <button id="save">Save</button>  <button id="restore">Restore Defaults</button>
+        <div id="status"></div>
+        
+	</body>
+    <script type="text/javascript" src="options.js"></script>
+</html>

options.js

@@ -0,0 +1,107 @@
+function recordKeyPress(e) {
+  var normalizedKeyCode = String.fromCharCode(e.keyCode).toUpperCase().charCodeAt();
+  e.target.value = getInputMsg(normalizedKeyCode);
+  e.target.keyCode = normalizedKeyCode;
+  
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+function inputFocus(e) {
+   e.target.value = "";
+};
+
+function inputBlur(e) {
+   e.target.value = getInputMsg(e.target.keyCode);
+};
+
+function updateShortcutInputText(inputId, keyCode) {
+  document.getElementById(inputId).value = getInputMsg(keyCode);
+  document.getElementById(inputId).keyCode = keyCode;
+}
+
+function getInputMsg(keyCode) {
+  return "Shortcut set to " + String.fromCharCode(keyCode).toUpperCase(); 
+};
+
+// Saves options to chrome.storage
+function save_options() {
+ 
+  var speedStep     = Number(document.getElementById('speedStep').value);
+  var rewindTime    = document.getElementById('rewindTime').value;
+  var rewindKeyCode = document.getElementById('rewindKeyInput').keyCode;
+  var slowerKeyCode = document.getElementById('slowerKeyInput').keyCode;
+  var fasterKeyCode = document.getElementById('fasterKeyInput').keyCode;
+  
+  rewindTime    = isNaN(rewindTime) ? 10 : rewindTime;
+  rewindKeyCode = isNaN(rewindKeyCode) ? 65 : rewindKeyCode;
+  slowerKeyCode = isNaN(slowerKeyCode) ? 83 : slowerKeyCode;
+  fasterKeyCode = isNaN(fasterKeyCode) ? 68 : fasterKeyCode;
+
+  chrome.storage.sync.set({
+    speedStep:      speedStep,
+    rewindTime:     rewindTime,
+    rewindKeyCode:  rewindKeyCode,
+    slowerKeyCode:  slowerKeyCode,
+    fasterKeyCode:  fasterKeyCode
+  }, function() {
+    // Update status to let user know options were saved.
+    var status = document.getElementById('status');
+    status.textContent = 'Options saved';
+    setTimeout(function() {
+      status.textContent = '';
+    }, 1000);
+  });
+}
+
+// Restores options from chrome.storage
+function restore_options() {
+  chrome.storage.sync.get({
+    speedStep: 0.25,
+    rewindTime: 10,
+    rewindKeyCode: 65,
+    slowerKeyCode: 83,
+    fasterKeyCode: 68
+  }, function(storage) {
+    document.getElementById('speedStep').value = storage.speedStep.toFixed(2);
+    document.getElementById('rewindTime').value = storage.rewindTime;
+    updateShortcutInputText('rewindKeyInput', storage.rewindKeyCode);
+    updateShortcutInputText('slowerKeyInput', storage.slowerKeyCode);
+    updateShortcutInputText('fasterKeyInput', storage.fasterKeyCode);
+  });
+}
+
+function restore_defaults() {
+  
+  chrome.storage.sync.set({
+    speedStep: 0.25,
+    rewindTime: 10,
+    rewindKeyCode: 65,
+    slowerKeyCode: 83,
+    fasterKeyCode: 68
+  }, function() {
+    restore_options();
+    // Update status to let user know options were saved.
+    var status = document.getElementById('status');
+    status.textContent = 'Default options restored';
+    setTimeout(function() {
+      status.textContent = '';
+    }, 1000);
+  });
+  
+}
+
+// Event Listeners
+document.addEventListener('DOMContentLoaded', restore_options);
+document.getElementById('save').addEventListener('click', save_options);
+document.getElementById('restore').addEventListener('click', restore_defaults);
+
+initShortcutInput('rewindKeyInput');
+initShortcutInput('slowerKeyInput');
+initShortcutInput('fasterKeyInput');
+
+function initShortcutInput(inputId) {
+  document.getElementById(inputId).addEventListener('focus', inputFocus);
+  document.getElementById(inputId).addEventListener('blur', inputBlur);
+  document.getElementById(inputId).addEventListener('keypress', recordKeyPress);
+}