¿Cómo rellenar automáticamente los formularios personalizados?

Después de investigar un poco y escarbar en los temas de github, aquí está mi propia solución:

En general tengo que hacer:

1. inyectar JS personalizado/autoescrito a chrome Android
2. averiguar por qué no ha funcionado y el valor del elemento vuelve a su valor antiguo / vacío
3. llamar a la función correcta para que el marco 'react' pueda cambiar el elemento de entrada Y sus datos internos/vinculados de dos maneras

Primer paso: inyectar JS personalizado/autoescrito a chrome Android

De esta pregunta: ¿Cómo se puede AÑADIR un bookmarklet en Chrome móvil sin copiar y pegar? He aprendido que puedo añadir JavaScript personalizado a los marcadores en chrome

Primer paso despejado

Segundo paso: averiguar por qué no ha funcionado y el valor del elemento vuelve a su valor antiguo / vacío

En primer lugar, me pregunto por qué el valor no se cambió incluso después de inyectar el código como:

document.querySelector(`#otherfield`).value=`000111222333444555666777888999` ; 

Así que sospeché si utilizaba algún tipo de marco de JavaScript para hacer la vinculación de datos de 2 vías (vincular un valor variable con un elemento de entrada).

Para detectar qué marco utilizaron, instalé esta extensión: Library Detector https://chrome.google.com/webstore/detail/library-detector/cgaocdmhkmfnkdkbnckgmpopcbpaaejo (descargo de responsabilidad: no estoy asociado con el autor de dicha extensión)

El resultado: utilizaron react.js

Por lo tanto, la razón por la que no funcionó y el valor del elemento cambia de nuevo a su valor antiguo / vacío es porque utilizó el enlace de datos de 2 vías

El segundo paso se ha despejado

Tercer paso: llamar a la función correcta para que el framework 'react' pueda cambiar el elemento de entrada Y sus datos internos/vinculados de dos maneras

Después de buscar en Google, encuentro este problema en Github: https://github.com/facebook/react/issues/11488 que enlaza con el comentario de este tema: https://github.com/facebook/react/issues/10135#issuecomment-314441175

Básicamente la solución es llamar a dicha función:

function setNativeValue(element, value) {
  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
  const prototype = Object.getPrototypeOf(element);
  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
  if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }
}

setNativeValue(textarea, 'some text');
textarea.dispatchEvent(new Event('input', { bubbles: true }));

Después de cambiar mi JS a

function setNativeValue(element, value) {
  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
  const prototype = Object.getPrototypeOf(element);
  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;

  if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }
}

var element1 = document.querySelector(`#urname`);
setNativeValue(element1, `kristian`);
element1.dispatchEvent(new Event('input', { bubbles: true }));

var element2 = document.querySelector(`#secretid`);
setNativeValue(element2, `abcdefghijkl`);
element2.dispatchEvent(new Event('input', { bubbles: true }));

var element3 = document.querySelector(`#otherfield`);
setNativeValue(element3, `000111222333444555666777888999`);
element3.dispatchEvent(new Event('input', { bubbles: true }));

Y luego encerrarlos en

javascript:(function(){  ...  })()

Ahora funciona perfectamente