适用于Facebook克隆的Chrome扩展程序(自动“用户正在收听...") [英] Chrome Extension for Facebook-Clone (automatic "User is listening to...")

问题描述

我正在构建一个Chrome扩展程序，以通过按´"将当前聊天的输入框替换为我当前正在听的音乐.请记住，就像在实际的桌面版Facebook中一样，没有input/textarea标签元素，它是由react制成的.

I'm building a Chrome Extension to replace the current chat's input box with the music I'm currently listening to by the press of "´". Please keep in mind that like in the actual desktop version of Facebook, there is no input/textarea tag element and it's made with react.

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

I'm stuck at properly replacing the text in the private Facebook-Clone's input, I can see it there, but when I press Enter, it doesn't send.

此刻发生的情况的屏幕截图: https://vimeo.com/203014549

Screencast of what happens at the moment: https://vimeo.com/203014549

在聊天方面，这个私人的Facebook克隆的工作方式与Facebook的实际桌面版本完全相同.

This private Facebook-Clone works exactly like the actual desktop version of Facebook in regards to the Chat.

content.js:

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);
                }
        });      
      };        
});

更新:
我似乎不太了解与反应有关的内容，因为在输入时，它只是被手动按键填充的字符所代替，而我对输入字段的操纵版本也消失了，请参见视频查找错误.

UPDATE:
It seems to be something about react that I don't quite understand, because on enter it just gets replaced with the characters populated by manual keystroke and my manipulated version of the input field is gone, see video for bug.

推荐答案

._ 5rpu元素是contentEditable，其中包含辅助必需元素，因此您不能只是通过替换新的html来破坏其内容.

The ._5rpu element is a contentEditable with auxiliary required elements inside so you can't just nuke its contents by replacing with a new html.

改为使用 document.execCommand :

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

如果要将文本插入无效的输入区域，请先将其聚焦:

In case you want to insert the text in an inactive input area, focus it first:

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

这篇关于适用于Facebook克隆的Chrome扩展程序(自动“用户正在收听...")的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！