Since this one was a super quick fix, I’ve gone ahead and posted an update.
Thanks @polv for jumping in with a quick solution!
7 Likes
awesome, thank you!
I was using this WaniKani: Context Sentence Flash Cards - Chrome Web Store extension before and it had a click to see it thing going on it but it doesn’t work anymore. Is it possible for you to make it like that? This script doesn’t work on dark mode themes like Breeze Dark or Elementary Dark.
Can this made to be working with:
That would we really appreciated.
The one in the first post doesn’t hide sentence translations in Review for me, only Pattern of Use.
My correction
// ==UserScript==
// @name WaniKani Hide Context Sentence
// @namespace rfindley
// @description Hide context sentences until hovered.
// @version 1.0.7
// @match https://www.wanikani.com/subjects/review
// @match https://www.wanikani.com/subjects/*/lesson*
// @match https://www.wanikani.com/vocabulary/*
// @match https://www.wanikani.com/level/*/vocabulary/*
// @match https://preview.wanikani.com/subjects/review
// @match https://preview.wanikani.com/subjects/*/lesson*
// @match https://preview.wanikani.com/vocabulary/*
// @match https://preview.wanikani.com/level/*/vocabulary/*
// @copyright 2015+, Robin Findley
// @license MIT; http://opensource.org/licenses/MIT
// @run-at document-end
// @grant none
// ==/UserScript==
(function(gobj) {
var 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),
a.page-nav__anchor#context ~ section.subject-section__content .subject-section__text--grouped :not([lang="ja"]):not(:hover)
{
background-color:#ccc;
color:#ccc;
text-shadow:none;
}
`;
// Function to add a style tag.
function add_css(css) {
let style = document.createElement('style');
style.setAttribute('type', 'text/css');
let text = document.createTextNode(css);
style.appendChild(text);
document.head.append(style);
}
// Insert CSS
add_css(css);
// Add '.context-sentence-group' to sentences on Vocab pages.
if (window.location.pathname.match(/^\/vocabulary\//)) {
Array.from(document.querySelectorAll('.subject-section--context .subject-section__subtitle'))
.find((node) => node.textContent.match('Context Sentences'))
.closest('section')
.querySelectorAll('.subject-section__text')
.forEach((elem) => elem.classList.add('context-sentence-group'));
}
}());
1 Like
Thanks! I may not have had reviews available (I don’t remember), and I knew reviews and lessons were supposed to share the same layout now. Apparently not! I’ll get your update integrated after breakfast.
This script isn’t working for me anymore. Was there a recent change to wanikani? I’m using google chrome.
Here’s a quick fix. The original userscript seems pretty old and appears to have a lot of workarounds that aren’t necessary anymore, as far as I can tell. All it really needs to do is inject some CSS on relevant pages (which can easily be done with the use of GM_addStyle and the @run-at document-end attribute).
I’ve also switched the script to use a CSS blur filter instead of colour, which should work better for folks using dark mode add-ons. I didn’t test it extensively across different pages, but at a glance it seems to work. Hope this helps!
// ==UserScript==
// @name WaniKani Hide Context Sentence
// @namespace rfindley
// @description Hide context sentences until hovered.
// @version 3.0.0
// @match https://*.wanikani.com/subjects/extra_study*
// @match https://*.wanikani.com/subjects/*/lesson*
// @match https://*.wanikani.com/subjects/review*
// @match https://*.wanikani.com/vocabulary/*
// @copyright 2015+, Robin Findley
// @license MIT; http://opensource.org/licenses/MIT
// @run-at document-end
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle(`
.subject-collocations__collocation-text:not([lang="ja"]):not(:hover),
.context-sentences .wk-text:not([lang="ja"]):not(:hover),
.subject-section__text p:not([lang="ja"]):not(:hover) {
filter: blur(5px);
transition: filter 0.25s;
}
`);
@rfindley would you be interested in publishing a new version of your script using the above or something similar?
Yes, it definitely works for most items, and maybe all. One potential issue is if WK has any items with a Meaning Explanation or Reading Explanation that has more than one paragraph. Both of those sections in the Lessons use the CSS class “.subject-section__text”, and so you have to be careful about applying a CSS rule that might accidentally affect them. The only reason the script currently doesn’t affect the Reading/Meaning Explanations is because they (hopefully) don’t contain any <p> tags.
If it turns out that there are a few items whose Explanation does contain a <p> tag, they would be unintentionally obscured by that CSS rule. That’s why, out of caution, I added the JS code back in March to specifically look for .subject-section__text only within sections labeled as “Context Sentences”, which I don’t think can be done purely in CSS.
In short, I’m slightly hesitant to change the script without first checking if there are any items with multi-paragraph Explanations that happen to have a <p> tag. Using JS may be inefficient, but it’s at least ensuring that the CSS rules can’t over-capture things that they shouldn’t.
I definitely appreciate clean and simple code, so thank you for the suggestion. I may investigate the Explanation content further.
I’ve been using this quick&dirty user css patch
.lesson-container .context-sentences p:last-child{
display: inline;
background-color: #333;
}
.lesson-container .context-sentences p:last-child:hover{
background-color: transparent;
}
.subject-collocations .context-sentences p:last-child{
text-shadow: none;
}
.subject-collocations .context-sentences p:last-child:hover{
text-shadow: 0 1px 0 #fff;
}
looks like this 
the text-shadow stuff is for when there’s the selector thingy (you know when it goes ～の, ～を, etc…). For some reason there and only there they’ve put a weird text shadow that shows up as a light gray outline over the black background
I know there used to be a few places where WK didn’t have “.context-sentences” and “.subject-collocations” tags. If they’ve added those everywhere now, that would resolve the potential issue I mentioned above. Anyway, I’ll check how much things have changed since March.
2 Likes
Ironically, it looks like there’s no “.context-sentences” on the actual context sentences, but there is on the patterns of usage sentences. At least, that’s true on the Reviews page. I hadn’t looked at the Lessons page yet.
I’ve reread your first post and whoops, my bit of css is only for Lessons. I leave them uncovered in Item pages and during Reviews 
I would just use CSS patch (with Stylus), since the solution is now CSS only, and user CSS comes with Live Preview, and toggle on-off, in case I need a quick fix.
This script was a great help!
However, I encountered a problem earlier today. Does anyone know how to fix this?
Thank you very much in advance.
Install Stylus and paste the code in the post just above in.
If it doesn’t work, maybe Inspect Element and paste what you see, here.
The goodness of Stylus (user CSS) is that no need to refresh to see the changes.
Thank you for the suggestion.
Ive installed stylus. Problem is I dont know anything about codes. Im apologize but please bear with me.
Can you tell me what I did wrong. I just pasted the code inside the /* Insert code here… */
Thank you in advance.
Found a solution. Thank you!
1 Like