Adding a custom keyboard shortcut using userscript to Chrome with Tampermonkey

Question

I would like to add some custom keyboard shortcuts to a certain web page.

Using the accepted answer from this question as a guide: How can I add a JavaScript keyboard shortcut to an existing JavaScript Function?

I made my own little function and added a listener:

// ==UserScript==
// @name       ChartGame
// @namespace  http://www.chartgame.com/
// @version    0.1
// @description  enter something useful
// @match      http://www.chartgame.com/play*
// @copyright  2012+, You
// ==/UserScript==
function doc_keyUp(e) {
  switch(e.keyCode)
  {
  case 49: //1
    mon_clk(3);
    break;
  case 50:
    mon_clk(6);
    break;
  case 83: //s
    BuySell(0);
    break;
  case 68: //d
    BuySell(1);
    break;
  case 70: //f
    TimelapseDwn();
    TimelapseUp();
    break;
   default:
     break;
  }
}
document.addEventListener('keyup', doc_keyUp, false);

This code runs just perfectly fine if I enter it into the Chrome javascript console while on the appropriate web page. I can use the keyboard shortcuts as I intended. The only problem is that I have to reenter javascript code including the listener if I go to a next game(that is chart..).

My impression was that Tampermonkey would allow me to run this script automatically on specific pages that match the expression on @match. The code does appear to run, but there is no keyboard shortcut functionality.

What is missing or what is different from running javascript code from Chrome console and from an extension such as Tampermonkey?

Solution

That code does not work in a userscript because it is calling javascript functions defined by the target page. Userscripts operate in various sandboxes, and so cannot see the target page's JS so easily.

Tampermonkey (and Greasemonkey) provide a way around this with unsafeWindow. (Plain Chrome userscripts do not support unsafeWindow in any useful way.)

So, to use those functions, prefix them like so:

// ==UserScript==
// @name       ChartGame
// @namespace  http://www.chartgame.com/
// @version    0.1
// @description  enter something useful
// @match      http://www.chartgame.com/play*
// @copyright  2012+, You
// ==/UserScript==
function doc_keyUp(e) {
    switch (e.keyCode) {
        case 49:
            //1
            unsafeWindow.mon_clk(3);
            break;
        case 50:
            unsafeWindow.mon_clk(6);
            break;
        case 83:
            //s
            unsafeWindow.BuySell(0);
            break;
        case 68:
            //d
            unsafeWindow.BuySell(1);
            break;
        case 70:
            //f
            unsafeWindow.TimelapseDwn();
            unsafeWindow.TimelapseUp();
            break;
        default:
            break;
    }
}
document.addEventListener('keyup', doc_keyUp, false);

---

---

An alternative approach, and one that works on plain Chrome userscripts, is to Inject your code. But since you are using Tampermonkey, just use the unsafeWindow approach in this case.

Comments

[JinSnow]

Just an example of script adding different shortcuts to google docs: github.com/WiliTest/userscript/blob/master/…

[Sint]

Thanks, Your suggestion worked perfectly! I will have to look into code injection in Chrome some time, but quick and dirty and working is what I like right now.