Programmer: Lifelong Learning: March 2015

Scenario
In some cases, we want to change our frequently-visited website a bit: such as add some shortcut key: click >(right arrow) to go to next page, click <(left arrow) to go previous page in current web site.

We can create chrome extension, but it's overkill in this case.

Tampermonkey
Chrome partially supports Greasemonkey, but doesn't support @require, @resource, unsafeWindow, GM_registerMenuCommand, GM_setValue, or GM_getValue.

Luckily, Tampermonkey fixes this issue: it is fully compatible to Greasemonkey, including GM_registerMenuCommand, GM_xmlhttpRequest with cross domain support and access to the unsafeWindow object.

We can install tampermonkey from webstore. Then use its dashboard to create(add) new user scripts locally.

We can create one simple Greasemonkey user script to do it, or install exsiting user scripts from
https://greasyfork.org/
http://userscripts-mirror.org/
https://openuserjs.org/

Examples
EDX helper
When watch open source courses in EDX, I would like to add the following shortcut keys:
>(right arrow): go to next page, <(left arrow) to go to previous page, t to play/pause the video, m to toggle full screen.
Also I want to auto play the video.

// ==UserScript==
// @name       edx helper
// @namespace  lifelongprogrammer.blogspot.com
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
// @version    1.0
// @description  some keybindings for edx: next, previous, play/pause
// @match      https://courses.edx.org/courses/*
// @copyright  2014+, Jeffery Yuan original author: Andrea Bisognin
// ==/UserScript==

this.$ = this.jQuery = jQuery.noConflict(true);
$(document).ready(function () {
 // auto play
 console.log("edx helper");
 setTimeout(function () {
  console.log("edx helper auto player");
  unsafeWindow.$("section.video-controls a[class='video_control play']").click();
 }, 2000);
 jQuery(document).keydown(function (e) {
  console.log("edx helper; key: " + e.keyCode);
  if (e.keyCode == 39) { //->
   unsafeWindow.$("div.sequence-nav > button.sequence-nav-button.button-next").click();
  }
  if (e.keyCode == 37) { // <-
   unsafeWindow.$("div.sequence-nav > button.sequence-nav-button.button-previous").click();
  }
  if (e.keyCode == 84 || e.keyCode == 116) { //t
   unsafeWindow.$("section.video-controls > div:nth-child(2) > ul > li:nth-child(1) > a").click();
  }
  if (e.keyCode == 67 || e.keyCode == 99) { //c
   unsafeWindow.$("div.lang.menu-container > a").click();
  }
  if (e.keyCode == 77 || e.keyCode == 109) { //m
   unsafeWindow.$("a.add-fullscreen").click();
  }

 });
});

Safaribooksonline Helper
Similarly, when watch videos on Safaribooksonline, I want to add >(right arrow): go to next page, <(left arrow) to go to previous page, f to open in full mode where we can still use left, right arrow keys.

// ==UserScript==
// @name       safaribooksonline helper
// @namespace  lifelongprogrammer.blogspot.com
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
// @version    1.0
// @description  some keybindings for safaribooksonline: next, previous
// @match      http://techbus.safaribooksonline.com/*
// @copyright  2015+, Jeffery Yuan, https://github.com/private-face/jquery.fullscreen
// ==/UserScript==

function d(b){var c,a;if(!this.length)return this;c=this[0];c.ownerDocument?a=c.ownerDocument:(a=c,c=a.documentElement);if(null==b){if(!a.cancelFullScreen&&!a.webkitCancelFullScreen&&!a.mozCancelFullScreen)return null;b=!!a.fullScreen||!!a.webkitIsFullScreen||!!a.mozFullScreen;return!b?b:a.fullScreenElement||a.webkitCurrentFullScreenElement||a.mozFullScreenElement||b}b?(b=c.requestFullScreen||c.webkitRequestFullScreen||c.mozRequestFullScreen)&&b.call(c,Element.ALLOW_KEYBOARD_INPUT):(b=a.cancelFullScreen||
a.webkitCancelFullScreen||a.mozCancelFullScreen)&&b.call(a);return this}jQuery.fn.fullScreen=d;jQuery.fn.toggleFullScreen=function(){return d.call(this,!d.call(this))};var e,f,g;e=document;e.webkitCancelFullScreen?(f="webkitfullscreenchange",g="webkitfullscreenerror"):e.mozCancelFullScreen?(f="mozfullscreenchange",g="mozfullscreenerror"):(f="fullscreenchange",g="fullscreenerror");jQuery(document).bind(f,function(){jQuery(document).trigger(new jQuery.Event("fullscreenchange"))});
jQuery(document).bind(g,function(){jQuery(document).trigger(new jQuery.Event("fullscreenerror"))});
this.$ = this.jQuery = jQuery.noConflict(true);
// https://github.com/private-face/jquery.fullscreen
$(document).ready(function () {
 // auto play
 console.log("safaribooksonline helper");
 jQuery(document).keydown(function (e) {
  console.log("safaribooksonline helper; key: " + e.keyCode);
  if (e.keyCode == 39) { //->
   unsafeWindow.$("#bcv_next").click();
   //$('#nana').fullScreen(true)   
  }
  if (e.keyCode == 37) { // <-
  console.log("i am called 26"); 
   unsafeWindow.$("#bcv_previous").click();
  }
  else if (e.keyCode == 70 || e.keyCode == 102) { //f
   $('div.brightcove_video').fullScreen(true)
  }
 });
});

Resources
Userscripts.org down for good? Here are alternatives

http://tampermonkey.net/

Sublime

Great Tools for Developers

Creating Tampermonkey User Script in Chrome

Labels