Comment remplir automatiquement les formulaires personnalisés ?

Après quelques recherches et avoir creusé les problèmes sur github, voici ma propre solution :

En général, je dois le faire :

1. injecter du JS personnalisé/écrit par soi-même dans chrome Android
2. comprendre pourquoi cela n'a pas fonctionné et la valeur de l'élément reprend son ancienne valeur / sa valeur vide
3. appeler la bonne fonction pour que le cadre "react" puisse modifier l'élément d'entrée ET ses données internes / liées dans les deux sens

Première étape : injecter du code JS personnalisé/écrit par soi-même dans chrome Android

A partir de cette question : Comment ajouter un bookmarklet sur Chrome mobile sans faire de copier-coller ? J'ai appris que je pouvais ajouter un JavaScript personnalisé aux signets dans chrome

Première étape franchie

Deuxième étape : comprendre pourquoi cela n'a pas fonctionné et la valeur de l'élément reprend son ancienne valeur / sa valeur vide.

A première vue, on se demande pourquoi la valeur n'a pas été modifiée même après avoir injecté du code comme :

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

Je me suis donc demandé s'il n'utilisait pas une sorte de cadre JavaScript pour effectuer une liaison de données bidirectionnelle (lier une valeur variable à un élément d'entrée).

Pour détecter le framework utilisé, j'ai installé cette extension : Détecteur de bibliothèque https://chrome.google.com/webstore/detail/library-detector/cgaocdmhkmfnkdkbnckgmpopcbpaaejo (disclaimer : je ne suis pas associé à l'auteur de cette extension)

Résultat : ils ont utilisé react.js

La raison pour laquelle cela n'a pas fonctionné et que la valeur de l'élément revient à son ancienne valeur (vide) est qu'il s'agit d'une liaison de données bidirectionnelle.

Deuxième étape franchie

Troisième étape : appeler la fonction correcte pour que le cadre "react" puisse modifier l'élément d'entrée ET ses données internes / liées dans les deux sens.

Après quelques recherches sur Google, j'ai trouvé ce problème sur github : https://github.com/facebook/react/issues/11488 qui renvoie à ce commentaire : https://github.com/facebook/react/issues/10135#issuecomment-314441175

La solution consiste à appeler une telle fonction :

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 }));

Après avoir modifié mon JS en

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 }));

Et en les enfermant dans

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

Il fonctionne maintenant parfaitement