Paste event listener not working for Gmail body and Facebook Messenger Chat

I’m creating a browser extension that will strip UTM metrics from URLs to make them cleaner to share. I can do this pretty reliably through a popup click, but I’m trying to add a listener so it will fire automatically when it detects a URL being pasted.

Because navigator.clipboard is a huge pain to work with and requires permissions for every site, I’m using

document.execCommand("insertHTML", false, trimmed_url)

to paste my formatted URL link.

This works just fine for search bars, subject lines, and conversation boxes, but when I try and paste in a Gmail body or a FB Chat window, I get the original unaltered url, followed immediately by the trimmer_url

Example:

https://www.theonion.com/san-francisco-realtor-shows-couple-earning-under-6-figu-1850289467?utm_campaign=The%20Onion&utm_content=1681314305&utm_medium=SocialMarketing&utm_source=facebook&fbclid=IwAR0FY7EO505rXu1eyGNYzN_tTkuUfyNl6EKqvuf_r-_N5fBfq4F1Sdisb8A

Goes to –>

Code:

function pasteClipboard(){

    window.addEventListener("paste", (event) => {
        event.preventDefault();

        let paste = (event.clipboardData || window.clipboardData).getData("text/plain");
        let trimmed = trimURL(paste);


        setTimeout(function() {
            document.execCommand("insertHTML", false, trimmed);
            }, 50);


    });

Does anyone have any idea why this is happening? I can see in the console logs that trimURL is working correctly and I’m getting the same behavior for both Gmail Bodys and FB Chat as I’m making changes, so I’m assuming there’s something specific to those elements that is getting in the way.

div classes for FB Chat and Gmail body

FB:

<div aria-describedby=":r74:" aria-label="Message" class="xzsf02u x1a2a7pz x1n2onr6 x14wi4xw x1iyjqo2 x1gh3ibb xisnujt xeuugli x1odjw0f notranslate" contenteditable="true" role="textbox" spellcheck="true" tabindex="0" data-lexical-editor="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;"><p class="xat24cr xdj266r"><br></p></div>

Gmail

<div id=":yv" class="Am Al editable LW-avf tS-tW" hidefocus="true" aria-label="Message Body" g_editable="true" role="textbox" aria-multiline="true" contenteditable="true" tabindex="1" style="direction: ltr; min-height: 226px;" spellcheck="false" aria-owns=":11o" aria-controls=":11o"><br></div>

I’m trying to get it to so just the updated url is being pasted into the chat body.