Chrome扩展开发求助：如何将nomeAtendente变量加入WhatsApp消息头部

我正在开发一款Chrome扩展，用于给发送的WhatsApp消息添加客服名称前缀。目前的问题是，不知道怎么把存在nomeAtendente变量里的名称整合到最终发送的消息里。已经搜索多日没找到方案，求帮助。

相关代码如下：

const interval = setInterval(() => {
    const menu = document.querySelector("#app > div > div > div._2Ts6i._3RGKj > header > div._604FD > div > span > span");
    const content = document.querySelector("#app > div > div > div._2Ts6i._2xAQV");

    if (menu && content) {
        clearInterval(interval);

        const btnMenu = document.createElement("button");
        btnMenu.innerHTML = "7C";
        btnMenu.classList.add("btnMenu7Carros");
        menu.appendChild(btnMenu);



        const divLateralHTML = `
            Nome do atendente: <br>
            <input type="text" id="nomeAtendente">

            <br><br>
            <button id="buttonSalvar" name="button" class="">Salvar</button>
        `;
        content.insertAdjacentHTML('afterend', `<div id="divLateral" style="display: none;">${divLateralHTML}</div>`);


        //Abre e fecha o menu.
        const divLateral = document.getElementById("divLateral");
        let divLateralVisivel = false;
        btnMenu.addEventListener("click", function () {
            divLateralVisivel = !divLateralVisivel;
            divLateral.style.display = divLateralVisivel ? "block" : "none";
        });


        //Salva os dados
        const buttonSalvar = document.getElementById("buttonSalvar");
        buttonSalvar.addEventListener("click", function () {
            localStorage.setItem("nomeAtendente", document.getElementById("nomeAtendente").value);
            alert("Salvo com sucesso!")
        });
        // Obtém o valor do localStorage e define no input
        document.getElementById("nomeAtendente").value = localStorage.getItem('nomeAtendente') || "";



        const nomeAtendente = localStorage.getItem("nomeAtendente");




        document.addEventListener("keydown", function (e) {
            handleEvent(e);
        });

        document.addEventListener("keyup", function (e) {
            handleEvent(e);
        });

        document.addEventListener("keypress", function (e) {
            handleEvent(e);
        });

        function handleEvent(e) {
            const elemento = document.querySelector("#main > footer > div._2lSWV._3cjY2.copyable-area > div > span:nth-child(2) > div > div._1VZX7 > div._3Uu1_ > div > div > p > span");

            if (elemento !== null) {
                mensagemOriginal = elemento.textContent.trim();
                localStorage.setItem("mensagemOriginal", mensagemOriginal);
                //console.log("Original: " + mensagemOriginal);
            }


            if (e.key === "Enter" || e.code === "Enter") {
                mensagemOriginal = localStorage.getItem('mensagemOriginal') || ""
                const novaMensagem = `*[${nomeAtendente}]*\n${mensagemOriginal}`;
                console.log(novaMensagem);


                var elementoRemover = document.querySelector("#main > footer > div._2lSWV._3cjY2.copyable-area > div > span:nth-child(2) > div > div._1VZX7 > div._3Uu1_ > div > div.lhggkp7q.qq0sjtgm.jxacihee.c3x5l3r8.b9fczbqn.t35qvd06.m62443ks.rkxvyd19.c5h0bzs2.bze30y65.kao4egtt.kh4n4d4z.tt14wmjx");
                if (elementoRemover) {
                    elementoRemover.parentNode.removeChild(elementoRemover);
                }

                // Selecione o elemento com a classe "selectable-text" e classe "copyable-text"
                var elementoModificar = document.querySelector("#main > footer > div._2lSWV._3cjY2.copyable-area > div > span:nth-child(2) > div > div._1VZX7 > div._3Uu1_ > div > div > p");
                if (elementoModificar) {
                    elementoModificar.innerHTML = elementoModificar.innerHTML.replace(/<br>/g, '');
                
                    elementoModificar.innerHTML += `<span class="selectable-text copyable-text" data-lexical-text="true">${novaMensagem}</span>`;
                }



                localStorage.setItem("mensagemOriginal", "");
            }
        }


    }
}, 1000);

问题修复方案 #

你的代码主要有三个核心问题：

1. nomeAtendente仅在初始化时读取一次，用户修改保存后不会自动更新
2. 直接修改DOM的innerHTML无法适配WhatsApp的Lexical编辑器，导致消息发送异常
3. 重复监听多个键盘事件，容易触发重复逻辑

以下是修复后的代码，附带关键修改说明：

const interval = setInterval(() => {
    const menu = document.querySelector("#app > div > div > div._2Ts6i._3RGKj > header > div._604FD > div > span > span");
    const content = document.querySelector("#app > div > div > div._2Ts6i._2xAQV");

    if (menu && content) {
        clearInterval(interval);

        const btnMenu = document.createElement("button");
        btnMenu.innerHTML = "7C";
        btnMenu.classList.add("btnMenu7Carros");
        menu.appendChild(btnMenu);

        const divLateralHTML = `
            Nome do atendente: <br>
            <input type="text" id="nomeAtendente">
            <br><br>
            <button id="buttonSalvar" name="button" class="">Salvar</button>
        `;
        content.insertAdjacentHTML('afterend', `<div id="divLateral" style="display: none;">${divLateralHTML}</div>`);

        // 开关侧边菜单
        const divLateral = document.getElementById("divLateral");
        let divLateralVisivel = false;
        btnMenu.addEventListener("click", () => {
            divLateralVisivel = !divLateralVisivel;
            divLateral.style.display = divLateralVisivel ? "block" : "none";
        });

        // 保存客服名称到localStorage
        const buttonSalvar = document.getElementById("buttonSalvar");
        buttonSalvar.addEventListener("click", () => {
            const nome = document.getElementById("nomeAtendente").value.trim();
            if (nome) {
                localStorage.setItem("nomeAtendente", nome);
                alert("Salvo com sucesso!");
            } else {
                alert("Por favor, informe o nome do atendente!");
            }
        });

        // 页面加载时恢复已保存的名称
        document.getElementById("nomeAtendente").value = localStorage.getItem('nomeAtendente') || "";

        // 监听Enter键发送消息（仅处理非Shift+Enter的情况）
        document.addEventListener("keydown", (e) => {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault(); // 阻止默认发送行为，先修改消息

                // 动态获取最新保存的客服名称
                const nomeAtendente = localStorage.getItem("nomeAtendente");
                if (!nomeAtendente) {
                    alert("Por favor, configure o nome do atendente primeiro!");
                    return;
                }

                // 获取输入框元素
                const inputElement = document.querySelector("#main > footer div._3Uu1_ div.selectable-text.copyable-text");
                const mensagemOriginal = inputElement?.textContent.trim() || "";
                
                if (!mensagemOriginal) return;

                // 构造带客服名称的新消息
                const novaMensagem = `*[${nomeAtendente}]*\n${mensagemOriginal}`;

                // 更新输入框内容
                inputElement.textContent = novaMensagem;

                // 触发input事件，让WhatsApp编辑器识别内容变化
                const inputEvent = new Event("input", { bubbles: true });
                inputElement.dispatchEvent(inputEvent);

                // 延迟模拟Enter发送消息，确保内容已更新
                setTimeout(() => {
                    const enterEvent = new KeyboardEvent("keydown", { key: "Enter", bubbles: true });
                    inputElement.dispatchEvent(enterEvent);
                }, 100);
            }
        });
    }
}, 1000);

关键修改说明：

• 动态获取名称：在Enter键触发时才从localStorage读取nomeAtendente，确保使用用户最新保存的值
• 适配编辑器：直接修改输入框的textContent而非DOM结构，同时触发input事件让WhatsApp识别内容更新
• 简化事件监听：只监听keydown事件，并且排除Shift+Enter（换行场景），避免重复逻辑
• 流程优化：先阻止默认发送行为，修改内容后再模拟发送，确保发送的是带客服名称的消息

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