title: Trigger native keyboard events from a Chrome extension
body: <p>Facebook have textarea's where they expand/shrink to the size of the text inside of it. In my Chrome extension I change the text inside a textarea to be over several lines. However, the textareas expand/shrink method only works on keyboard events, so I have to trigger one.</p>
  <pre><code>var event = document.createEvent('KeyboardEvent');
  
  event.initEvent('keyup', true, true, window, false, false, false, false, 38, 38);
  this.dispatchEvent(event); // this is the textarea
  </code></pre>
  <p>(It does this for all of keyup, keydown, keypress)</p>
  <p>But this doesn't work. Now, I know a bit of why it doesn't work, but not how to solve it. I have attached a handler to the element to see what is going on:</p>
  <pre><code>$('[role=dialog] .MessagingComposerForm textarea').on('keyup', function(e) {
      console.log(e);
  });
  </code></pre>
  <p>When the Chrome extension triggers its keyup event, the object which I can see in my console is a normal Event object, except for two things: keyCode=0 and view=null.</p>
  <p>When I trigger the keyup event by hitting a key on my keyboard I can see that keyCode=38 and view=Window.</p>
  <p>Does anyone have an idea on how to do this?</p>
  <p>ADDED:</p>
  <p>I discovered something. If I <code>console.log</code> the event before it is dispatched it still doesn't contain the correct information. Here:</p>
  <pre><code>var event = document.createEvent('KeyboardEvent');
  
  event.initKeyboardEvent('keydown', true, true, window, false, false, false, false, 65, 65);
  event.keyCode = 65;
  event.which = 65;
  event.charCode = 65;
  
  console.log(event);
  
  this.dispatchEvent(event); // this is the textarea
  </code></pre>
  <p>outputs this object:</p>
  <pre><code>KeyboardEvent: {
      ...
      charCode: 0,
      keyCode: 0,
      view: Window,
      which: 0
  }
  </code></pre>