[Userscript]: Hide Context Sentence Translation

[Inserio]

So I have had an issue getting this to properly hide the text when paired with the Dark Reader extension, at least with the current styling.
However, I believe I have found an answer.

That is, changing

color:#ccc;

to

color:transparent;

It seems to work just as effectively as setting the color to the background color, with the added benefit of making it so a separate styler extension like Dark Reader won’t come in and “adapt” the color to end up being visible.

In other words, when Dark Reader is used, things currently looks like this:

Would you consider changing that, so long as it doesn’t create a problem somewhere else?

[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;
}