[Javascript] Add Wanikani Kanji Information to Vocabulary Cards on Anki

This is my first time creating a topic here, so hello everyone.

I am doing sentence mining on anki, and as I am only level 21 on Wanikani as of now, I encounter kanji I haven’t unlocked or know yet. So sometimes what I do is try to look up the kanji on wanikani, I don’t try to memorize it but just to see a bit about the kanji my word is made up.

But I am lazy, so I had yesterday the idea of using the WaniKani API to automatically add that information to my cards.

I was going to try to make an addon for Anki, but before looking up how to do that as I have never done, I had the idea of using javascript for it as Anki allowes it.

So I’ve written a javascript code to add the kanji information to my vocabulary cards automatically.

It even works on AnkiDroid:

I am not sure if it would work on iOS as I don’t have one, but I think it should.

So I decided to share here the code. I coded it yesterday in a few hours, so it is not perfect, and it is actually the first time I am using asynchronous functions, so probably the code is ugly and not perfect.

I didn’t even add error handling, so if something is wrong you wouldn’t know what without looking into the console.

So without further ado, here you go:

Add this to the bottom of your back template on your card type

<div id="kanjiInfo"></div>
<script>
var apiToken = 'TYPE HERE YOUR API KEY';
var kanji = document.getElementById("word").textContent;
 </script>
<script type="text/javascript" src="https://damiansh.github.io/js/jquery.min.js"></script>
<script src="https://damiansh.github.io/waniAnki/waniAnki.js"></script>
<link rel="stylesheet" href="https://damiansh.github.io/waniAnki/waniAnki.css">

You only need to put your API key there.

Your vocab word needs to between html tags with an id, for mine I use “word” and you need to change it if yours has another id.

If you want to change something on the JS file or the CSS, download them from here:

https://damiansh.github.io/waniAnki/waniAnki.js
https://damiansh.github.io/waniAnki/waniAnki.css

For the JS you could host it or plainly add to your back template with inside the script tag. For the CSS, you could add it to the CSS section of your Anki note whichs works fine for Anki desktop but when I was using Anki on Android, the css wasn’t displaying correctly.

And that’s it, let me know if you got any questions.

Edit 10/12/2021

  • I added kanji from KanjiDamage and https://kanjiapi.dev/
  • The style changed a bit.
  • If WK kanji, the radicals and kanji send you to the their Wanikani page, if they are from Kanjidamage then there, and lastly if they are not there either, they go to Jisho.org
  • It now requieres jQuery to work, so I included a link to it on the code given.
8 Likes