Our first user script simply displays an alert saying “Hello world!” when it is executed.
![[link]](https://diveintogreasemonkey.org/images/permalink.gif "link to this example"){kind=small}
Example: Display the “Hello world!” alert
|
1 |
<span style="color: #0000ff;">alert</span>(<span style="color: #880000;">'Hello world!'</span>); |
Although this code looks obvious enough, and does exactly what you would expect, Greasemonkey is actually doing a number of things behind the scenes to ensure that user scripts do not interact badly with other scripts defined by the original page. Specifically, it automatically wraps your user script in an anonymous function wrapper. Ordinarily you can ignore this, but it will eventually creep up and bite you in the ass, so you may as well learn about it now.
One of the most common ways this can bite you is that variables and functions that you define in a user script are not available to other scripts. In fact, they are not available at all once the user script has finished running. This means that you will run into problems if you are expecting to be able to call your own functions later by using the window.setTimeout function, or by setting string-based onclick attributes on links and expecting Javascript to evaluate your function names later.
For example, this user script defines a function helloworld, then attempts to set a timer to call it one second later.
Example: Bad way to delay calling a function
|
1 2 3 4 |
<span style="color: #0000ff;">function</span> helloworld() { <span style="color: #0000ff;">alert</span>(<span style="color: #880000;">'Hello world!'</span>); } <span style="color: #00aa00;">window</span>.<span style="color: #00aa00;">setTimeout</span>(<span style="color: #880000;">"helloworld()"</span>, <span style="color: #880000;">60</span>); |
This will not work; no alert will be displayed. If you open JavaScript Console, you will see an exception displayed: Error: helloworld is not defined. This is because, by the time the timeout expires and the call to helloworld() is evaluated, the helloworld function no longer exists.
If you need to reference your user script's variables or functions later, you will need to explicitly define them as properties of the window object, which is always available.
Example: Better way to delay calling a function
|
1 2 3 4 |
<span style="color: #00aa00;">window</span>.helloworld = <span style="color: #0000ff;">function</span>() { <span style="color: #0000ff;">alert</span>(<span style="color: #880000;">'Hello world!'</span>); } <span style="color: #00aa00;">window</span>.<span style="color: #00aa00;">setTimeout</span>(<span style="color: #880000;">"helloworld()"</span>, <span style="color: #880000;">60</span>); |
This works as expected: one second after the page loads, an alert pops up proudly displaying “Hello world!”
However, setting properties on window is still not ideal; it's a bit like using a global variable when a local one will do. (Actually, it's exactly like that, since window is global and available to all scripts on the page.) More practically, you could end up interfering with other scripts that were defined on the page, or even other user scripts.
The best solution is to define an anonymous function yourself and pass it as the first argument to window.setTimeout.
Example: Best way to delay calling a function
|
1 |
<span style="color: #00aa00;">window</span>.<span style="color: #00aa00;">setTimeout</span>(<span style="color: #0000ff;">function</span>() { <span style="color: #0000ff;">alert</span>(<span style="color: #880000;">'Hello world!'</span>) }, <span style="color: #880000;">60</span>); |
What I'm doing here is creating a function without a name (an “anonymous function”), then immediately passing the function itself to
window.setTimeout. This accomplishes the same thing as the previous example, but it leaves no trace, i.e. it's undetectable to other scripts.I find that I use anonymous functions regularly while writing user scripts. They are ideal for creating “one-off” functions and passing them as arguments to things like
window.setTimeout, document.addEventListener, or assigning to event handlers like click or submit.