（Chrome 扩展程序）在页面 addEventListener 之前从扩展程序执行某些操作

Question

I want to add " HELLO" to a message box before the message is sent (when press enter ).

Example:
Here I try to change the whole message to (current message + " HELLO") to the message box when the user press ENTER (return key).

Code (example for slack message box):

document.querySelector('.ql-editor').addEventListener("keydown", async function(event) {

    if (event.keyCode === 13) {
        //Fetch current element with data
        var slackMessageField = document.querySelector('.ql-editor');

        event.preventDefault();

        textRightNow = slackMessageField.innerText;
        slackMessageField.innerText = (slackMessageField.innerText + " HELLO");
    }
});

slackMessageField = `<div class="ql-editor ql-blank" data-gramm="false" 
   contenteditable="true" id="undefined" dir="auto" role="textbox" tabindex="0"
   data-team-id="T9L8N47PZ" aria-label="Message #ipnmod"
   aria-describedby="context-bar-text" aria-multiline="true"
   aria-autocomplete="list" aria-expanded="false"
   aria-owns="chat_input_tab_ui" spellcheck="true"><p><br></p></div>`

which is where the user types the message in.

Problem:
Slack sends the regular message before adding " HELLO" and also don't manage to fetch the current innerText (textRightNow). So we end up with "(EMPTY SPACE) HELLO" in the message box instead of adding " HELLO".

Answer 1

The behavior may be happening just because the element slackMessageField doesn't have any text inside of it and thus slackMessageField.innerText isn't getting any text. If you happen to run the same event over and over, you'll have the <space>Hello concatinated every time. Please make sure that you've added the text that you're searching is available inside the targeted element. For instance:

 document.querySelector('.ql-editor').addEventListener("keydown", async function(event) { if (event.keyCode === 13) { //Fetch current element with data var slackMessageField = document.querySelector('.ql-editor'); event.preventDefault(); textRightNow = slackMessageField.innerText; slackMessageField.innerText = (slackMessageField.innerText + " HELLO"); } });

 .ql-editor { border: 1px solid #000; padding: 5px; }

 <label>Press Enter:</label> <div class="ql-editor ql-blank" data-gramm="false" contenteditable="true" id="undefined" dir="auto" role="textbox" tabindex="0" data-team-id="T9L8N47PZ" aria-label="Message #ipnmod" aria-describedby="context-bar-text" aria-multiline="true" aria-autocomplete="list" aria-expanded="false" aria-owns="chat_input_tab_ui" spellcheck="true"> Lorem Ipsum </div>

On the above example, when the keydown event triggers, there will be some existing text inside the slackMessageField element, and thus the result will show as Lorem Ipsum HELLO after the event has triggered.

Answer 2

There Is no way to do this. Site runs a script before which clears the messagebox. I'll have to save the content of the messagebox everytime it changes.