Tengo un caso de uso no común que me gustaría implementar. Encontré un proyecto de código abierto que usa titiritero para automatizar la acción dentro de la web de WhatsApp. Proporciona un objeto de cliente con una API para escuchar eventos o realizar algunas acciones como
client.on('message_create', (msg) => {
client.sendMessage(number, text);
});
No soy tan hábil con JS, pero lo que entiendo es que inicia una instancia real de la web de WhatsApp y luego interactúa con ella.
Lo que quiero hacer es: una vez que se cargue la web de WhatsApp, agregue un div con botones que interactúen con las funciones de mi aplicación de contenedor y hagan cosas automatizadas.
Logré agregar un botón externo a la interfaz de usuario y lo configuré onClick, lo hice a través de la función page.evaluate, algo así:
await client.puppeteerPage.evaluate(async () => {
let btn = document.querySelector('#updateIcButton');
btn.addEventListener("click", async ()=>{
// Do some action with the client, however - client is undefined here
});
});
Hasta ahora todo bien, pero ahora viene el problema: lo que quiero hacer es interactuar con las funciones del cliente dentro del detector de clics, lo que actualmente me resultó imposible porque dentro de la función 'evaluar', que es la única manera que encontré para botones de inyección, el cliente del alcance superior no está definido ... No pude encontrar una manera de pasar el objeto del cliente, ya que crea una dependencia cíclica o algo así si paso como parámetro ... También probé otras cosas como llamar a la función de exposición o addScriptTag pero nada parece estar funcionando.
De todos modos, no estoy seguro de que sea posible, ya que aunque no soy tan hábil con JS y desarrollo web, entiendo que la página web no "sabe" o no puede interactuar con la aplicación titiritero que lo envuelve.
Apreciaría si alguien puede sugerir una forma de resolver u otra forma posible de agregar una interfaz de usuario que pueda interactuar con mi aplicación de titiritero y hacer cosas automatizadas dentro de la instancia de la página.
¡Aprecio tu ayuda!
Más de mi código fuente:
client.on('ready', async () => {
await client.pupPage.exposeFunction("sendMessage", client.sendMessage);
client.pupPage.evaluate((divHtml) => {
//here I have logic to load a div container with a single button
//Once the div is added, I'm querying the button ID and trying to set it's onClick to interact with the client from above
let btn = document.querySelector('#updateIcButton');
btn.addEventListener("click", async ()=>{
// Do some action with the client
sendMessage("phonenumber","sometext"); // trying to call the func I exposed
});
}, divHtml);
});