Auto Add to Anki

[briana-brady]

In order to not break full immersion while reading in Japanese, I've found it really helpful to automatically add words that are looked up throughout a session to Anki.

To do this I wrote a script that adds event listeners to iframes when they are created. On hover over the iframe, the event listener checks the current entry's frequency against a frequency range and adds the word by clicking the a save note button. If it's not in my range, I change the background color of the add button. (Paired with turning off visibility of frequency tags, focusing on only comprehension becomes much easier like this.)

However, the script is quite jank; it's run through a bookmarklet and only works on the search page (with closed shadow doms for popups turned off). I really love the feature and wished that I could fork the project to inject it into the build so it could run on any page I use Yomitan with.

Pasting the bookmarklet I use below, would devs familiar with the codebase know if or where the mouseover event listener could be added? My eyes gloss over when I try to find where to start.

javascript: (() => {
    console.log("Auto add active");
    const config = {
        subtree: true,
        childList: true,
    };


    function callback(mr, mo) {
        let addedEntries = mr.map(r => { return r.addedNodes[0] });
        addedEntries.forEach(f => {
            if (!f.className || f.className != 'yomitan-popup') { return; }
            let baseURI = f.contentDocument.body.baseURI;
            let frames = document.querySelectorAll('iframe');
            let frame = null;
            frames.forEach(node => { if (node.baseURI == baseURI) { frame = node } });
            frame.addEventListener('mouseover', (e) => {
                console.clear();
                let button = f.contentDocument.querySelector('.entry-current .action-button[data-action="save-note"][title="Add Expression note"]');
                let BCCWJ = f.contentDocument.querySelector('.entry-current [data-dictionary="BCCWJ"] .frequency-value');
                if (BCCWJ && button) {
                    let frequency = parseInt(BCCWJ.innerText);
                    if (frequency < 25000 && frequency > 1000) {
                        console.log('frequency matches');
                        button.click();
                    } else {
                        if (frequency < 1000) {
                            button.style.backgroundColor = "darkseagreen";
                        } else {
                            button.style.backgroundColor = "tomato";
                        }
                    }

                } else {
                    button.style.backgroundColor = "darkorchid";
                }


            }
            );
        });


    }


    const observer = new MutationObserver(callback);
    observer.observe(document.body, config);



    document.addEventListener('click', (e) => {
        console.clear()
        let button = document.querySelector('.entry-current .action-button[data-action="save-note"][title="Add Expression note"]');
        let BCCWJ = document.querySelector('.entry-current [data-dictionary="BCCWJ"] .frequency-value');
        if (BCCWJ) {
            let frequency = parseInt(BCCWJ.innerText);
            if (frequency < 25000 && frequency > 1000) {
                console.log('frequency matches');
                button.click();
            } else {
                if (frequency < 1000) {
                    button.style.backgroundColor = "darkseagreen";
                } else {
                    button.style.backgroundColor = "tomato";
                }
            }
        } else {
            button.style.backgroundColor = "darkorchid";
        };
    }, { passive: true });

})();