Wednesday, November 3, 2010

Monkey see, GreaseMonkey do!


GreaseMonkey has been around for quite a while, but it is not known as much as it should! Originally, it started as a browser extension for Firefox but the userscripts are now natively supported in Chrome.

In this video tutorial, I will talk about:
  • What GreaseMonkey is
  • How I used it
  • Fews tips regarding the development of userscript


The userscript I use as example is available here: http://userscripts.org/scripts/show/87653. userscript.org hosts about 60,000 userscripts as I am writing this! You can search the best rated or the most downloaded userscripts. The nature of the scripts that are available on this website is very diverse. It ranges from providing cheats on popular Facebook games to enhancing the look of your everyday news website.

13 comments:

Anonymous said...

this guys accents is so funny :P

php101 said...

That was... Almost helpful. I need to wrap my brain around that. Maybe another watch-through.
Thank you!

Matthias Büchner said...

In the video, I explain how to embed an image into the JavaScript code. You basically have to encode the image in base64.

At the time I wrote this blog post, I used an online server (http://www.greywyvern.com/code/php/binary2base64) offering to upload an image and it will return its base64 encoding.

I just found out my buddy Matthew developed an open source client side tool that does the same thing and even more. Check it out: http://code.google.com/p/image2css/

bill said...

A /wonderful/ introduction to GreaseMonkey!

I have a better appreciation for its power and for how it would tackle big issues.

Thanks!

Anonymous said...

Thank you for the well structured intro to Greasemonkey :)

vads said...

Nice tutorial to start with Grease monkey!!!!!

Anonymous said...

erm, what extension did you say you use?

Matthias Büchner said...

@Anonymous
With Firefox, you need to install the extension called GreaseMonkey. Chrome supports that natively.

Anonymous said...

Opera also supports Greasemonkey natively. (called UserScripts)

Anonymous said...

Thank you for this great video!
I think the extension that you are being asked is Firebug: www.getfirebug.com
With Firebug you can see the page code and visualize things in it.
Cheers!

gaston.

Chrisomamo said...
This comment has been removed by the author.
Chrisomamo said...

Matthias Büchner you are cool. Good Video up there. But Iam just a day old in Scripting. May be down the lane in a few weeks i might understand the codes better. But the video made me understand the power of scripting in general and the Monkey in particular

Anonymous said...

Great intro tutorial--thank you!