*OK, jQuery is fine too.
There are two obstacles we have to overcome to use PrototypeJS in a Greasemonkey script
- Prototype has to be included on the page the script is running on, not within the Greasemonkey script. Otherwise Prototype won't actually be able to access any of the page elements
- You have to handle the case where a page is already including Prototype otherwise you end up including it twice and the whole thing dies.
- That's not quite it either.
- Check the page to see if it's already including Prototype (we'll also check for Scriptaculous while we're at it).
- If it's not included, add a new <script> element to the <head> of the page and set the src to Prototype
- Set up a handler for the window load event
- When the window loads, get handles to the Prototype functions we're interested in
Here's a complete script using the above strategy. This particular example only works for http://www.cnn.com. It does an Effect.Shake and puts a red border on each <img> tag on the page.
The problem is that Greasemonkey doesn't know about the PrototypeJS functions because they only exist inside the actual page.
The unsafeWindow lets us get a handle to the page copy of the the various PrototypeJS functions.