getCurrentTime() for YouTube Video

Question

I'm writing a Chrome Extension in Javascript and I want to get the current time for the playing video on youtube.com. I tried using the answer from question Getting Current YouTube Video Time , e.g.:

ytplayer = document.getElementById("movie_player");

ytplayer.getCurrentTime();

However I do get following error: "Uncaught TypeError: Cannot read property 'getCurrentTime' of null";

What I am doing wrong? I tried different values for the ElementId - movie_player, player....

Any help is appreciated. Thanks in advance.

Cheers.

edit:

Here is my manifest:

{
  "manifest_version": 2,

  "name": "",
  "description": "",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "basic.html"
  },
  "permissions": [
    "tabs",
    "activeTab", "http://*/*", "https://*/*"
  ]
}

Another thing is: If I execute this code:

ytplayer = document.getElementById("movie_player");

ytplayer.getCurrentTime();

In the Javascript console on a Youtube Page it works fine and returns the current time. If, however I execute this value from the extension or the console of the extension, the first line return value null.

So, as Ben assumed below, the issue seems to be that my extension doesn't even access the Youtube page.

Any help is appreciated, so thanks in advance.

Cheers

Answer 1

As Ben correctly assumed, you're executing the code in the context of your background page, which is wrong.

To interact with other pages, you need to inject a content script in them. See overview of that here. You'll probably need to learn how Messaging works so you can gather data in a content script and communicate it to the background page.

To make a minimal example, you can have a file inject.js

// WARNING: This example is out of date
// For the current HTML5 player, see other answers' code snippets
ytplayer = document.getElementById("movie_player");
ytplayer.getCurrentTime();

And in your background page script, you can inject that into the current page as follows (when the button is clicked, for instance)

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    file: 'inject.js'
  });
});

Then, you'll see the result of the execution in the console of the currently open page. To report the result back, you'll need to use chrome.runtime.sendMessage

Answer 2

Use the following code works for chrome extension:

video = document.getElementsByClassName('video-stream')[0];
console.log(video);
console.log(video.currentTime);

Answer 3

In 2020, it seems we should use: player.playerInfo.currentTime.

full code on codepen

Answer 4

you can only use getElementById when you´r referencing to the correct page. You´r using the right id. if you´r trying to access the play form another page you can use the jquery .load() function

---------EDIT----------

in the sample they do it like so: function getCurrentTime() { var currentTime = player.getCurrentTime(); return roundNumber(currentTime, 3); }