针对 Chrome 扩展中的动态聊天框

Question

我正在为我的大学项目开发 Chrome 扩展程序，而且我快完成了（大约完成了 90%）。该扩展程序打开 Messenger.com 并导航到特定的聊天链接，但我在定位聊天框（打字区域）时遇到问题。问题是 CSS 选择器/XPath/JS 路径似乎是动态的，我无法获得可靠的方法来选择聊天输入字段。

我尝试了各种解决方案并观看了大量视频，但我找不到在聊天框中输入文本并触发发送按钮的工作方法。

任何有关如何处理此类动态元素的建议或建议将不胜感激。这是我项目的最后一步！

Answer 1

对于未来问题的一些建议是努力提供尽可能多的信息，包括至少一些示例输入，因为否则这里的人无法在不访问网站、登录等的情况下回答您的问题。这里的人可以回答您的问题，但没有 Messenger.com 帐户。

无论如何...我有有一个Messenger帐户，所以我检查了网站的HTML，我发现你输入的框实际上是一个

div

元素，如下所示：

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

您可以使用 XPath 来解决该问题

div

，该 XPath 通过一个或多个相关属性来标识它，例如

//div[@aria-label="Message"]

或

//div
   [@aria-label="Message"]
   [@contenteditable="true"]
   [@role="textbox"]
   [@data-lexical-editor="true"]