How to use Greasemonkey to make your life easier

Motivation

Sometimes you encounter websites which seem to have time traveled from 1999. No responsive UI, no widgets, just plain html input fields and selects.

Time to improve these sites 🙂

Greasemonkey overview

Greasemonkey is a browser plugin which lets you inject client-side JavaScript into the webpage just as the developer could have intended to do.

GM for firefox

If you use Google Chrome you can use the Tampermonkey extension.

Now you can manipulate the DOM to make the page look more appealing and function better.

 

Hello World Greasemonkey

Let’s start with a simple script:

// ==UserScript==
// @name hello_greasemonkey
// @namespace https://creatronix.de
// @description prints "Hello Greasemonkey" to the console
// @include https://creatronix.de*
// @version 1
// ==/UserScript== 
console.log("Hello Greasemonkey");

This script does nothing more than printing a string to the console

Ctrl + Shift + J opens the Browser console in Firefox.

Hint: If you don’t see the console output you have to activate “Show Content messages” in the gear menu of the browser console.

The @include statement ties the script to a specific URL. The wildcard * can be used to indicate all sub-URLs shall be included as well.

But wait – there is more:

Add jQuery UI Datepicker

I’ve had a page where the date input where just plain input fields.

With the following script I’ve added a nice date picker widget.

For that purpose you can use jQuery and jQuery UI.

With the @require you can use a CDN to import the needed libraries.

 

// ==UserScript==
// @name add_calendar_widget
// @namespace creatronix
// @description adds an jQuery-UI calendar to date fields
// @include <the_site_to_insert_the_script>
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @require https://code.jquery.com/ui/1.13.1/jquery-ui.min.js
// @version 1

// ==/UserScript==

$(document).ready(function(){
  console.log("script works");
  $( 'input[name="from"]' ).datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' });
  $( 'input[name="until"]' ).datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' });
  $("#ui-datepicker-div").css({'background-color':'white'});
}