netflix copy subtitles on clipboard

readme.md

This is a simple script which copy subtitles when you are watching netflix videos on web browsers.

PS: This "gist" is the same situation that I described before to solve a simple problem that I went trought. See more on link: https://gist.github.com/marlonklc/4adad7dad5e677e121f4c17a0a2503e0

Where did I get this idea from ?

I have this brillant(shit) idea when I was watching series/movies on netflix and I tried to select any text, but they don't allow you select any text on subtitles. So, I thought in my mind "hey, I'm a programmer I'm able to that brillant(shit) things", so that is the result 😃

What does it do ?

This script create a button on middle bottom on screen (it doesn't interfere with reading the subtitles, I tested it, trust in me 😉) and when you click on it, it's trigger a event to get the current text from scene and copy the text to your clipboard.

Updated (05/11/2022)
I have improved this script to that is possible show a popup to auto translate the subtitles, using google translator API. So that way you don't need change tabs or go to site for translate the text.

Updated (29/04/2023)
Fixed problem to translate correctly when subtitles are in different parent elements. Also improved how the translation works on google api.

How do I run this?

1. First thing you need to enable subtitles, like show on result image.
2. Configures what source and target language (need to pass this properties to google translator) on script above (0-netflix-subtitles-script.js) by SOURCE_LANGUAGE and TARGET_LANGUAGE variables.
3. Copy the final script (editable for you) and paste this script after the command javascript: <script> on browser url bar and press enter. Example below:
4. After step three, you will look a button that copy the subtitles and show a popup on left side with text translated.

Conclusion

Well, this made it easier to copy the subtitles and translate some words that I didn't know.

So, I hope it helpful for you as was for me. PS: Let's feel free to copy or improve it, or left your comment. Cheers!

_netflix-subtitles-script.js

const SOURCE_LANGUAGE = "en";
const TARGET_LANGUAGE = "pt-br";
const button = document.createElement('button');
button.textContent = 'translate';
button.addEventListener('click', () => {
  const subtitleElement1 = document.getElementsByClassName('player-timedtext-text-container')[0]?.children[0]?.children[0];
  const subtitleElement2 = document.getElementsByClassName('player-timedtext-text-container')[1]?.children[0]?.children[0];
  const selectedTexts = Array.from([subtitleElement1, subtitleElement2])
    .filter(i => !!i)
    .map(i => i.innerHTML.replaceAll('<br>', '').replaceAll('&nbsp;', ''))
    .join(' ');
  
  navigator.clipboard.writeText(selectedTexts);

  console.log('selectedTexts >>', selectedTexts);

  const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${SOURCE_LANGUAGE}&tl=${TARGET_LANGUAGE}&dt=t&dt=bd&dj=1&q=${selectedTexts}`;
  fetch(url, { method: 'POST' })
    .then(async function(response) {
      const res = await response.json();
      const translatedText = res.sentences
      	.map(i => i.trans)
      	.join(' ');

      const div = document.createElement('div');
      div.innerHTML = translatedText;
      div.style = 'z-index:9999;position:absolute;bottom:0;left:0.5%;width:40%;height:8%;font-size:2.2em;color:black;background:#efefef;border:1px solid #000;';
      document.body.appendChild(div);
      setTimeout(() => { div.remove(); }, 5000);
    });
});
button.style = 'position:absolute;bottom:0;right:42.5%;width:15%;height:8%;font-size:2.5em;background:#0398fc;';
document.body.appendChild(button);