Project #2: Automating web forms with Greasemonkey

Project #2: Automating web forms with Greasemonkey

Requirements:

Get Greasemonkey here (Firefox)

Get Tampermonkey here (Chrome)

Download the completed script here

Greasemonkey (Firefox) or Tampermonkey (Chrome) are valuable tools when working with web apps or web-based systems. What they do is allow you to run your own javascript on certain web pages specified in the script. This means if you want to make a change to the interface of something web-based without going through whoever designed or hosts the system, you can. If that still seems unclear, here’s a concrete example: say you have to fill out a web-based form over and over again. Maybe it’s entering customer details on an internally hosted site, maybe you’re filling out search forms on someone else’s site to get the records you want. Either way, you have a web form you’re using over and over again, and you have to fill in some of the same exact options every time. Greasemonkey can do those parts for you.

This time, things will get very meta. We’ll use our test script on this page you’re currently reading.

Here is the completed script, and here’s the example form:

First name:
Last name:
Wrong Choice    Right Choice
I agree

Creating the script

Creating a Greasemonkey or Tampermonkey script is easiest through their interfaces, just click their icon in the browser:

Firefox’s Greasemonkey and Chrome’s Tampermonkey pictured above.

You’ll need to fill out name, namespace, and include (Tampermonkey defaults to @match instead of @include, but they’re almost identical and Tampermonkey supports both). Include is the address of the page you want the script to apply to, in this case :

The * is a wildcard so the script will still work if there are any extra parameters in the url after this it will still be used.

So for our script we want it to fill in first name and last name, change wrong choice to right choice, and tick I agree all as soon as we load this page.

So how do we change a page element with javascript? First we get the details of the element we want to change. Do this by right clicking it and selecting inspect element (Firefox and Chrome):

This shows us the element’s details:

The preferred method of interacting with a page element with javascript is through an elements ‘id’. Most well coded pages should have a unique id for each element you can use. We’ll go through another way after.

NB: To test the code, you can use the ‘console’ tab in the developer console (F12 or switch to it after inspecting an element)

Next we’ll be working with an element without an id, just a name. Sadly there is no getElementByName, possibly because name isn’t expected to be a unique identifier. Instead there is getElementsByName which returns an array of all elements with the name.

Next we have some radio buttons, without individual ids and both with the same name.

Note here we could make things much simpler since we know the order they appear on the page. radios[0] is the ‘wrong’ button and radios[1] is the ‘right’ button. This way is slightly safer if the page format were to change as we’re actually going by the value of the button. For a mistake to occur the buttons would have to be completely changed instead of reordered. One last line and we’re done:

Since forms use the ‘name’ attribute to identify what the ‘value’ they’re sending belongs to, in this case you should be able to deal with pretty much anything with document.getElementById() and document.getElementsByName()

Our finished script looks like this:

If you haven’t yet, you can download the script above via this link. Or copy the above code into the editors in greasemonkey/tampermonkey and save it yourself. Then visit this page via direct link and the script should run.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">