Chrome Extension to reuse saved text templates in Facebook comments, code not working

Question

Creating a chrome extension so I can reuse the saved/canned messages to comment faster on LinkedIn or Facebook.

First experiment is with Facebook, wrote the code, it is showing the button, opens the modal and the texts message listed, however, I am unable to inject them in the input field. Facebook uses draf.js I guess. Any workaround or alternative way to solve this.

  console.log("message-can.js loaded");
});

// document.addEventListener("click", initCan);

var allNode = null;

async function initCan(event) {
  const allRollTextBox = document.querySelectorAll("form");
  if (allRollTextBox[0] && allNode !== simplifyNode(allRollTextBox)) {
    allNode = simplifyNode(allRollTextBox);

    allRollTextBox.forEach(async (element) => {
      var ul = element.querySelector("ul");

      if (ul) {
        // find lexical data-lexical-text
        var li = ul.querySelector("li");
        if (li && !li.className.includes("message-can-li")) {
          var newLi = document.createElement("li");
          newLi.innerText = "✉";
          newLi.className = li.className + " message-can-li";
          newLi.onclick = () =>
            buttonOnClick((text) => {
              // get role = textbox
              var gettextbox = element.querySelector("[role='textbox']");
              if (gettextbox) {
                gettextbox.click();
                gettextbox.innerHTML = spanHTML;
              }
            });
          ul.insertBefore(newLi, li);
        }
      }

      function buttonOnClick(callback) {
        // check if modal is exist
        var modal = document.querySelector(".message-can-modal");
        if (modal) modal.remove();

        // append a modal to the body
        modal = document.createElement("div");
        modal.className = "message-can-modal";
        var content = document.createElement("div");
        content.className = "message-can-modal-content";

        var close = document.createElement("p");
        close.className = "message-can-modal-close";
        close.innerHTML = "×";
        close.onclick = function () {
          modal.remove();
        };
        content.appendChild(close);
        var originalItems = document.createElement("ul");
        originalItems.className = "message-can-modal-ul";
        // append li to the ul
        messageOptions.reverse().forEach((msg) => {
          //create li
          var li = document.createElement("li");
          li.className = "message-can-modal-li";
          li.onclick = function () {
            callback(msg);
            modal.remove();
          };
          li.innerText = msg;
          originalItems.appendChild(li);
        });
        content.appendChild(originalItems);
        modal.appendChild(content);
        document.body.appendChild(modal);
      }
    });
  }
}

function simplifyNode(arr) {
  var newArr = [];
  arr.forEach((element) => {
    newArr.push(element.className);
  });
  return newArr.join("-");
}

const messageOptions = [
  "I'm sorry, I can't do that.",
  "Okay, I'll try again.",
  "Shit, I can't do that.",
  "My bad.",
  "Yeah, I'm sorry.",
];````