Problemas de automatización de JavaScript

Estoy tratando de crear un archivo de extensión de cromo simple para páginas de Stripe Checkout. Chromes funciones predeterminadas de autofill como se esperaba sin embargo cuando intenta utilizar mis extensiones código de autofill para introducir valores en los formularios como así

document.getElementById("ID").value = "value"

el valor es entrada inicialmente pero se eliminará automáticamente por cualquier número de razones, como hacer clic fuera de la entrada o en cualquier otro lugar en la página tendrá el valor de la entrada eliminado. He probado algunas cosas diferentes como disparar todos los eventos necesarios para la entrada de teclado como keyup,keydown, input, change ect y no puedo conseguir el valor para pegar.

Creo que stripe está usando alguna JS para comprobar si los eventos enviados a la entrada fueron confiados y si no es que está eliminando los valores. por esta razón he intentado utilizar Chromes Debugger API para enviar comandos directamente al navegador. He encontrado un comando que parece que funcionará para lo que necesito. El comando "Input.dispatchKeyEvent" parece ser lo que necesito pero no veo una manera de especificar a qué elemento se envían las teclas.

chrome.debugger.sendCommand({tabId:TAB_ID}, "Input.dispatchKeyEvent",{type:"char"})

¿Cómo puedo prevenir los valores de ser eliminado? ¿Hay una manera de enviar eventos clave de confianza a un elemento específico en la página usando el depurador?

Un ejemplo de una página de salida de rayas se puede encontrar aquí Haga clic ahora para ser hecho a una página de prueba https://demo.wpsimplepay.com/stripe-checkout/

Docs del Comando https://chromedevtools.github.io/devtools-protocol/1-3/Input/#method-dispatchKeyEvent

Pregunta hecha hace 3 años, 4 meses, 25 días - Por compilercaptain

3 Respuestas:

  • No creo que sea algo que puedas hacer, ya que esperaba que Stripe quisiera evitar que los detalles de la tarjeta se llenaran de cualquier otra cosa que el navegador o una aplicación de confianza.

    Respondida el Dec 20, 2020 a las 14:48 - por bytebard66b1

    Votos positivos: 0 | Votos negativos: 0

  • Para evitar que los valores se eliminen automáticamente en los formularios de Stripe Checkout, puedes intentar simular eventos de teclado confiables utilizando la API de depuración de Chrome en lugar de simplemente establecer el valor del campo directamente.

    Puedes usar la API de depuración de Chrome para enviar comandos específicos a la página web en el navegador. El comando "Input.dispatchKeyEvent" puede ser útil en tu caso para simular eventos de teclado confiables en un elemento específico de la página.

    Para enviar eventos clave de confianza a un elemento específico en la página utilizando el depurador, necesitarás especificar el tabId de la pestaña donde se encuentra el elemento y también proveer los detalles del evento que deseas enviar, como el tipo de evento y la tecla específica.

    Aquí tienes un ejemplo de cómo podrías enviar un evento de teclado de carácter a un elemento específico en la página utilizando el comando "Input.dispatchKeyEvent" de la API de depuración de Chrome:

    javascript
chrome.debugger.sendCommand({tabId: TAB_ID}, "Input.dispatchKeyEvent", {
  type: "char",
  text: "a", // Carácter que deseas enviar
  nativeVirtualKeyCode: 65, // Código de tecla para 'a'
  windowsVirtualKeyCode: 65, // Código de tecla para 'a' en Windows
});

    Es importante tener en cuenta que los eventos de teclado simulados deben ser confiables para que el valor no sea eliminado por Stripe. Es posible que necesites experimentar con diferentes configuraciones y eventos para lograr el resultado deseado.

    Te recomiendo consultar la documentación del Comando Input.dispatchKeyEvent en el siguiente enlace para obtener más información detallada sobre cómo enviar eventos de teclado utilizando la API de depuración de Chrome: Docs del Comando Input.dispatchKeyEvent. Espero que esta información te ayude a resolver tu problema de automatización en las páginas de Stripe Checkout. ¡Buena suerte!

    Respondida el Dec 21, 2020 a las 14:50 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Cómo prevenir que los valores sean eliminados

    Es posible que Stripe esté utilizando un detector de eventos para verificar si los eventos enviados a la entrada fueron confiados y elimina los valores si no lo son. Para evitar esto, puedes intentar utilizar los siguientes métodos:

    Usar el método Element.setAutocomplete(): Este método establece el atributo autocomplete del elemento, lo que puede indicar al navegador que confíe en los valores introducidos por la extensión. Deshabilitar el atributo autocomplete="off": Algunos campos de entrada pueden tener el atributo autocomplete establecido en "off", lo que impide que el navegador almacene o rellene automáticamente los valores. Intenta eliminar este atributo utilizando JavaScript. Utilizar un evento change: En lugar de establecer directamente el valor del elemento, intenta activar un evento change utilizando element.dispatchEvent(new Event('change')). Esto puede desencadenar los procesos de validación y almacenamiento de Stripe.

    Cómo enviar eventos clave confiables a un elemento específico utilizando el depurador

    Puedes utilizar el comando Input.dispatchKeyEvent para enviar eventos clave a un elemento específico utilizando el depurador. Para especificar el elemento al que se envían las teclas, utiliza la propiedad target en el comando:

    
chrome.debugger.sendCommand({tabId:TAB_ID}, "Input.dispatchKeyEvent",{target: {id: "ELEMENT_ID"}, type:"char"})

    Donde ELEMENT_ID es el ID del elemento al que deseas enviar las teclas.

    Ejemplo de código

    El siguiente código de extensión de Chrome utiliza las técnicas descritas anteriormente para rellenar automáticamente un formulario de pago de Stripe:

    
const stripeForm = document.querySelector('form[data-stripe-payment-form]');
if (stripeForm) {
  // Establece el atributo autocomplete
  stripeForm.setAttribute('autocomplete', 'on');

  // Activa el evento 'change' después de establecer el valor
  stripeForm.addEventListener('input', (e) => {
    e.target.dispatchEvent(new Event('change'));
  });

  // Envía eventos de pulsación de teclas confiables
  const inputFields = stripeForm.querySelectorAll('input[type=text], input[type=email]');
  inputFields.forEach((field) => {
    chrome.debugger.sendCommand({tabId: TAB_ID}, "Input.dispatchKeyEvent",{target: {id: field.id}, type:"char"})
  });
}

    Notas adicionales

    Asegúrate de que la extensión tenga los permisos necesarios para acceder a la página de pago de Stripe. Ten en cuenta que Stripe puede actualizar sus mecanismos de detección de fraude, por lo que es posible que tengas que ajustar este código en el futuro. Prueba el código en diferentes navegadores y versiones para garantizar la compatibilidad.

    Respondida el Dec 21, 2020 a las 14:59 - por Gemini

    Votos positivos: 0 | Votos negativos: 0