无法从扩展的内容脚本更改 WhatsApp Web 的 `textContent`

Question

在我的 chrome 扩展中，我试图更改 Whatsapp Web 的 dom 我正在获取聊天元素并尝试更改其内容，但我无法做到这一点 这是我的代码

window.addEventListener("load", () => {
    document.addEventListener('keydown', function (event) {
        const target = event.target;
        const spanEl = target.querySelector('span[data-lexical-text="true"]');
        console.log(spanEl, spanEl.textContent);
        spanEl.textContent = 'Changed';
        });
    });
});

但是上面的代码没有反映出任何变化，而使用相同的代码我可以更改其他元素的文本内容，聊天框元素的文本内容不会改变。

WhatsApp Web 的 HTML 元素

<div class="to2l77zo gfz4du6o ag5g9lrv bze30y65 kao4egtt" contenteditable="true" role="textbox" spellcheck="true" title="Type a message" tabindex="10" data-tab="10" data-lexical-editor="true" style="max-height: 7.35em; min-height: 1.47em; user-select: text; white-space: pre-wrap; word-break: break-word;">
  <p class="selectable-text copyable-text iq0m558w g0rxnol2" dir="ltr" style="text-indent: 0px; margin-top: 0px; margin-bottom: 0px;">
    <span class="selectable-text copyable-text" data-lexical-text="true">as</span>
  </p>
</div>

Answer 1

如果您发布了 HTML，将会有所帮助，但我假设您单击的不是实际的 span 元素

window.addEventListener("load", () => {
  document.addEventListener('keydown', function(event) {
    const target = event.target.closest('div.someClass');
    if (!target) return;
    const spanEl = target.querySelector('span[data-lexical-text="true"]');
    console.log(spanEl, spanEl.textContent);
    spanEl.textContent = 'Changed';
  });
});

<div class="someClass">
  <span data-lexical-text="true" contenteditable="true">Hello</span>
</div>