How to trigger Facebook 'New Message' button using jQuery?
<p>(this is a repost, from earlier when I didn't have appropriate code examples)</p>

<p>I've been at my wit's end trying to figure out how to interact with Facebook's front-end ui.</p>

<p>I'm writing a simple Firefox add-on that simply runs some JavaScript/jQuery when it recognizes you're on <a href="https://www.facebook.com/" rel="nofollow">https://www.facebook.com/</a> -- just purely for purposes of keeping myself productive and not-distracted when I do go on Facebook.</p>

<p>But anyways, I've been trying to simply select the 'New Message' button all the way in the bottom-right corner of the chat side-bar. And no events – focus, click, keypress 'Enter', going to the href of that button, etc. – has worked so far. That's literally it, I just want to open up a new message box, and my add-on will be done. But for some reason, whatever black magic Facebook's ui has got going on behind-the-scenes, that damn button just won't press!</p>

<p>Does anyone have any ideas of what to do?</p>

<p>The following are examples of what I've tried in my script:</p>

<p>Trying to click after focusing on the element:</p>

<pre><code>$('[data-tooltip-content="New Message"]').focus();
$('[data-tooltip-content="New Message"]').trigger('click');
</code></pre>

<p>Setting the window location to the href -- all that did was append '#' to the url:</p>

<pre><code>var href = $('[data-tooltip-content="New Message"]').attr('href');
window.location.href = href;
</code></pre>

<p>Trying to make it look like I pressed 'enter' after focusing on the element:</p>

<pre><code>$('[data-tooltip-content="New Message"]').focus();
var f = jQuery.Event("keypress");
f.which = 13;
f.keyCode = 13;
$('[data-tooltip-content="New Message"]').trigger(f);
</code></pre>

<p>Mixing both 'click' and 'enter' approaches:</p>

<pre><code>$('[data-tooltip-content="New Message"]').focus();
$('[data-tooltip-content="New Message"]').trigger('click');
var f = jQuery.Event("keypress");
f.which = 13;
f.keyCode = 13;
$('[data-tooltip-content="New Message"]').trigger(f);
</code></pre>

<p>I even used identifiers like <code>$('a#js_g')</code> after inspecting with Firebug.</p>

<p>Before, my much more complicated way of trying to open up a message box involved actually searching in the chat search-box, and then waiting for the results to show up before selecting and clicking the highlighted individual (if there were any) in the results. The problem was, the search-box never registered my input as, I guess, being "natural user input", so changing the input box's value didn't trigger a search for relevant results, even with the keyup() event, and after 2 seconds, the input-box's value just cleared itself.</p>

<p>It went something like this: </p>

<pre><code>var searchChat = "something to search";
$('input._58al').focus();
$('input._58al').val(searchChat).keyup();
var e = jQuery.Event("keypress");
e.which = 13; //choose the one you want
e.keyCode = 13;
$("input._58al").trigger(e);
$('input._58al').focus();
$("input._58al").trigger(e);

//I set a timeout here, by encapsulating the following in a function, to wait for the results to show up

var header = $('div._225b').text();
var listItems = $('ul#js_3 li');
var selected = false
listItems.each(function(index, li) {//Basically, go down all the list of items and see if any of them are auto-selected; we just open that one, as facebook's default choice
    if ($(li).attr("aria-selected")) {
        $(li).trigger('click');
        selected=true;
    }
});
</code></pre>

<p>I read somewhere that it might have been a cross-origin issue, with my Firefox content script being blocked? But even after changing permissions like so in my package.json, nothing happened:</p>

<pre><code>"permissions": {
    "cross-domain-content": ["https://www.facebook.com/"]
}
</code></pre>