How to to initialize keyboard event with given char/keycode in a Chrome extension?

Question

I'm developing a Google Chrome extension which simulates keyboard events on a web-page.

I found that event.initKeyboardEvent() does not work properly because of this webkit bug and I also found some workarounds, e.g. SO Question

However, defining properties on event object is not working because extension's content script has its own "parallel world" so properties defined in content script are not visible to web-page script.

My only and last hope that DOM 4 Event Constructors work in Google Chrome and it would be possible to properly initialize keyboard event through constructor

var event = new KeyboardEvent("keypress", {key: 'U+0041', char: 'a', ... })

Unfortunately, it fails with:

TypeError: illegal constructor  

I was not able to find any documentation on supported event constructors in Chrome. Could anyone point me to some docs/source code?

Any other way to simulate keyboard events in a Google Chrome extension?

(note, TextEvent won't help because many real-world controls listen to keydown/keyup specifically)

Answer 1

Incase anyone has the issue I faced with triggering a keyup with a specific keycode. This is one way.

First off I tried @RobW's answer above with no luck. No Keycode passed, always undefined.

So then I looked into @disya2's answer, which did work.

So here's some code:-

Manifest

"permissions": [
    "debugger"
  ],

ContentScript.js

chrome.runtime.sendMessage({ pressEnter: true });

Background.js

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    if(message.pressEnter){
        chrome.tabs.query({active: true}, function(tabs) {
            chrome.debugger.attach({ tabId: tabs[0].id }, "1.0");
            chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'keyUp', windowsVirtualKeyCode:13, nativeVirtualKeyCode : 13, macCharCode: 13  });
            chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'keyDown', windowsVirtualKeyCode:13, nativeVirtualKeyCode : 13, macCharCode: 13  });
            chrome.debugger.detach({ tabId: tabs[0].id });
        });
    }
});

Answer 2

Because Chrome does not preserve custom properties when you initiate an event from a Content script to the page (and vice versa), inject a script in the page to take over this job. Here's a basic example which shows the idea. It is usable, although the key and keyCode properties are not correctly handled (those shouldn't be used anyway).

// Example: Say, you've got a reference to a DOM element...    
var elem = document.body;
// And you want to "type" "A"
var charCode = 65;

// Now, you want to generate a key event...
triggerKeyEvent(elem, charCode);

// triggerKeyEvent is implemented as follows:
function triggerKeyEvent(element, charCode) {
    // We cannot pass object references, so generate an unique selector
    var attribute = 'robw_' + Date.now();
    element.setAttribute(attribute, '');
    var selector = element.tagName + '[' + attribute + ']';

    var s = document.createElement('script');
    s.textContent = '(' + function(charCode, attribute, selector) {
        // Get reference to element...
        var element = document.querySelector(selector);
        element.removeAttribute(attribute);

        // Create KeyboardEvent instance
        var event = document.createEvent('KeyboardEvents');
        event.initKeyboardEvent(
            /* type         */ 'keypress',
            /* bubbles      */ true,
            /* cancelable   */ false,
            /* view         */ window,
            /* keyIdentifier*/ '',
            /* keyLocation  */ 0,
            /* ctrlKey      */ false,
            /* altKey       */ false,
            /* shiftKey     */ false,
            /* metaKey      */ false,
            /* altGraphKey  */ false
        );
        // Define custom values
        // This part requires the script to be run in the page's context
        var getterCode = {get: function() {return charCode}};
        var getterChar = {get: function() {return String.fromCharCode(charCode)}};
        Object.defineProperties(event, {
            charCode: getterCode,
            which: getterCode,
            keyCode: getterCode, // Not fully correct
            key: getterChar,     // Not fully correct
            char: getterChar
        });

        element.dispatchEvent(event);
    } + ')(' + charCode + ', "' + attribute + '", "' + selector + '")';
    (document.head||document.documentElement).appendChild(s);
    s.parentNode.removeChild(s);
    // The script should have removed the attribute already.
    // Remove the attribute in case the script fails to run.
    s.removeAttribute(attribute);
}

This is a simple example which triggers the keypress event for char "A". If you want to trigger more relevant key events, do not use triggerKeyEvent three times (because it has a slight overhead). Instead, modify the triggerKeyEvent function such that it fires all events (keydown, keypress, keyup and/or input) with the correct parameters.

If you need to be able to change altKey, shiftKey, etc., just modify the function.
Bottom line: The example I've shown is very basic and can be tweaked to suit your needs.

Read more

If you want to change the implementation to match the specification, read these sources:

• W3C: DOM Level 3 Events specification, section Keyboard Event types
• W3C: DOM Level 3 Events specification, appendix B: Legacy key attributes: keyCode, charCode, and which

If you want to know more about the concept of Script injection in a content script, see:

• Stack Overflow: Building a Chrome Extension - Inject code in a page using a Content script