Anki Webpage Adds

I'm trying to automate Anki flashcard creation. I've hit a roadblock when filling out the form at (I've attached a screenshot - you have to be logged in to view). KM doesn't recognize any Chrome Fields. I suspect this is because the page doesn't have a unique URL when different card formats are selected, but the fields change (example: a Note field appears). I assume [some computer language] is being used that is the bugaboo in this case. And I assume I can get at this by going under the hood, but that is over my head. Thoughts?

Hey @jsmith85,

Web pages vary in complexity, and Keyboard Maestro can't be expected to correctly analyze anything and everything.

The only way to get at many of these things is with JavaScript.

Try running this from an Execute a JavaScript in Google Chrome action:

document.querySelector("div input[id='deck']").value = "goofy"


This should work on the basic Anki Add page as a basic proof-of-concept.


Thanks! I see how you got it from:

Deck - document.querySelector('#deck'). (I've copied the JS path)

Works: document.querySelector('#deck').value = "test"
Doesn't work: document.querySelector('#f0').value = "test" [Front]
Doesn't work: document.querySelector('#f1').value = "test" [Back]

One other question - when I do get this working, can I run all the scripts in one action or do I need to separate them?

Bumping in this in hopes someone can assist that use case.

In general, what is the best way to determine what JavaScript to use? Right click, inspect, click element? Then copy JS path?

Please post the URL and the actual Macro and JavaScript you are trying to run.

Generally yes, as long as all of the HTML elements are present at the same time, or you do something in the script to cause the target element to be written to the web page.

It's the same URL as the original post -

Changing 'Deck' works (but I never really need to)
Changing 'Front' and 'Back' don't (the things I really need to)

Here is the JS path copied:
Front (element) - edit: this doesn't show unless I remove the initial carrot here -> div class="form-control field" id="f0" contenteditable="" style="font-family: Arial; font-size: 20px;">
Front (JS path) - document.querySelector('#f0')

I tried both
document.querySelector("div class[id='#f0']").value = "test"
document.querySelector("div class[id='f0']").value = "test"

Same goes for 'Back', but I'm assuming once 'Front' is solved, 'Back' is apparent

Edit #2 - sorry, think I misunderstood you - there is no macro yet, it's just one action:

Hey @jsmith85,

These are requiring the “textContent” property:

document.querySelector("#f0").textContent = "Your Content!"

(Thanks to @JMichaelTX for helping me suss that out.)



1 Like