Chrome扩展监听按钮点击仅首次生效、切换工单后失效问题求解

问题原因 #

• 你操作的Zoho Desk站点是典型的单页应用（SPA），切换工单时不会触发整页刷新，仅局部替换DOM内容：你首次绑定事件的按钮会在切换工单时被销毁，新渲染的同位置按钮没有绑定过点击事件，自然无法触发逻辑，和URL仅修改后缀的表现是对应的，确实是该原因导致失效。
• 现有代码用固定时长的setTimeout等待元素加载，受网络、页面渲染速度影响，很容易出现元素还未渲染完成就执行querySelector，返回null导致绑定失败。

修复方案 #

改用事件委托机制，将点击事件绑定到页面内不会被销毁的上层稳定节点（比如document.body），通过选择器匹配目标按钮，不管元素是何时渲染的都能捕获到点击事件，同时可以去掉不可靠的固定setTimeout等待。

修复后代码 #

// 直接给body绑定点击事件，所有元素的点击都会冒泡到此处
document.body.addEventListener('click', function (event) {
    // 匹配你要监听的目标按钮
    const targetBtn = event.target.closest("#statusContainter > div:nth-child(5) a");
    // 点击的不是目标按钮就直接返回
    if (!targetBtn) return;

    // 原业务逻辑保持不变
    var nomeClient = document.querySelector("#contact-info > div:nth-child(1) > div:nth-child(1) a").innerText
    var primeiroNome = nomeClient.split(' ')
    var numeroChamado = document.querySelector("#dvSubHeader > div.dt-sub-cont > div:nth-child(3) > div.pl63.mw75per > div > div.mr15 a").innerText
    document.querySelector("#ticketReplyContainer div").click()
    var stamp = new Date();
    var hours = stamp.getHours();
    var time = "";

    if (hours >= 18 && hours < 24) {
        time = "boa noite"
    } else if (hours >= 12 && hours < 18) {
        time = "boa tarde"
    } else if (hours >= 0 && hours < 12) {
        time = "bom dia"
    }

    setTimeout(() => {
        texto = `${primeiroNome[0] == '.' || primeiroNome[0] == ',' ? primeiroNome[1] : primeiroNome[0]}, ${time}. \n\n` +
            `Esta é a confirmação de que seu chamado de Nº ${numeroChamado}, foi finalizado pelo setor do suporte e seu caso foi dado como solucionado.\n\n` +

            'Favor não responder a este e-mail.\n\n' +

            `Caso tenha qualquer outra dificuldade na plataforma, basta abrir um novo chamado através do link:\n\n` +

            `https://support.zoho.com/portal/waveatendimento/pt/newticket\n\n` +

            'Att,\n' +
            'Suporte Wave'
        console.log(primeiroNome[0] == '.' || primeiroNome[0] == ',' ? primeiroNome[1] : primeiroNome[0])
        document.querySelector("#replyContainer div > iframe").contentWindow.document.querySelector("body > div:nth-child(1)").innerText = texto
        //document.querySelector("#send_option_container > div.dis_tab div").click()
    }, 1500)
})

内容的提问来源于stack exchange，提问作者Matheus Nascimento