title: How to trigger Facebook 'New Message' button using jQuery?
body: <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>