如何在Puppeteer注入按钮的点击事件中调用Client对象方法

问题说明 #

使用基于Puppeteer的WhatsApp Web自动化开源项目（提供Client对象，支持监听事件、执行操作），需在WhatsApp Web页面加载完成后添加自定义按钮，点击按钮时调用Client的方法（如sendMessage）。当前核心问题：

• page.evaluate的浏览器上下文无法直接访问Node端的Client对象
• 尝试exposeFunction后调用失败，根源是方法绑定的上下文丢失

解决方案 #

1. 正确绑定Client方法的上下文 #

使用exposeFunction时，必须将Client方法的this绑定到Client实例，否则调用时会因上下文错误导致执行失败。

2. 页面内事件监听正确调用暴露的函数 #

浏览器上下文仅能访问exposeFunction暴露的全局函数，调用时需处理异步逻辑（暴露的函数返回Promise）。

完整示例代码 #

client.on('ready', async () => {
  // 暴露sendMessage方法，绑定Client实例的上下文
  await client.pupPage.exposeFunction("sendMessage", client.sendMessage.bind(client));

  await client.pupPage.evaluate((divHtml) => {
    // 插入自定义按钮的HTML（示例逻辑）
    document.body.insertAdjacentHTML('beforeend', divHtml);

    // 获取按钮并绑定点击事件
    const btn = document.querySelector('#updateIcButton');
    btn.addEventListener("click", async () => {
      try {
        // 调用暴露的sendMessage函数，需await处理异步
        await sendMessage("目标手机号", "测试消息");
        alert("消息发送成功");
      } catch (err) {
        console.error("发送失败:", err);
        alert("消息发送失败");
      }
    });
  }, divHtml);
});

关键说明 #

• client.sendMessage.bind(client)：确保方法执行时的this指向Client实例，避免因上下文丢失导致的方法调用失败
• 浏览器上下文的sendMessage是exposeFunction生成的异步函数，必须用await等待执行完成
• 若需传递复杂参数，可在暴露函数时添加一层封装，处理参数校验或转换

内容的提问来源于stack exchange，提问作者Liran Revivo