Inject JavaScript/HTML into the front side of a card

Anki Development
1

I’m trying to inject JavaScript into the front side of a card (reviewQuestion, clayoutQuestion, previewQuestion). For now I just want the background to turn blue. Using the code from the official tutorial, the background turns blue only after reaching the back:

script = """
<script>
document.body.style.background = "blue";
</script>"""

def prepare(html, card, context):
    return html + script

gui_hooks.card_will_show.append(prepare)

So I tried to specify that I only care about the question cards, but now nothing happens at all:

script = """
<script>
document.body.style.background = "blue";
</script>"""

def prepare(html, card, context):
    if "Question" in context:
        return html + script
    return html

gui_hooks.card_will_show.append(prepare)

What am I doing wrong? Any help would be appreciated.

2

That code changes the question side for me.

1 Like
3

Thanks for checking. I found the problem: I have a custom timer script on the front side of my template. Since it’s only on the front side, my addon code works fine on the back side.

<span class="timer" id="s2" style="position:fixed; bottom: 20px; left: 10px;"><span>
<script>
function countdown(elementName, minutes, seconds)
{
    var element, endTime, hours, mins, msLeft, time;
 
    function twoDigits(n)
    {
        return (n <= 9 ? "0" + n : n);
    }
 
    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = '0:00';
        } else {
            time = new Date(msLeft);
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());

        if(msLeft <= 1000 + (1000 * (60 * minutes + seconds) + 500) / 2) {
            element.style.color = 'orange'
        }
        if(msLeft <= 1000 + (1000 * (60 * minutes + seconds) + 500) / 3 + 1) {
            element.style.color = 'red'
        }
        setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
    }
}
 
    element = document.getElementById(elementName);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();
}
 
countdown("s2", 0, 30);
</script>

It is this line that causes the problem:

element.innerHTML = (hours ? hours + ':' + twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());

Without this line, everything works fine and the background immediately turns blue. But then my timer stops working. Any idea why this could prevent my addon from injecting JavaScript into the card?

4

Sorry, I’m not sure why.