[Userscript]: Hide Context Sentence Translation

[vitorsalustiano]

For anyone else needing a workaround for Dark Reader, add the following snippet in Dark Reader Developer Tools:

*.wanikani.com

CSS
.context-sentence-group p:not([lang="ja"]):not(:hover), .subject-collocations__collocation-text:not([lang="ja"]):not(:hover), .context-sentences .wk-text:not([lang="ja"]):not(:hover) {
    color:transparent !important;
}

[Hoboishguy]

I installed the latest version on chrome and it doesn’t seem to do work correctly. All it appears to do is hide common word combinations and not the context sentences, and only when doing reviews. I have no other scripts running.

[constakiki88]

thank you for this! you’re awesome.

[Khell]

The major problem with this script is it will race to run before the content to modify is even loaded. For my particular browser (Firefox), hardware and userscript extension (ViolentMonkey) this happened ~90% of the time. The trick is to just delay the execution. The below code changes (just wrapping the user script) will wait 250ms after the DOM content is fully loaded (which probably isn’t the correct way, given Wanikani is an SPA) before applying the style changes. If 250ms isn’t enough, just adjust it longer for your machine:

// ==UserScript==
// @name        WaniKani Hide Context Sentence
// @namespace   rfindley
// @description Hide context sentences until hovered.
// @version     2.0.1
// @match       https://www.wanikani.com/*
// @match       https://preview.wanikani.com/*
// @copyright   2015+, Robin Findley
// @license     MIT; http://opensource.org/licenses/MIT
// @run-at      document-start
// @grant       none
// @downloadURL https://update.greasyfork.org/scripts/14844/WaniKani%20Hide%20Context%20Sentence.user.js
// @updateURL https://update.greasyfork.org/scripts/14844/WaniKani%20Hide%20Context%20Sentence.meta.js
// ==/UserScript==

(function (gobj) {
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
      wanikani_hider(gobj);
    }, 250);
  });
})();


function wanikani_hider(gobj) {
    /* global app_load, page_load, before_page_render, frame_load, before_frame_render */

    const match_patterns = [
        '/subjects/extra_study',
        '/subject-lessons/*',
        '/subjects/*/lesson',
        '/subjects/review',
        '/vocabulary/*'
    ];
    function url_matches(patterns,url) {patterns=patterns||match_patterns;url=url||window.location.pathname;if(url[0]!=='/')url=new URL(url).pathname;return ((Array.isArray(patterns)?patterns:[patterns]).findIndex((pattern)=>{let regex=new RegExp(pattern.replace(/[.+?^${}()|[\]\\]/g,'\\$&').replaceAll('*','.*'));return (regex.test(url));})>=0);}
    function is_turbo_page() {return (document.querySelector('script[type="importmap"]')?.innerHTML.match('@hotwired/turbo') != null);}

    if (is_turbo_page()) {
        try {app_load();} catch(e){}
        try {document.documentElement.addEventListener('turbo:load', page_load);} catch(e){}
        try {document.documentElement.addEventListener('turbo:before-render', before_page_render);} catch(e){}
        try {document.documentElement.addEventListener('turbo:frame-load', frame_load);} catch(e){}
        try {document.documentElement.addEventListener('turbo:before-frame-render', before_frame_render);} catch(e){}
    } else {
        try {app_load();} catch(e){}
        try {page_load({detail:{url:window.location.href},target:document.documentElement});} catch(e){}
        try {frame_load({target:document.documentElement});} catch(e){}
    }

    function app_load() {
        if (!url_matches()) return;

        // Insert CSS
        document.head.insertAdjacentHTML('beforeend',`
            <style name="hide_context_sentence" type="text/css">
            .context-sentence-group p:not([lang="ja"]):not(:hover),
            .subject-collocations__collocation-text:not([lang="ja"]):not(:hover),
            .context-sentences .wk-text:not([lang="ja"]):not(:hover)
            {
                background-color:#ccc;
                color:#ccc;
                text-shadow:none;
            }
            </style>
        `);
    }

    function page_load(e) { // e = {detail: {url: '...'}, target: <elem> }
        if (!url_matches()) return;
        add_new_context_sentences(e.target);
    }

    function before_page_render(e) { // e = {detail: {newBody: <elem>} }
        if (!url_matches()) return;
        add_new_context_sentences(e.detail.newBody);
    }

    function before_frame_render(e) { // e = {detail: {newFrame: <elem>} }
        if (!url_matches()) return;
        add_new_context_sentences(e.detail.newFrame);
    }

    function add_new_context_sentences(target) {
        // Add '.context-sentence-group' to "Context Sentences" sections.
        Array.from(target.querySelectorAll('.subject-section__subtitle'))
            ?.find((node) => node.textContent.match('Context Sentences'))
            ?.closest('section')
            ?.querySelectorAll('.subject-section__text')
            ?.forEach((elem) => elem.classList.add('context-sentence-group'));
    }

}

[ryqn]

I was just about to comment this script not working best with ViolentMonkey. But your edit makes it possible to use it reliably, thanks!

[GnoxNahte]

Didn’t know Dark Reader has this feature!
For those who don’t know how to go there,

1. Click on the Dark Reader Extension
2. Click on “Dev Tools” (Bottom right)
3. Click on “Dynamic Theme Editor” (Top left) if it isn’t selected by default.
4. Click on “Per Site Editor”
5. Search and select “wanikani.com”
6. Paste the code snippet
7. Apply! Finished!

Also added a few more things based on it.

• Hide the text in a selected colour (grey for me)
• Don’t cover the whole viewport width, only cover the translation.
• Also hides translation in the vocab tab (The window on the right in the image below)
  
  
  
  
  

.subject-collocations__pattern-name
.context-sentence-group p:not([lang="ja"]):not(:hover),
.subject-collocations__collocation-text:not([lang="ja"]):not(:hover),
.context-sentences .wk-text:not([lang="ja"]):not(:hover),
.subject-section__text--grouped p:not([lang="ja"]):not(:hover) {
    background-color: grey !important;
    color: grey !important;
    text-shadow: none;
    width: fit-content;
}

[NubShiggurath]

I often wonder why the devs have not yet added this as a built-in feature. It seems like a no-brainer to me.

[Ramul]

Hello,

I just thought I would share some modifications I’ve made to this script for my own personal use, in case someone is interested:

• hiding both japanese and english context sentences (with mouseover reveal)
• hiding the meaning of vocab/kanji/radical when learning them during lessons (mouseover too)

To spare you the wall of text, Pastebin link here: Wanikani hide context sentences updated - Pastebin.com
This is basic and not fully tested, but so far, so good

Cheers,
Ramul

[Denzetzu]

I have the same issue. But on FireFox. Did you manage to solve this?

[Kanrei]

This works great, but it seems like I have to put in every time, at least always resets my stuff. Is there anything what I can do to have it saved?

[Canardpie]

Thank you

This really should be a default functionality, though.

[nosewad]

I just wanted to say thank you for this. I’ve been having this same problem, and this fixed it!

[Jellyfiend]

Thank you for this script, it’s quite handy!

It wasn’t running for me out of the box, looks like WaniKani changed their class names so the function wasn’t picking up on the context sentence elements anymore. If anyone runs into the same problem, replacing the “add_new_context_sentences” function in the script with the one below may fix it.

    function add_new_context_sentences(target) {
        // Add '.context-sentence-group' to "Context Sentences" sections.
        Array.from(target.querySelectorAll('.subject-section'))
            ?.find((node) => node.textContent.match('Context Sentences'))
            ?.closest('section')
            ?.querySelectorAll('.context-sentences')
            ?.forEach((elem) => elem.classList.add('context-sentence-group'));
    }

Edit: Oops this hides the example phrases too. To fix, remove this line and the final comma in the line above it from the “app_load“ function:

.context-sentences .wk-text:not([lang="ja"]):not(:hover)