How To Autofill Custom Forms?

I have a webapp I frequently use, which have such kind of forms:

What I want to do is to be able to autofill those fields with specified values (e.g.: urname=kristian, secretid=abcdefghijkl, otherfield=000111222333444555666777888999). Currently I do it by opening "note" app then copy-pasting its content each time, which can get tedious since it's quite long and I have to go back and forth 3 times. Also, the content of the autofill input is not exactly a secret. Is there a way to do it? I found a question with similar problem on Super User: [Autofill web forms](https://superuser.com/questions/1242775/autofill-web-forms) (but instead of Chrome on PC I want to do it in Chrome in Android). The comments seems to recommend a Cchrome extension that can inject JavaScript into the page. I don't mind that, I can write JS, but I don't think Chrome extensions are available on Android. EDIT: I found here that I can execute bookmarked JS via chrome without extensions here: https://android.stackexchange.com/questions/159308/how-can-a-bookmarklet-be-added-on-mobile-chrome-without-copying-and-pasting/210701 So I made a bookmark with such content:

javascript:(function(){ document.querySelector(#urname).value=kristian; document.querySelector(#secretid).value=abcdefghijkl ; document.querySelector(#otherfield).value=000111222333444555666777888999 ; })()

Which if it gets prettified/formatted it will looks like:

javascript:(function(){
  document.querySelector(#urname).value=kristian;
  document.querySelector(#secretid).value=abcdefghijkl ;
  document.querySelector(#otherfield).value=000111222333444555666777888999 ; 
})()

But I still have problem: the page seems to use some kind of data binding (e.g.: react two-way binding). So when the value got changed via JS, when I click on the element it goes back to its old (empty) value. Now, how should I circumvent it?