once in a while i have to do some html stuff. this time it was ajaxifying a homepage.

article

greasemonkey is a firefox plugin (but not limited to firefox) which can rewrite a homepage like a proxy could do.

my problem: at my job i have to correct answers and the system is very slow since the loads for doing something are quite high. maybe the php code is poor in design or something else. the problem still is a slow page reload.

reload times range from 3-11 secs dependent on what currently is viewed using DSL! i tried even with isdn but it's no fun.

so first i came up with curl script but then i had to copy lots of identifiers to give the scripte the right location in the page to 'do' the actual correction. however the status of the change was only visible after a reload of the webpage.

not too long ago someone in #qt@irc.kde.org mentioned greasemoneky. i started to hack a small injector script which is run in the context of the webpage. therefore it simply injects some css/java script code in the page after it has been loaded in the browser.

lab_before.png

This was the page before my GM hack was applied.

lab_afterwards.png

This was the page after my GM hack was applied.

Instead of waiting for the page to reload all the time my script makes intelligent assumptions on the state of the 'answer' i am currently correcting and displays the state on the page using colors. also the 'correction bar' which contains how many points a answer may have is dynamically adapted to the max points of the answer (based on some form data i parse).

please see the 'gm script' below and [2] and [3] of course.

what do my scripts actually do?

1. you login into the homepage

2. the GM script is exectued on every page in that namespace (the domain as foobar.de/*)

3. the GM script inserts css/java script code and executes this

4. the injected java script code parses the webpage dom tree, and rewrites some specific

5. afterwards the modified version is using ajax to modify the page using post, see [3]

development

i found a local webserver very helpful in developing this scripts and afterwards i deplayed them to my webserver (the scripts i actually inject in the webpage -> for a wider audience and better accessability)

a very helpful tool one should have is firebug! so if you want to do that same, have a look at that tool which comes in handy all the time!

security of script users

all my scripts (except the one you download and install locally) are executed in the context of the webpage. so nobody can use any GM_API hack to access the local files. if in doubt check the script yourself.

i also put some effort into checking for https usage. if you use https then my script will use post with https as well.

how to install this?

just install greasemonkey plugin in ff. restart ff and enable greasmonkey (click the monkey on the lower right, so that the icon is colored.

then visit [4] and install my script.

HINT: i host two of three needed files. one of these 3 files is installed on your pc when visiting [4]. if you want to have all files just download [2] and [3] as well and copy them to your webserver. next rewrite [4] to use your webservers copy.

limitation you should know

if you use this script with the labsystem [5] this script will only work when:

  • you correct 'all answers of all users' stepping through a lab
  • you correct 'all answers of all users' using 'all answers'

it will not work if you:

  • only correct one user

license

all work (expect files i just included as libraries) is release under the terms of the GPL v3 this includes:

the library i used:

is 'Released under the GPL and Perl Artistic Licence'


the gm script

// internetlab-ajaxifier.js
// Copyright (c) 2009, Joachim Schiele
//
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.  To install it, you need
// Greasemonkey 0.3 or later: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To uninstall, go to Tools/Manage User Scripts,
// select "internetlab-ajaxifier", and click Uninstall.
//
// --------------------------------------------------------------------
//
// ==UserScript==
// @name          internetlab-ajaxifier
// @namespace     http://diveintomark.org/projects/greasemonkey/
// @description   ilab interactive answer ajax fix, thanks 5000 times to Olivier Cornu 
// @include       http://colmar.cs.uni-tuebingen.de/*
// @include       https://colmar.cs.uni-tuebingen.de/*
// @include       http://ilab.net.in.tum.de/*
// @include       https://ilab.net.in.tum.de/*

// ==/UserScript==

// http://www.elated.com/articles/javascript-accordion/
// http://diveintogreasemonkey.org/patterns/index.html
// http://wiki.greasespot.net/UnsafeWindow

// on css hacks
// http://www.webmasterworld.com/forum83/3922.htm

// Anonymous function wrapper
(function() {

//   'http://rick.measham.id.au/javascript/jif.js'
//   'http://localhost:8080/jif.js',
//   'http://localhost:8080/lab-injection.js'

var scripts = [
  'http://lastlog.de/misc/private/lab-script/lab-injection.js',
  'http://lastlog.de/misc/private/lab-script/jif.js'
];
for (i in scripts) {
    var script = document.createElement('script');
    script.src = scripts[i];
    document.getElementsByTagName('head')[0].appendChild(script);
}
 
/**
 * When the window is finished loading, attach the Shake-It on-click event.
 */
window.addEventListener('load', function(event) {
    // Grab a reference to the Effect object which was loaded by the scriptaculous library earlier.
    location.href = "javascript:void(init());";
}, 'false');
 
})(); // end anonymous function wrapper

links

Powered by MediaWiki