initial import

.gitignore

@@ -0,0 +1 @@
+.DS_Store

inject.css

@@ -0,0 +1,49 @@
+.tc-videoHost {
+  position: relative;
+  text-align: center;
+}
+
+.tc-videoController {
+  position: absolute;
+  background: black;
+  color: white;
+
+  border-radius: 5px;
+  padding: 5px;
+  margin: 10px;
+  line-height: 1.8em;
+
+  cursor: pointer;
+  z-index: 9999999;
+  opacity: 0.3;
+
+  font-family: Verdana;
+  font-size: 13px;
+}
+
+.tc-videController button {
+}
+
+.tc-videoController:hover {
+  opacity: 0.7;
+}
+
+.tc-videoController:hover .tc-controls {
+  display: inline;
+}
+
+.tc-controls {
+  display: none;
+  margin-left:1em;
+}
+
+.tc-controls button {
+  color: black !important;
+  background: white !important;
+  font-weight: bold !important;
+  margin: 0 2px !important;
+  border-radius: 5px !important;
+  padding: 3px 8px !important;
+  font-size: 15px !important;
+  line-height: 15px !important;
+}

inject.js

@@ -0,0 +1,106 @@
+chrome.extension.sendMessage({}, function(response) {
+  var readyStateCheckInterval = setInterval(function() {
+    if (document.readyState === "complete") {
+      clearInterval(readyStateCheckInterval);
+
+      var tc = tc || {};
+      tc.videoController = function(target) {
+        this.video = target;
+        this.initializeControls();
+
+        this.speedIndicator.textContent = this.getSpeed();
+        this.video.addEventListener('ratechange', function(event) {
+          this.speedIndicator.textContent = this.getSpeed();
+        }.bind(this));
+      };
+
+      tc.videoController.prototype.getSpeed = function() {
+        return parseFloat(this.video.playbackRate).toFixed(2);
+      }
+
+      tc.videoController.prototype.remove = function() {
+        this.parentElement.removeChild(this);
+      }
+
+      tc.videoController.prototype.initializeControls = function() {
+        var fragment = document.createDocumentFragment();
+        var container = document.createElement('div');
+        var speedIndicator = document.createElement('span');
+
+        var controls = document.createElement('span');
+        var fasterButton = document.createElement('button');
+        var slowerButton = document.createElement('button');
+        var rewindButton = document.createElement('button');
+
+        rewindButton.innerHTML = '«';
+        fasterButton.textContent = '+';
+        slowerButton.textContent = '-';
+
+        controls.appendChild(rewindButton);
+        controls.appendChild(slowerButton);
+        controls.appendChild(fasterButton);
+
+        container.appendChild(speedIndicator);
+        container.appendChild(controls);
+
+        container.classList.add('tc-videoController');
+        controls.classList.add('tc-controls');
+
+        fragment.appendChild(container);
+        this.video.parentElement.insertBefore(fragment, this.video);
+        this.video.classList.add('tc-videoHost');
+
+        this.speedIndicator = speedIndicator;
+
+        container.addEventListener('click', function(e) {
+          if      (e.target === slowerButton) { runAction('slower') }
+          else if (e.target === fasterButton) { runAction('faster') }
+          else if (e.target === rewindButton) { runAction('rewind') }
+          else {
+            container.nextSibling.classList.add("vc-cancelled")
+            container.remove();
+          }
+
+          e.preventDefault();
+          e.stopPropagation();
+        }, true);
+      }
+
+      function runAction(action) {
+        var videoTags = document.getElementsByTagName('video');
+        videoTags.forEach = Array.prototype.forEach;
+
+        videoTags.forEach(function(v) {
+          if (!v.paused && !v.classList.contains("vc-cancelled")) {
+            if (action === 'rewind') {
+              v.playbackRate -= 0.20;
+              v.currentTime -= 10;
+            } else if (action === 'faster') { v.playbackRate += 0.10 }
+              else if (action === 'slower') { v.playbackRate -= 0.10 }
+          }
+        });
+      }
+
+      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
+
+        return false;
+      }, true);
+
+      document.addEventListener('DOMNodeInserted', function(event) {
+        var node = event.target || null;
+        if (node && node.nodeName === 'VIDEO') {
+          new tc.videoController(node);
+        }
+      });
+
+      var videoTags = document.getElementsByTagName('video');
+      videoTags.forEach = Array.prototype.forEach;
+      videoTags.forEach(function(video) {
+        var control = new tc.videoController(video);
+      });
+    }
+  }, 10);
+});

manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "HTML5 Video Playback Speed Controller",
+  "version": "0.1.0",
+  "manifest_version": 2,
+  "description": "Lean in and speed up your video learning with handy shortcuts to accelerate, slow-down, and rewind your video right from your keyboard. This extension adds a handy video controller to any HTML5 video, regardless of the type of player. Shortcuts: 'a' for rewind, 's' for slower, and 'd' for faster playback. To remove the controller simply click on the speed indicator in the top right.",
+  "homepage_url": "https://github.com/igrigorik/videospeed",
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "permissions": [ "activeTab" ],
+  "content_scripts": [{
+      "all_frames": true,
+      "matches": [ "http://*/*", "https://*/*"],
+      "css": [ "inject.css" ],
+      "js":  [ "inject.js" ]
+    }
+  ]
+}