用于发送带有姓名的 WhatsApp 消息的 Chrome 扩展

Question

我正在尝试创建一个用于发送消息的 chrome 扩展。我只想在消息上方添加我的名字。

问题是我不知道如何发送来自变量（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);

Answer 1

我的第一个想法是挂钩 WhatsApp Web 用于提交消息的功能。 不幸的是，在摆弄页面后我无法真正找到它。

我尝试过的似乎有效的方法是：

1. 获取编辑器元素
2. 添加“keydown”事件监听器（带有“capture：true”）
3. 处理Enter按键，并修改消息

const editorElement = document.querySelector('#main div[data-lexical-editor]');

function modifyMessage() {
  const editorSpan = editorElement.querySelector('span[data-lexical-text]'); // get span[data-lexical-text]
  console.log('editorSpan:', editorSpan);
  if (editorSpan) { // might not exist if the input field is empty
    const origMessage = editorSpan.childNodes[0].data; // get original message from text node (first child)
    const newMessage = 'AUTHOR\n' + origMessage;
    editorSpan.childNodes[0].data = newMessage; // alter it!
    console.log('origMessage:', `"${origMessage}"`, 'newMessage:', `"${editorSpan.childNodes[0].data}"`);
  }
}

function handleEvent(e) {
  console.log('handleEvent:', e);
  if (e.type === 'keydown') {
    if (e.key === 'Enter') {
      modifyMessage();
    }
  }
}

const USE_CAPTURE = true;
editorElement.addEventListener('keydown', handleEvent, {capture:USE_CAPTURE}); // NOTE: 'capture:true' may be needed in this case, to ensure the key event is captured before WA handles it */
// editorElement.removeEventListener('keydown', handleEvent, USE_CAPTURE);

通过一些调整，可以使用相同的逻辑来处理发送按钮上的“onClick”。

希望这对您有所帮助，或者至少是一个好的起点。 ;D