(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/"]
}
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