Prototype (et al) in Greasemonkey

So, using Prototype in Greasemonkey is... awkward, at best.

You see, everything you do in GM Javascript is actually stored in this weird space called "unsafeWindow". (Clearly, I don't fully understand why.)

It also seems to be impossible to intrude on the basic elements (like Element itself) that PType wishes to.

Thus, you have to be sneaky: you cause the page to load your scripts. ...And yet, for reasons incomprehensible, you still access them in unsafeWindow. Even when events fire. ...Which, by the way, seems to be the only way to do it: events firing. You can't just natively "do stuff".

Disappointing... but work-around-able.

I think we can use this to help us Monkify some of our websites. My first target is Learnerweb, which is Usable But Obnoxious as-is.

Here's a script that causes a new <p> to appear on the cspabq page when you click pretty much anywhere under the header:

// ==UserScript==
// @name           Monkeys.  Greasy, greasy monkeys.
// @namespace      CSP
// @description    Testing Prototype and ilk in GM
// @include        http://www.cspabq.org*
// ==/UserScript==

var scripts = [
    'http://wiki.script.aculo.us/javascripts/prototype.js',
    'http://wiki.script.aculo.us/javascripts/effects.js',
    'http://wiki.script.aculo.us/javascripts/controls.js'
];
for (i in scripts) {
    var script = document.createElement('script');
    script.src = scripts[i];
    document.getElementsByTagName('head')[0].appendChild(script);
}

window.addEventListener('load', function(event) {
 
    $ = unsafeWindow['window'].$;
    div = document.getElementById('content-main');
    div.addEventListener('click', function(event) {
        x = document.createElement('p');
        x.innerHTML = "It is very greasy.  You are likely to be eaten by a monkey.";
        $('content-main').appendChild(x);
    }, 'false');
 
}, 'false');