javascript - (Chrome 扩展)在页面 addEventListener 之前从扩展执行某些操作

Question

我想在发送消息之前(按输入时)将“HELLO”添加到消息框中。

示例:
这里我尝试将整个消息更改为(当前消息+“HELLO”)到用户按ENTER(返回键)时的消息框。

代码(松弛消息框示例):

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>`

这是用户输入消息的地方。

问题:
Slack 在添加“HELLO”之前发送常规消息，并且也无法获取当前的内部文本 (textRightNow)。因此，我们最终在消息框中显示“(EMPTY SPACE) HELLO”，而不是添加“HELLO”。

Answer 1

该行为的发生可能只是因为元素 slackMessageField里面没有任何文本，因此 slackMessageField.innerText没有收到任何短信。如果您碰巧一遍又一遍地运行同一事件，您将获得 <space>Hello每次都连在一起。请确保您添加的文本在目标元素内可用。例如:

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>

在上面的例子中，当 keydown 事件触发时，slackMessageField 中将会有一些现有的文本。元素，因此结果将显示为 Lorem Ipsum HELLO事件触发后。