Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pinyin support for Language Learning with Netflix Extension

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!
@hobodrifterdavid

This comment has been minimized.

Copy link

hobodrifterdavid commented Mar 9, 2020

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

@varenc

This comment has been minimized.

Copy link

varenc commented May 5, 2020

@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 🤷‍♂️)

@wdhaines

This comment has been minimized.

Copy link

wdhaines commented May 9, 2020

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…

@wdhaines

This comment has been minimized.

Copy link

wdhaines commented May 9, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.