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