I have a non-common use case I'd like to implement. I found an open source project that uses puppeteer to automate action within whatsapp web. It provides a client object with an API to listen to events or do some actions such as

client.on('message_create', (msg) => {
    client.sendMessage(number, text);
    
});

I'm not so proficient with JS, but what I understand is that it launches a real instance of whatsapp web and then interacts with it.

What I want to do is - once whatsapp web is loaded, add a div with buttons that would interact with my wrapper app functions and do automated stuff.

I did manage to add external button to the UI and set it's onClick, I done it via the the page.evaluate function, something like that:

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

So far so good, but now comes the problem - what I want to do is to interact with the client functions inside the click listener, which I currently found impossible to do since inside the 'evaluate' function which is the only way I found to inject buttons, the client from the upper scope is undefined... I couldn't find a way to pass the client object as it creates a cyclic dependency or something if I pass as parameter.. Also tried other stuff such as calling exposeFunction or addScriptTag but nothing seem to be working.

I'm not sure it's possible anyhow, as although I'm not so proficients with JS and web dev, I understand that the web page doesn't "know" or can't interact with the puppeteer application wrapping it.

I'd appreciate if someone can please suggest a way to solve or another possible way to add UI that can interact with my puppeteer application and do automated stuff within the page instance.

Appreciate your help!

More of my source code:

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