Pinyin support for Language Learning with Netflix Extension

README.md

First, you need to install this extension: https://chrome.google.com/webstore/detail/requirify/gajpkncnknlljkhblhllcnnfjpbcmebm/related

Then:

1. Go to netflix.com and start a movie
2. Press the extension button so that "On" is displayed
3. Open developer tools by pressing F12
4. If not selected, go to the Console tab
5. Execute require("ctp", "chinese-to-pinyin");
6. Wait until you see Finished getting chinese-to-pinyin
7. Execute

let subtitlesSelector = ".lln-subs-font-adjust";
$("body").on('DOMSubtreeModified', subtitlesSelector, function() {
    $(subtitlesSelector).find("span").each(function() {
        let oldText = $(this).text();
        let newText = ctp(oldText);
        if (oldText !== newText) {
            $(this).text(newText);
        }
    });
});

1. Press F12 again to close the developer tools
2. Enjoy the movie!

Nice hack. 👍
Kudos from LLN. Email us, languagelearningextension@gmail.com :-)

@hobodrifterdavi please implement this!

Also nice job @klausondrag showing how simple this can be. Very slick!! (though mutation events might be deprecated for MutationObserver eventually 🤷‍♂️)

Yeah, this stopped working well for me in the newest Chrome (81.0.4044.138). The callback only seems to trigger when I hover on the Chinese characters, so maybe there’s some new caching going on in the DOM?

Here’s a MutationObserver version that seems to work better:

require("ctp", "chinese-to-pinyin");
let subtitlesSelector = ".lln-subs-font-adjust";
let mutationObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    $(subtitlesSelector).find("span").each(function() {
        let oldText = $(this).text();
        let newText = ctp(oldText);
        if (oldText !== newText) {
            $(this).text(newText);
        }
    });
  });
});
mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

Could likely be simplified…

Also, thank you @klausondrag, this workaround was exactly what I needed until LLWN implements this as a real feature!