Thursday, November 4, 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.

18 comments:

Anonymous said...

this guys accents is so funny :P

Anonymous said...

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

Matt Buchner 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?

Matt Buchner 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!

iTouch, iPad and iPhone for learning said...

Excellent intro on the power of GreaseMonkey.
Thanks

Anonymous said...

-Hello sir, nice tutorial. But as you know, the userscripts.org is gone forever. Can you setup a link with your script, for learning purposes?

Thanks

Anonymous said...

please update the video. none is using Flash any more

Unknown said...

Ironically, despite no video showing up due to the outdated page, I was able to use Javascript to find the link to the youtube video https://www.youtube.com/watch?v=hAeWOOJPp0o ;)

Anonymous said...

What do I have to do to make Greasemonkey work with the DIO-TOOLS-David1327, (4.33) in Firefox 53.0? Please help me, I can never update Firefox again and Camp Firefox won't help me!