Using Tampermonkey to Customise a Website

This is a demonstration of the power of the Tampermonkey extension to Chrome.

My employer, Codurance, have a page on their website listing the current staff:

https://codurance.com/about-us/our-people/

Now it would be useful to know how many people we have listed.

If you were to visit that page, select inspect and type the following into the console of the browser:

$('div.g-max-width-800').length

This will return the count.

This is a start.

The next step is to make this more visible.

Install the Tampermonkey extension into Chrome.

This will add the following icon to your browser:

Tampermonkey icon

Visit the page you want to customise: https://codurance.com/about-us/our-people/

Press the tampermonkey icon

Select Create a new script

This will give you a script that looks like this:

// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://codurance.com/about-us/our-people/
// @grant none
// ==/UserScript==
(function() {
‘use strict’;
// Your code here...
})();

Now replace // Your code here… with:

$(‘div.u-heading-v2-3–bottom h2’).text( ‘The Team (‘ + $(‘div.g-max-width-800’).length + ‘)’ );

Save this and view the page.

This will when you revisit the page change the label to include a count of how many people we have.

This is a great way to make small changes to a website that you don’t control.

If you want to allow other people to use an updateable script then you can publish the script on a public url and use the settings tab to record where it comes from.

This technique is great for customising third party websites that don’t quite do what you want them to. You can even add javascript dependencies into the page if you want to use them.

This results in this (numbers will vary):

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s