Question

我正在构建一个Chrome扩展程序，用当前正在收听的音乐替换当前聊天的输入框，按下“'”。请记住，就像在Facebook的实际桌面版本中一样，没有输入/ textarea标记元素，并且它是通过反应制作的。

我坚持正确替换私人Facebook-Clone输入中的文本，我可以在那里看到它，但是当我按Enter键时，它不会发送。

目前发生的事情的截屏视频： https://vimeo.com/203014549

这个私密的Facebook-Clone与Facebook的实际桌面版本完全相同。

content.js：

$(function() {   
      if (window.jQuery) {

        $('body').append("<div class='facemusic_tip' style='position:fixed;min-width:400px;width:400px;min-height:20px;height:20px;overflow:scroll;background-color:#000000;top:0;left:0;padding:10px;z-index:99999;color:white'>Press ´ in your message input to inject current song</div>");

        function findAncestor(el, cls) {
            while ((el = el.parentElement) && !el.classList.contains(cls));
            return el;
        }

        $(document).on("keydown", function(e) {
                if(e.which === 229){
                    var currentmusic =  getCurrentMusicAsString();
                    keytarget = findAncestor(e.target, 'fbNubFlyoutOuter');
                    var $chatbox_outer = $(keytarget);
                    $chatbox_outer.parent('.fbDockChatTabFlyout.uiContextualLayerParent').find("._5rpu").html("I'm listening to: "+currentmusic);
                }
        });      
      };        
});

更新：
这似乎是我不太了解的反应，因为在输入时它只会被手动按键填充的字符替换，输入字段的操作版本消失了，请参阅视频以查找错误。

Answer 1

._5rpu元素是一个contentEditable，其中包含辅助必需元素，因此您不能通过替换为新的html来核对其内容。

改为使用document.execCommand：

document.execCommand('insertText', false, 'blablabla');

如果要将文本插入非活动输入区域，请先将其对焦：

document.querySelector(
   '#feedx_container textarea, ' +
   '#feedx_container [contenteditable="true"]'
).focus();

适用于Facebook-Clone的Chrome扩展程序（自动“用户正在收听...”）

1 个答案: