How to prevent Gmail from sending an email while I update the DOM?

Question

I'm trying to build a Chrome extension for Gmail (as an experiment).
The wanted behaviour is:

• when you click the SEND button...
• just before the message is really sent...
• update/modify the DOM to add to the email body - for example - "hello world"

I'm succeeding updating the DOM for any click I want, except for the one on the SEND button.
I've tried using e.stopPropagation() and e.preventDefault() with no success.

Is it theoretically possible to:

• stop the sending event from firing when you click the SEND button...
• update the DOM and when done
• continue the initial event (= send message)?

Or do I have to look another direction: some delay for example

---

EDIT

I've made some progress thanks to wOxxOm, but I'm still struggling.

1. After having inserted "Hello World", the message isn't sent by Gmail
2. I can't (weirdly?) removed the EventListener.

Any clue?

// works only for compose popup
window.addEventListener("click", handler, true);

function handler(event) {
  if (
    // Target only the SEND button
    event.target.matches('div[role="button"]') &&
    event.target.textContent === "Send"
  ) {

    event.stopPropagation();

    // Target body "textarea"
    var content = document.querySelectorAll('div[aria-label="Message Body"]');
    
    // Add some trivial content
    content[0].insertAdjacentHTML("beforeend", `<div>Hello World</div>`);
    
    // Weirdly, it doesn't remove EventListener...
    window.removeEventListener("click", handler, true);
  }
}