Practice English Speaking&Listening with: GreaseMonkey userscript development video tutorial

Difficulty: 0

Hey! I am here to talk about GreaseMonkey!

In this 5 minutes video, we will see:

what is GreaseMonkey,

an example of how I used it on an existing website,

and the basics about userscript development.

Hopefully, it will help you to develop your first userscript.

What is GreaseMonkey?

GreaseMonkey allows the modification of a web page on-the-fly with a JavaScript.

This is a great tool to add features to a web site, or modify it, when you have no control on it.

When the page is loaded, the GreaseMonkey script, or userscript, is executed an alter the rendered page.

Lets take as example a userscript I developed.

Here is a website I do not own, but that I use regularly.

It is the website of my boat club.

To reserve a boat, I need to go through this calendar,

one time for the boats available in the morning,

and one time for the boats available in the afternoon.

This is pretty cumbersome, and it can be very time consuming to find the boat I want.

So I decided to write a userscript to improve the site.

I would like to add a link here.

And when I click on it, display the list of boats available.

So here is the userscript I wrote.

I can take it and drag and drop it in the browser.

Here it is Chrome.

I install it.

I can see it has been installed.

And the next time I browse the website,

the page will be modified.

Lets login.

I can see the new link added by the script.

When I click on it, I see a table with the list of boats available.

Here are the days of the week and the list of the boats,

a boat available in the afternoon, and the morning.

I can also click on the button next week

and see what boats are available in the next week.

Lets now look at the userscript.

It is basically a standard JavaScript file with the extension .user.js.

Lets edit it.

We see it starts with a header.

And there is a tag UserScript.

There are some attributes.

@name is the name of the userscript.

@description is the description as it appears during the installation.

@include is very important as it defines in which pages the script is executed.

* means on every pages of the website.

You can also define @copyright, @version and @license.

Then we see the constants that are used in the userscript.

And all the function that are called.

And finally the first function call, this is the entrypoint of the userscript.

So lets look at this first function.

On the first line here, I find the DOM element in which I will insert the new link.

Here I create the link.

And here I insert it.

Lets see how I found in which element I want to insert the link.

To do that, I use Firebug.

It is an extension for Firefox.

And I inspect the links of the menu.

I realized they all use the same class name.

So I will use this class name to find these elements.

I will find the 3rd element, and find its parent.

This is where I will insert the link.

Lets see the corresponding code.

I get the element for the class menu_item, take the 3rd item, and get the parent.

Now I would like to show you how to setup an onclick event on an element.

I use addEventListener with the parameters click and the function to be called.

You need to use that instead of setting directly onclick because it is not working with GreaseMonkey.

Here is the request.

This is the data sent to the server.

And this is the server response.

Basically it is some HTML code, this code is used to display the list here.

Now that I captured the HTTP request to retrieve the list of available boats,

I can build one dynamically and sent it from my userscript using AJAX.

There is something particular about GreaseMonkey here that I would like to point out.

This is the way you need to send the parameter onreadystatechange.

In a regular JavaScript, you could just reference the function to be called.

But GreaseMonkey anonymizes all the functions in the userscript.

This is made to avoid name collision with the functions in the original page.

In the JavaScript context visible by the page, the function requestCallback wont be not visible.

This is why you need to set this parameter as I did here:

defining a reference to an anonymous function.

The page added by my userscript is using 2 images.

As I didnt want to depend on an external website,

I embedded them directly in my JavaScript.

To do that, in your image tag, you can set the src attribute to the base 64 conversion of your image.

There are many website on the Internet that can help you to do this conversion.

If you are constantly annoyed by a poorly designed website,

you will now have the opportunity to try GreaseMonkey and fix it!

The Description of GreaseMonkey userscript development video tutorial