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:
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):
Developer Rants 