0

I'm writing a chrome extension with ReactJS that lets users insert subtitles on Youtube. I've been trying to insert subtitles on Youtube with the track element but it's not working.

Youtube has the following element:

<video tabindex="-1" class="video-stream html5-main-video" 
controlslist="nodownload" style="width: 760px; height: 428px; left: 
0px; top: 0px;" src="blob:https://www.youtube.com/eb4c349e-ac8a-465d- 
b6b1-53acfcb66aa8"> 
</video>

I managed to inject a track element with this function:

insertSubtitle() {
  var track = document.createElement("track");
  track.kind = "subtitles";
  track.label =  "YTSUBS";
  track.srclang =  "en";
  track.mode = "showing";
  track.src = "subs.vtt"

   var videoContainer = document.querySelector("video.video-stream.html5-main-video");
   if(videoContainer){
     videoContainer.prepend(track);
     console.log("loaded subs");
   } else {
     console.log("video container not found");
   }
 }

The subs.vtt file is located in the same folder as the javascript file with the code above. When the code loads on Youtube I get the "loaded subs" message but the subtitles won't appear.

I tried changing the track.src URL to gist, tried to start a local server with 

python -m SimpleHTTPServer

as shown here, and suggested here so that I could change the track.src URL to http://localhost:8000/subtitle.vtt. Both solutions didn't work.

Does anyone have an idea why it isn't working?

Roy Scheffers
  • 3,832
  • 11
  • 31
  • 36
Hugo Wesley
  • 1
  • 1
  • "same folder as the javascript file" - is it inside the extension package? In that case you need to declare it in [web_accessible_resources](https://developer.chrome.com/manifest/web_accessible_resources) and use chrome.runtime.getURL as shown in the documentation. As for localhost URL, it didn't work because youtube page is served with a restrictive CSP header. You can also try to use data URI for the subtitles. – wOxxOm Aug 07 '18 at 18:05
  • I'll try and see if it works. Thank You – Hugo Wesley Aug 07 '18 at 19:04
  • So I added the subtitles.vtt file to the manifest.json in the web_accessible_resources and added the chrome.runtime.getURL to the inserSubtitles function as the URL for the track but that didn't work. – Hugo Wesley Aug 08 '18 at 06:39
  • Maybe YouTube player uses a different approach since it has its own subtitle support. Or maybe your URL gets blocked due to a restrictive page CSP - check devtools network panel. – wOxxOm Aug 08 '18 at 06:47
  • tried with data uri that didn't work either. – Hugo Wesley Aug 08 '18 at 07:01
  • sorry what am I suppose to look for in the network panel? – Hugo Wesley Aug 08 '18 at 07:02
  • with this https://github.com/yashagarwal1411/SubtitlesForYoutube I can drag and drop subtitles on youtube, just need to read the source code to figure out how they do it. – Hugo Wesley Aug 08 '18 at 07:05
  • There will be a cancelled request for the subtitles. Or maybe a console error message. – wOxxOm Aug 08 '18 at 07:05
  • There are no cancelled requests or console errors. There are no requests for the subtitle – Hugo Wesley Aug 08 '18 at 07:19

1 Answers1

0

For inserting subtitles on Youtube, I followed this post. Instead of using the script tag I used a textarea to get the input from users.

Hugo Wesley
  • 1
  • 1