Estoy tratando de cambiar un campo <textarea> en una página de inicio de sesión HTML en un campo <input> , dinámicamente, al cargar la página.

 <div class="field input-field"> <span class="user-icon"> </span> <textarea class="qStr" data-qstrph="LDAP_SERVER_STR12" id="username" autocomplete="off" placeholder="Username"> </textarea> <span class="reset-icon slice-img"> </span> </div>

Lo primero que pensé fue TamperMonkey y usar JavaScript para hacer esto.

Me acerqué a un amigo mío, que tiene mucho más talento que yo, y le pedí que hiciera una pequeña parte de JavaScript para hacer lo que yo quería. Rápidamente volvió con esto:

 const originalItem = document.getElementById("username") const newItem = document.createElement("input") newItem.setAttribute("type", "text") newItem.setAttribute("class", "qStr") newItem.setAttribute("data-qstrph", "LDAP_SERVER_STR12") newItem.setAttribute("id", "username") newItem.setAttribute("autocomplete", "off") newItem.setAttribute("placeholder", "Username") originalItem.replaceWith(newItem)

Cuando ejecuto este fragmento en la consola para desarrolladores de Chrome, hace exactamente lo que esperas que haga, ¡y eso es increíble! Cuando tomo el mismo bloque y lo coloco en TamperMonkey, guardo el archivo y me aseguro de que sea un script habilitado, y vuelvo a cargar la página HTML, no pasa nada, y esto me entristece:

Aquí está el código, tal como está en TamperMonkey:

No estoy seguro de lo que no estoy haciendo bien, ya que el código funcionó perfectamente en la consola de desarrollo.

Su aporte es apreciado, ¡gracias!