Firing a Keyboard Event on Chrome

Firing a keyboard event on Chrome

I just want to throw this basic snippet out there. It works in Chrome and is based on the hack mentioned by Paul Irish.

It uses charCode instead of keyCode (which can be useful in certain situation), but adapt to keyCode if you so please.

var keyboardEvent = new KeyboardEvent('keypress', {bubbles:true}); 
Object.defineProperty(keyboardEvent, 'charCode', {get:function(){return this.charCodeVal;}}); 
keyboardEvent.charCodeVal = [your char code];
document.body.dispatchEvent(keyboardEvent);

Fire event in extension on keyboard shortcut

chrome.commands has a very limited set of shortcuts that work globally:

By default, Commands are scoped to the Chrome browser, which means that while the browser does not have focus, the shortcut will be inactive. On desktop Chrome, Commands can instead have global scope, as of version 35, and will then also work while Chrome does not have focus. NOTE: The exception here is Chrome OS, where global commands are not allowed at the moment.

The user is free to designate any shortcut as global using the UI in chrome://extensions \ Keyboard Shortcuts, but the extension developer is limited to specifying only Ctrl+Shift+[0..9] as global shortcuts. This is to minimize the risk of overriding shortcuts in other applications since if, for example, Alt+P were to be allowed as global, the printing shortcut might not work in other applications.

Documentation is available here.

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

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.

Keydown Simulation in Chrome fires normally but not the correct key

So very very close...

You just needed to override the 'which' property. Here's some sample code:

Podium = {};
Podium.keydown = function(k) {
    var oEvent = document.createEvent('KeyboardEvent');

    // Chromium Hack
    Object.defineProperty(oEvent, 'keyCode', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     
    Object.defineProperty(oEvent, 'which', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     

    if (oEvent.initKeyboardEvent) {
        oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k);
    } else {
        oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0);
    }

    oEvent.keyCodeVal = k;

    if (oEvent.keyCode !== k) {
        alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
    }

    document.dispatchEvent(oEvent);
}

Sample usage:

Podium.keydown(65);

Note: this code is not designed to work in IE, Safari, or other browsers. Well, maybe with Firefox. YMMV.

chrome extension: how to send 'keydown' event to page's input?

Your code is not working because jQuery's keydown() method does not actually trigger a "real" keydown event. Instead, jQuery looks up the "bound" event handlers in jQuery.cache, and calls the corresponding functions.

Since your content script's jQuery object differs from the page's jQuery object, invoking .keydown() doesn't cause any action.

In your case, I suggest to inject your code in the page, so that your code runs in the same context as the page. Then, calling $('#foo').keydown() will use the page's jQuery object, and result in the expected behaviour.

A general solution, which doesn't depend on any library is to use the KeyboardEvent constructor (defined in DOM4) to trigger the event:

var event = new KeyboardEvent('keydown');
document.querySelector('#foo').dispatchEvent(event);

Firing a keyboard event, webkit keyboard event doesn't fire

The most obvious thing is the simple typo on the following line:

var key = e.keycode ? e.keycode : e.which;

It should be keyCode rather than keycode.

Other than that, there are problems in the addEventHandler function. I suggest the following:

function addEventHandler(node,type,fn){
    if (typeof node.addEventListener !== "undefined"){
        /* DOM-compliant method */
        node.addEventListener( type, fn,false );
    } else if (typeof node.attachEvent !== "undefined") {
        /* IE */
        node.attachEvent( "on" + type, fn );
    }
}

Two things: first, it's better to check for attachEvent directly rather than infer its existence from the existence of window.event. In fact, window.event exists in Safari and Chrome but not (I think) attachEvent, so that dodgy inference is preventing your code from working.

Secondly, it's better to check for the DOM standard addEventListener first and use it where it exists rather than attachEvent. Opera, for example, has both but only addEventListener is standardised.

---

Related Topics