Duolingo.com implements React and deletes my variables (or at least their values) under execution

general-dev

#1

The following code is aimed to change the innerHTML of an element (myNote) to the value of another element (myInputField), each time the Return key is pressed:

// ==UserScript==
// @name        Duolingo
// @namespace   nms
// @include     *://duolingo.com/*
// @include     *://www.duolingo.com/*
// @version     1
// @grant       none
// ==/UserScript==

setTimeout(()=>{
        let myCss =`
            .note {position: fixed; bottom: 0; right: 0; width: 400px; height: 400px; background: orange}
        `;
        style = document.createElement("style");
        style.type = "text/css";
        style.styleSheet ? style.styleSheet.cssText = myCss : style.appendChild(document.createTextNode(myCss) );
        head = document.head || document.getElementsByTagName("head")[0];
        head.appendChild(style);

    // Behavior:
        let myNote = document.createElement('div');
        myNote.classList.add('note');
        document.querySelector('body').appendChild(myNote);
        let myInputField = document.querySelector('._7q434._1qCW5._2fPEB._3_NyK._1Juqt._3WbPm');

        myInputField.addEventListener('keydown', (k)=>{
            if ( k.keyCode === 13 ) {
                myNote.innerHTML += myInputField.value + '<br>';
                console.log(myNote.innerHTML); // This will output nothing and that's the problem.
            }
        });
}, 2000);

Purpose

I run the code in Greasemonkey on duolingo.com (a site for learning mind2mind languages like French and German), in textual question sessions like "Please translate this sentence".

The code's purpose is to create a small orange-background box containing the inputs I already tried in Duolingo questions, given that Duolingo doesn't save these inputs.

With the script, I could save them and later use them if I retake a language question as it saves me some time retyping most of a sentence.

Problem

The code works only once and then becomes impotent (duolingo.com deletes all variables). For example, that last row in code will output nothing:

console.log(myNote.innerHTML); // This will output nothing in console and that's the problem.

This wired behavior seems to be associated with React.js, implemented by duolingo.com.

Moreoever, if I'll to console while in a duolingo.com webaghe and create a new variable and then print it, its value will be undefined:

var x = 'a';
console.log(x);
// x prints "undefined" while in other webpages x prints "a".

You can see that duolingo.com can either delete variables or at least their values.

Reproduce

Reproduce by using the code in Greasemonkey (or a similar program) on duolingo.com.

Question

How does duolingo.com deletes all my variables after first execution and what can I do to prevent this deletion?..


#2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.