Merge pull request #80 from oggy/frames2

Control videos in iframes

inject.js

@@ -16,7 +16,6 @@ chrome.extension.sendMessage({}, function(response) {
   };
 
   var controllerAnimation;
-  var readyStateCheckInterval;
   chrome.storage.sync.get(tc.settings, function(storage) {
     tc.settings.speed = Number(storage.speed);
     tc.settings.speedStep = Number(storage.speedStep);
@@ -28,17 +27,12 @@ chrome.extension.sendMessage({}, function(response) {
     tc.settings.fasterKeyCode = Number(storage.fasterKeyCode);
     tc.settings.advanceKeyCode = Number(storage.advanceKeyCode);
     tc.settings.rememberSpeed = Boolean(storage.rememberSpeed);
+  });
 
-      readyStateCheckInterval = setInterval(initializeVideoSpeed, 10);
+  function defineVideoController() {
-    }
-  );
-
-  function initializeVideoSpeed() {
-    if (document.readyState === 'complete') {
-      clearInterval(readyStateCheckInterval);
-
     tc.videoController = function(target) {
       this.video = target;
+      this.document = target.ownerDocument;
       if (!tc.settings.rememberSpeed) {
         tc.settings.speed = 1.0;
       }
@@ -70,6 +64,8 @@ chrome.extension.sendMessage({}, function(response) {
     }
 
     tc.videoController.prototype.initializeControls = function() {
+      var document = this.document;
+
       var fragment = document.createDocumentFragment();
       var container = document.createElement('div');
       var speedIndicator = document.createElement('span');
@@ -109,13 +105,13 @@ chrome.extension.sendMessage({}, function(response) {
 
       container.addEventListener('click', function(e) {
         if (e.target === slowerButton) {
-            runAction('slower')
+          runAction('slower', document)
         } else if (e.target === fasterButton) {
-            runAction('faster')
+          runAction('faster', document)
         } else if (e.target === rewindButton) {
-            runAction('rewind')
+          runAction('rewind', document)
         } else if (e.target === advanceButton) {
-            runAction('advance')
+          runAction('advance', document)
         } else if (e.target === hideButton) {
           container.nextSibling.classList.add('vc-cancelled')
           container.remove();
@@ -137,12 +133,76 @@ chrome.extension.sendMessage({}, function(response) {
         e.stopPropagation();
       }, true);
     }
-
-      function setSpeed(v, speed) {
-        v.playbackRate = speed;
   }
 
-      function runAction(action) {
+  function initializeWhenReady(document) {
+    var readyStateCheckInterval = setInterval(function() {
+      if (document.readyState === 'complete') {
+        clearInterval(readyStateCheckInterval);
+        initializeNow(document);
+      }
+    }, 10);
+  }
+
+  function initializeNow(document) {
+      if (document === window.document) {
+        defineVideoController();
+      } else {
+        var link = document.createElement('link');
+        link.href = chrome.extension.getURL('inject.css');
+        link.type = 'text/css';
+        link.rel = 'stylesheet';
+        document.head.appendChild(link);
+      }
+
+      document.addEventListener('keypress', function(event) {
+        // if lowercase letter pressed, check for uppercase key code
+        var keyCode = String.fromCharCode(event.keyCode).toUpperCase().charCodeAt();
+
+        // Ignore keypress event if typing in an input box
+        if ((document.activeElement.nodeName === 'INPUT'
+              && document.activeElement.getAttribute('type') === 'text')
+            || document.activeElement.isContentEditable) {
+          return false;
+        }
+
+        if (keyCode == tc.settings.rewindKeyCode) {
+          runAction('rewind', document)
+        } else if (keyCode == tc.settings.advanceKeyCode) {
+          runAction('advance', document)
+        } else if (keyCode == tc.settings.fasterKeyCode) {
+          runAction('faster', document)
+        } else if (keyCode == tc.settings.slowerKeyCode) {
+          runAction('slower', document)
+        } else if (keyCode == tc.settings.resetKeyCode) {
+          runAction('reset', document)
+        }
+
+        return false;
+      }, true);
+
+      document.addEventListener('DOMNodeInserted', function(event) {
+        var node = event.target || null;
+        if (node && node.nodeName === 'VIDEO') {
+          new tc.videoController(node);
+        }
+      });
+
+      var forEach = Array.prototype.forEach;
+      var videoTags = document.getElementsByTagName('video');
+      forEach.call(videoTags, function(video) {
+        new tc.videoController(video);
+      });
+
+      var frameTags = document.getElementsByTagName('iframe');
+      forEach.call(frameTags, function(frame) {
+        // Ignore frames we don't have permission to access (different origin).
+        try { var childDocument = frame.contentDocument } catch (e) { return }
+        initializeWhenReady(childDocument);
+      });
+  }
+
+  function runAction(action, document) {
     var videoTags = document.getElementsByTagName('video');
     videoTags.forEach = Array.prototype.forEach;
 
@@ -153,17 +213,17 @@ chrome.extension.sendMessage({}, function(response) {
         } else if (action === 'advance') {
           v.currentTime += tc.settings.advanceTime;
         } else if (action === 'faster') {
-              // Maxium playback speed in Chrome is set to 16:
+          // Maximum playback speed in Chrome is set to 16:
           // https://code.google.com/p/chromium/codesearch#chromium/src/media/blink/webmediaplayer_impl.cc&l=64
           var s = Math.min(v.playbackRate + tc.settings.speedStep, 16);
-              setSpeed(v, Number(s.toFixed(2)));
+          v.playbackRate = Number(s.toFixed(2));
         } else if (action === 'slower') {
           // Audio playback is cut at 0.05:
           // https://code.google.com/p/chromium/codesearch#chromium/src/media/filters/audio_renderer_algorithm.cc&l=49
           var s = Math.max(v.playbackRate - tc.settings.speedStep, 0);
-              setSpeed(v, Number(s.toFixed(2)));
+          v.playbackRate = Number(s.toFixed(2));
         } else if (action === 'reset') {
-            	setSpeed(v, 1.0);
+          v.playbackRate = 1.0;
         }
 
         // show controller on keyboard input
@@ -190,44 +250,5 @@ chrome.extension.sendMessage({}, function(response) {
     });
   }
 
-      document.addEventListener('keypress', function(event) {
+  initializeWhenReady(document);
-        // if lowercase letter pressed, check for uppercase key code
-        var keyCode = String.fromCharCode(event.keyCode).toUpperCase().charCodeAt();
-
-        // Ignore keypress event if typing in an input box
-        if ((document.activeElement.nodeName === 'INPUT'
-              && document.activeElement.getAttribute('type') === 'text')
-            || document.activeElement.isContentEditable) {
-          return false;
-        }
-
-        if (keyCode == tc.settings.rewindKeyCode) {
-          runAction('rewind')
-        } else if (keyCode == tc.settings.advanceKeyCode) {
-          runAction('advance')
-        } else if (keyCode == tc.settings.fasterKeyCode) {
-          runAction('faster')
-        } else if (keyCode == tc.settings.slowerKeyCode) {
-          runAction('slower')
-        } else if (keyCode == tc.settings.resetKeyCode) {
-          runAction('reset')
-        }
-
-        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);
-      });
-    }
-  }
 });

manifest.json

@@ -31,5 +31,8 @@
       "css": [ "inject.css" ],
       "js":  [ "inject.js" ]
     }
+  ],
+  "web_accessible_resources": [
+    "inject.css"
   ]
 }