I’ve been neglecting my react projects for so long, wanikani has broken my script in order to get me back to using it
2 Likes
I spent some time learning React, but then I got a job doing Angular 
4 Likes
This appears to be broken again. I loaded this page:
Saw this in the console:
I’m guessing WaniKani changed this page around. Looking at the source, this query is returning null but is not expected to do so:
document.querySelector(`.radical-icon, .kanji-icon, .vocabulary-icon`)
1 Like
Version 2.0:
- Updated to support new React-based Vocabulary item info page
// @require https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1107823
3 Likes
Can confirm this worked for WaniKani AI Mnemonics script. Some other scripts still have issues but I don’t think related to Item Info.
It isn’t re-triggered on browsing, e.g. from item list to Kanji pages, for between item info pages.
1 Like
This seems like it can be a bit of a problem for userscripts in general. I just tested it in Edge with Tampermonkey and Violentmonkey, but they both don’t notice the change of the URL and miss injecting scripts at the expected time. For example, if I create a script that matches https://www.wanikani.com/kanji/*, but I start on https://www.wanikani.com/kanji?difficulty=pleasant and then navigate to a kanji page, neither Tampermonkey nor Violentmonkey inject my script at all.
If this is how WaniKani will be working from now on, all userscripts have to generally match for the entirety of https://www.wanikani.com and check by themselves when the user navigates to a page they want to affect. I’m wondering if this is a bug of Tampermonkey and Violentmonkey that will be fixed, or if this is just how it works, and we will have to work around it.
EDIT: It seems that this is the intended Tampermonkey behavior. In that case, I have to update A LOT of userscripts.
2 Likes
Version 2.1:
Now works with WaniKani's new history.pushState behavior for item pages
WaniKani has changed the browsing behavior between item pages: instead of letting the webbrowser navigate to the new item page, WaniKani just updates the page and the URL displayed by the webbrowser. Userscript managers like Tampermonkey ignore this URL update, so userscripts now have to check for these page navigation changes by themselves.
Important: If you are using Item Info Injector to inject your info into item pages, you should probably @match your script for the entire https://www.wanikani.com/* page and let WK Item Info Injector handle the detection when your info actually has to be injected.
// @require https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1111117
2 Likes
I am testing if this can work as a drop-in replacement for $.jStorage.listenKeyChange('currentItem', () => {}), but also works for lesson and lessonQuiz; by using wkItemInfo.notify((state) => {}). However, it doesn’t work without .under(''). Also, it doesn’t work immediately on ‘currentltem’ changes.
Testing script
// ==UserScript==
// @name WK no jStorage
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.wanikani.com/*
// @match https://preview.wanikani.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=wanikani.com
// @require https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1111117
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Only this one works.
wkItemInfo
.on('lesson,lessonQuiz,review,extraStudy,itemPage')
.under('meaning')
.notify((state) => {
console.log(state);
});
wkItemInfo
.on('lesson,lessonQuiz,review,extraStudy,itemPage')
.notify((state) => {
console.log('no-under', state);
}, { injectImmediately: true });
wkItemInfo
.notify((state) => {
console.log('clean', state);
}, { injectImmediately: true });
})();
Also, a listener for, when it gets answered and gets marked as right or wrong, would be interesting.
I was considering adding this to Item Info Injector, but then I decided that I want to limit its scope strictly to injecting additional item info into the existing info structure, which only appears during reviews once the user decides to open the item info, and not when the question was answered. Similarly, an event for ‘currentItem’ changes is out of scope, as well.
A listener for answers marked right or wrong is not that difficult, anyway (example code for the new review page):
new MutationObserver(ms => ms.forEach(m => console.log(m.target.getAttribute("correct")))).observe(document.querySelector(".quiz-input__input-container"), {attributes: true, attributeFilter: ["correct"]});
I think it would make more sense to put events like this in a more lightweight library instead of Item Info Injector.
1 Like
@polv It seems that WaniKani already emits an event for this on the new page, so it’s even easier:
window.addEventListener("didAnswerQuestion", e => console.log(e.detail));
EDIT: And maybe window.addEventListener("willShowNextQuestion", e => {}) can replace $.jStorage.listenKeyChange('currentItem', () => {}).
1 Like
Version 3.0:
Now supports the upcoming new lesson, review, and extra study pages
WaniKani is planning to switch tomorrow to Turbo for providing the lesson, review, and extra study pages. I am not too confident that I managed to iron out all the bugs in this version. As always, please report problems right away.
// @require https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1166918
2 Likes
Vocabularies in itemPage don’t have reading, though Kanji in itemPage and session pages have that just fine.
Example vocabulary on itemPage
{
"on": "itemPage",
"type": "vocabulary",
"id": 4495,
"characters": "罰金",
"partOfSpeech": [
"Noun"
],
"meaning": [
"A Fine",
"Fine"
],
"composition": [
{
"characters": "罰",
"meaning": [
"Penalty"
],
"reading": [
"ばつ"
]
},
{
"characters": "金",
"meaning": [
"Gold"
],
"reading": [
"きん"
]
}
],
"hiddenSpoiler": [],
"under": [
"composition",
"meaning",
"reading",
"examples"
],
"injector": {
"active": true
}
}
1 Like
Thanks for the bug report. I will look into it tomorrow.
In Review pages, press F then E, expands all but Info Info injections.
I also wonder if it can be injected in collapsed state.
1 Like
I will add E functionality to the next release of Item info Injector. I hope to get it ready today after work – I had aimed for a release yesterday, but I had to stop at 2am.
Sections start off collapsed or expanded, based on their spoiler settings. If you mark your section as spoiling the reading, and then open the item info after answering a meaning question, the section will be collapsed (similar to the vanilla WK reading section). If you use .spoiling("meaning,reading"), it should always be collapsed initially.
3 Likes
I am not sure that what I’m experiencing is a bug caused specifically by this userscript or not.
I am currently updating my script WK Item Difficulty Indicator with the new turbo events. I have noticed that on the item info pages when I click from one item to the next the updating of the section I injected with this script updates perfectly. When I use the back button though to go to the previous page, somehow the section is completely missing no matter what I do.
I looked into it and it may have something to do with the turbo:before-frame-render event you are using which only triggers on page redirects caused by links not by back and forward buttons.
If the problem lies with my own userscript then I’m sorry to have bothered you, I’m just getting used to handling the turbo events 
Either way, thanks for your hard work!
1 Like
The list of necessary bugfixes for the next version of Item Info Injector increases with every day
3 Likes
Haha, yeah it’s always difficult having to rework something that you can’t do from scratch without missing any bugs. Don’t stress it though, take your time! It’s not like this is massively important or anything.
3 Likes
@polv, @saraqael, sorry that it took much longer than anticipated. Fixing the missing current state info and adding the E hotkey functionality was not that hard, but I was very reluctant having to go back and deal with Turbo page loading again (to catch history navigation), so I postponed my work on Item Info Injector and prioritized other scripts instead.
Version 3.1:
E hotkey toggles injected collapsible sections
I noticed that WaniKani has implemented the E behavior in a rather strange way: instead of deciding whether the hotkey should open or close sections based on the current state of the sections, it seems to use an internal variable. That means that if I manually expand all sections and hit E afterwards, it won’t do anything at all.
Instead of trying to access this internal variable, I decided to take the approach that seems more logical to me: if any (native) sections are still closed upon hitting E, all injected sections will be expanded, otherwise all will be collapsed.
Bugfix for Turbo history navigation
Dealing with Turbo history navigation turned out to be as annoying as expected: no Turbo event seems to be fired after the DOM is updated, so I used turbo:load, which I believe is the last event Turbo fires after a history navigation on item pages. await true seems to continue too fast (the DOM was still not available at that point), but setTimeout() worked. At least for history navigation between item pages. However, history navigation during lessons seems to fire no Turbo events at all! Instead, I had to use the hashchange event. And, because having two different cases is not enough, navigating from the lesson quiz back to the lessons does actually trigger turbo:before-render, so I had to make sure that sections are not injected twice.
Bugfix for partially missing currentState data
The currentState was missing some info (reading, partOfSpeech, composition, …) in some cases. This should be fixed now.
deleted outdated code (React/jStorage)
A lot of code was not needed anymore, so I was able to delete almost 400 lines of code that dealt with various React- and pre-React WaniKani versions.
// @require https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1173815
3 Likes