vawd_gandi vawd_gandi - 3 months ago 10
CSS Question

How to trigger Facebook 'New Message' button using jQuery?

(this is a repost, from earlier when I didn't have appropriate code examples)

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

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

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!

Does anyone have any ideas of what to do?

The following are examples of what I've tried in my script:

Trying to click after focusing on the element:

$('[data-tooltip-content="New Message"]').focus();
$('[data-tooltip-content="New Message"]').trigger('click');


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

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


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

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


Mixing both 'click' and 'enter' approaches:

$('[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);


I even used identifiers like
$('a#js_g')
after inspecting with Firebug.

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.

It went something like this:

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


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:

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

Answer

Looks like you can't use jQuery on Facebook pages, so you have to use vanilla js

document.querySelectorAll('[data-tooltip-content="New Message"]')[0].click()

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll