0

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.

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.

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

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

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.

Jessica
  • 23
  • 6
  • I have and 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. – Jessica Feb 07 '17 at 22:31
  • Why do you test for the existence of jQuery *after* you invoke `$()`. If you are going to test to see if jQuery exists, then you should check *prior to* using it, not after you use it. You appear to be trying to use an [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). If so, it would commonly look like: `(function () { … })();` or `(function () { … }());`. In other words, without the `$`, but with the function invocation `()` after the function expression. – Makyen Feb 07 '17 at 22:40
  • @Makyen Thank you for your comment :) It doesn't affect the user experience of my extension though. Please watch the video to know what happens, if jQuery wasn't properly available, it wouldn't even have replaced the text in the userinput div. – Jessica Feb 07 '17 at 23:04
  • I understand that the presence/lack of jQuery is not the problem, just something I noticed in your code. I've watched the video, the problem is that we don't have enough information to *know* what the problem is, we can make educated *guesses* as to the issue, but without more information we can not be sure. My next comment will be some tailored boilerplate information as to what we need to be able to duplicate the issue, which is what is normally necessary to be certain – Makyen Feb 07 '17 at 23:12
  • Please [edit] to provide enough information to *duplicate the problem*. We need a *manifest.json* file, more of your other files (background script(s), content script(s), popup HTML/script(s), etc.), some of the site's HTML, output from the [extension's consoles](http://stackoverflow.com/a/38920982/3773011), etc. Basically, we need a **complete**, but *minimal* [**mcve]**. Right now, we have to *guess* at quite a bit to provide answers. Thus, answers would be largely a [SWAG](https://en.wikipedia.org/wiki/Scientific_wild-ass_guess), which is not what we generally desire and may not help you. – Makyen Feb 07 '17 at 23:13
  • thank you for your comment :) there are no additional scripts other than loading the current music track, which works perfectly find - also it can also easily be tested on the public facebook site. wOxxOm identified one of the problems and made a suggestion that works btw :) – Jessica Feb 07 '17 at 23:18

1 Answers1

0

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.

Use document.execCommand instead:

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();
wOxxOm
  • 65,848
  • 11
  • 132
  • 136