Adds kanji stroke order to the Study and Review sections of kanji.koohii.com. Works with Tampermonkey or Greasemonkey for Chrome or Firefox.

koohiistroke.js

// ==UserScript==
// @name        Kanji.koohii Stroke Order
// @namespace   koohiistroke
// @description Adds kanji stroke order to the study and review sections on kanji.koohii.com
// @include     http://kanji.koohii.com/study/kanji/*
// @include     https://kanji.koohii.com/study/kanji/*
// @include     http://kanji.koohii.com/review*
// @include     https://kanji.koohii.com/review*
// @grant       GM_xmlhttpRequest
// @version     1.1
// @updateURL   https://gist.githubusercontent.com/shussekaido/3541ab70e37983f0360d/raw/44bee65520c994b9d48dc7f63688918ad5044b50/koohiistroke.js
// ==/UserScript==

var stroke_container = ".k-sod";
var inject_container = document.createElement("div");

// Study section

if(window.location.href.indexOf("study") > -1) {
    document.querySelector("#my-story .right").appendChild(inject_container);
    GM_xmlhttpRequest({
        method: "GET",
        url: "http://www.ig.gmodules.com/gadgets/proxy/refresh=31556926&container=ig/http://tangorin.com/kanji/"+document.querySelector(".kanji>span").textContent,
        onload: function(response) {
            var responseHTML = new DOMParser().parseFromString(response.responseText, "text/html");
            inject_container.appendChild(responseHTML.documentElement.querySelector(stroke_container));
        }
    });
};

// Review section

if(window.location.href.indexOf("review") > -1) {
    var target = document.querySelector('#uiFcMain');
    document.querySelector("#rd-side").appendChild(inject_container);

    var observer = new MutationObserver(function(mutations) {
        if (target.classList.contains("uiFcState-1")) {

            GM_xmlhttpRequest({
                method: "GET",
                url: "http://www.ig.gmodules.com/gadgets/proxy/refresh=31556926&container=ig/http://tangorin.com/kanji/"+document.querySelector("#kanjibig>p>span").textContent,
                onload: function(response) {
                    var responseHTML = new DOMParser().parseFromString(response.responseText, "text/html");
                    inject_container.innerHTML = "<br />" + responseHTML.documentElement.querySelector(stroke_container).innerHTML;
                }
            });
        } else {
            inject_container.innerHTML = "";
        };
    });

    var config = { attributes: true };
    observer.observe(target, config);
};

Works beautifully.

If you are new to greasemonkey, it is an add-on running on Firefox (Tampermonkey is an alternative for other browsers). To install this script:

1. save it by clicking on the "raw" button at the top-right
2. rename the file as "koohiistroke.user.js" (or anything with the ".user.js" extension)
3. open the file with the browser, and follow the greasemonkey instructions

Next time you will connect to kanji.koohii, the stroke order will appear at the right of the flash card.

Broken on review page by latest kanji.koohii changes. Still works on study page.

Fork that fixes the recent update: https://gist.github.com/jealie/7569590bcb939a9bbd76c213a4b9f6bc