UserScript Writing 101

Written by Avindra V.G. — Last update Jan 9, 2013

22 points

Intro for the Slow


If you're not a moron, skip this section.
As you can see, people in the comments are pretty angry about this guide, because they couldn't figure out what I was getting at. (Briefly read those comments, and my response). As I've responded, this is NOT a one-page resource. This is a succinct, easy to follow article on HOW and WHERE to learn about writing userscripts, especially if you (like me) hated "Dive Into Greasemonkey" as a supposedly "one-page" resource. I am not going to re-write what has already been written. I WILL tell you where to find what has been written. Go die in a fire if you have a problem with that.

"GUIDE" != "TUTORIAL". Jeez.

A Short Piece about me/this


I've been a Greasemonkey for about a year now: meaning that this is quite easy to learn. I wrote this because learning Greasemonkey entails things other than the bullshit located at Dive Into Greasemonkey. Honestly, that site isn't helpful at all. Miserable, really. Read on.

Introduction

So you want to learn Greasemonkey? Excellent! This short guide (should) help you to be well on your way to being a scriptwriter. Just because I've sectioned off parts doesn't mean you should skip; read everything (it isn't that much)!

Background

What is Greasemonkey? Greasemonkey is an add-on for Mozilla Firefox. In short, it uses JavaScript to enhance or change the way you interact with the web. This, of course, means A LOT of things are possible.

What Can't Greasemonkey Do?


Greasemonkey is used for many incredibly complex things. At userscripts.org, we've seen scripts that have solved captcha's, interact with and hack Adobe Flash objects, as well as implement basic high score list exploitation.

But people often mistake Greasemonkey as THE answer to all your dirty hacking fantasies. It is not. For example, frequent requests are made for viewing private MySpace and Facebook profiles. Though this is possible, Greasemonkey doesn't make it ANY easier.

Technical Background

Greasemonkey uses interpreted JavaScript, not to be confused with Sun Microsystem's inferior compiled bytecode language, Java. Therefore, you will not need the JDK or Java Runtime Files for ANY reason whatsoever.

JavaScript is used mainly for maintaining HTML structures by a convention known as Document Object Model (DOM). Wikipedia has a wonderful SVG graphic representing the hierarchy of objects in the DOM.

A bit about standards: all these browsers, all these plugins, and all these different ways to interact with the web. How does it all come together? Web standards (HTTP, HTML, CSS, XML, XPath, SVG, etc.) are maintained by the W3C (World Wide Web Consortium). Although you (or browser developers) aren't required to implement them per se, their conventions are extremely well organized, well thought and agreed upon by many, so if you need to understand it all better, check out their recommendations and drafts for new web technologies.

About JavaScript

JavaScript is probably the sexiest language ever. It is inherently free-form and therefore, awesome. You'll find that it's a lot of fun, and, if you use it long enough, useful outside the realm of web development and Greasemonkey scripting.

As I mentioned in the "Technical Background" section, JavaScript is used for maintaining HTML pages. This will clue you in on the next section, "The Order of Things to Learn". Greasemonkey is sort of like JavaScript on steroids though. It has more "powers". You'll learn about these extra powers as well.

The Order of Things to Learn

Look to the "Resources" section for places to learn about these.
  1. HTML. Hypertext Markup Language. Not the same "language" as JavaScript. This is a markup language, meaning it's a bunch of text that is meant to represent some type of structure, in this case, a web page.
  2. XML. Extensible Markup Language. In case you didn't realize, HTML itself is a type of "XML". Learning XML is important because many popular websites (YouTube, Facebook, Last.fm) use XML to interact with data. Since you already know HTML by this point, understanding XML should be cake.
  3. CSS. Cascading Style Sheets. This is the way HTML (should be) stylized. You'll want to learn this.
  4. JavaScript. Learn all the basics: data types, functions, JavaScript's native functions like prompt, alert, etc.
  5. The Greasemonkey Extras. Like I said, Greasmonkey == JavaScript, with a lot of extras. A specific page listing the API's can be found here.

Final


That's it. If you have any questions or suggestions concerning the guide, leave a comment here, or send me an email (aavindraa@gmail.com).

Resources

Google. This is your number one resource. In case you haven't noticed yet, you can google most of your questions and come across the answer quickly. Learn it, live it, love it.
W3Schools, home of many easy to understand, incredibly useful tutorials.
Mozilla Developer Center (MDC). Here, you can find a lot of API information about Firefox, as well as it's implementation of JavaScript and it's features.
Greasespot, a wiki for learning all about what Greasemonkey has to offer.
W3C. The central source for web standards.
Of course, this site. Search the forums, look at other scripts on here for inspiration.