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)

Solution 1

I found that chrome debugger protocol v1.1 is the definite answer to simulating key and mouse events from a Google Chrome extension. Part of the protocol is accessible through chrome.debugger API.

Solution 2

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

Solution 3

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

Comments

[disya2]

Well... I got some things working, e.g. moving a JQuery slider by "arrow keys" is possible now. However, text input controls seem not reacting on keypress (i.e. no character is entered) and the only keydown event which does what expected is 'Tab'. Sending backspace event to any input control triggers browser "back" navigation; Home, End, etc simply not working. I believe this somehow related to the fact that events are not "trusted", though I don't see ".isTrusted" property which would indicate that (as in Firefox).

[Xan]

Care to add an example? Or at the very least a link to relevant debugger protocol docs?

[disya2]

The relevant protocol commands can be found here. chrome.debugger.sendCommand() is how to send one.

[unobf]

awesome!! Thanks!! I made some enhancements to fix which and pass in the event

[jdunning]

Those docs are now here. The devtools protocol is documented here. It looks like Input.dispatchKeyEvent might be what you'd use to send a key event to a tab using sendCommand(), but I haven't tried it yet.

[Rob]

This works great, and for those that want to press enter as shown and then select the backspace key (keycode 8) after an enter, this works perfectly!

[manuell]

Why do you seem to send a keyUp and then a keyDown? And could you confirm that's still working today... (Chrome 80+)?