通过 chrome 扩展程序将文本粘贴/编辑到文本字段中（内容脚本）

问：

我制作了一个具有内容脚本部分和弹出部分的 chrome 扩展程序。 在内容脚本中，我检查了聚焦的 textarea（或者它可以是带有 role=“textbox” 和 contenteditable=“true” 的聚焦 div）。

我添加了一个带有图标的 div，因此图标将位于右下角。我想做这样的功能：

用户单击图标 - 文本字段中的内容被删除，我在那里粘贴新内容。

它似乎是 Grammarly 及其工作原理。 但是粘贴或编辑文本字段存在问题。主要有两个原因：

1. execCommand()已弃用，我不想使用它，但是它在文本字段的情况下效果很好。
2. 文本字段有不同的实现方式，例如，以下是 Instagram 和 Facebook 如何模拟标签：

在此处输入图像描述

或 Outlook：在此处输入图像描述

在默认情况下一切都很好，我可以使用方法通过我的代码对其进行编辑，它也适用于 outlook，我只是这样做：execCommand()

// $textbox is an element founded by jquery

    $textbox.empty();
    $textbox.html(responseMessage);

但是对于 instagram，我尝试了相同的方法，甚至我粘贴了一个与那里相同的类的子元素，但它根本不起作用：

      const $allP = $textbox.find('p');
      $allP.remove();

// I append the same element that was in Instagram text field with my text
      $textbox.append(
        `<p class="xdj266r x11i5rnm xat24cr x1mh8g0r">
          <span data-lexical-text="true">
            ${responseMessage}
          </span>
        </p>`
      );

另外，我尝试通过以下代码删除现有的子元素：

   while (textbox.firstChild) {
     textbox.removeChild(textbox.firstChild);
   }

   textbox.appendChild(elementWithMyText)

此外，我还尝试制作键盘快捷键事件，例如 ctr + a 和 ctr + x。然后调度这个事件来制作有效的全球 shorcuts，但这也没有奏效。