Greasemonkey Script and Function Scope

Question

Here is my script code:

    // ==UserScript==
    // @name          test 
    // @description   test
    // @include       http://*
    // @copyright     Bruno Tyndall
    // ==/UserScript==

    var main = function() {
        var b = document.getElementsByTagName('body')[0];
        var t = document.createElement('div');
        t.innerHTML = '<a href="javascript:void(0);" style="color:white;">Hello World</a>';
        t.style.position = 'absolute';
        t.style.zIndex = 1000;
        t.style.bottom = '5px';
        t.style.right = '5px';
        t.firstChild.setAttribute('onclick', 'test();');
        b.appendChild(t);

    }

    var test = function() {
        alert("Hello World");
    }
    main();

The only issue I have is when Hello World is clicked the page cannot find the test() function. Please tell me I don't have to solve it by innerHTML'ing the function onto the page like this. Is there another way?

Thanks.

Answer 1

Try adding the function test to the window object

window.test = function ...

Edit

Also, it's a good idea to run your code from a 'load' event handler instead of just by calling it at the end of your scripts. e.g.:

window.addEventListener("load", function(e) {
 // Your main() here
}, false);

Answer 2

iirc, greasemonkey runs within it's own scope, so test will not be in the global namespace.

Instead of poluting the global though, why not create your anchor element through DOM manipulation? That will return you a refernece which you can bind an anonymous function (or the greasemonkey scoped test).

Answer 3

Greasemonkey executes the script in a sandbox - the page doesn't have access to it for security reasons. All acceses to dom and window are via wrappers.

If you want to access the unsecured objects you can use wrappedJSObject property.

For your case you can use unsafeWindow (or window.wrappedJSObject):

unsafeWindow.test = function() { ....

There are some security issues with this, see: http://wiki.greasespot.net/UnsafeWindow

Also, greasemonkey executes the script after the DOMContentLoaded (when the dom is ready) event so you don't need that onload nonsense.

Also, you can't use attributes to set event listeners, or properties for that matter - you must use dom api for that. Eg:

t.firstChild.addEventListener('click', test, false);

or:

t.firstChild.addEventListener('click', function(event){ blabla }, false);