Home »

Re-writing the web (one page at a time...)

3. December 2008 by james 0 Comments

Grease Monkey is a browser plugin that's been around for a long time (2005) which allows you to run scripts against a page and alter the content on the fly.  Scripts are configured individually as to which URLs (either partial or full) they run against and can be turned or off at will.  There are lots of scripts that have been provided over the years which do everything from fixing rendering bugs on common pages to enhancing Google results with search results from other sources.

Although it's always been something I've meant to get round to trying it's never quite made the top of the list until I wanted to add an enhancement to the credit card recent transactions page at Egg Bank.  The current page has three columns giving the date of the transaction, a description and the amount as shown below:

Original three column layout

What I wanted was an additional column which shows the rolling balance against each transaction.  The idea was to easily see the effect of a credit transaction amongst lots of debits to make sure I paid the balance off and didn't get charged interest.

The first step was to install Grease Monkey which was dead easy and then it was just a matter of writing a user script to work against the card transactions page.  It took about an half hour to get something working which I was happy with and gave the result I wanted:

 Layout with added balance column

The beauty is that once Grease Monkey is enabled, the page is automatically altered with no user intervention so it effectively permanently enhances the page.  The script to achieve the above is:

// ==UserScript==
// @name           EggCardBalance
// @namespace      http://infoonthego/egg
// @description    Adds a balance column to Egg Card/Egg Money recent transactions
// @include        https://your.egg.com/customer/eggmoney/recenttransactions.aspx
// @include        https://your.egg.com/customer/eggcard/recenttransactions.aspx
// ==/UserScript==
(function () {
  var EggBalance = {
    getCurrentBalance: function() {
      var balanceElement = document.evaluate("//tfoot/tr/td[@class='money']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
      var balanceString = balanceElement.innerHTML;
      balanceString = balanceString.substring(1);
      balanceString = balanceString.substring(0,balanceString.length-3);            
      return balanceString;    
    },
    addColumn: function() {
      var amountElement = document.evaluate("//thead/tr/th[@class='amount']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
      if (amountElement) {
        var balanceElement = document.createElement('th');
        balanceElement.innerHTML="balance";
        balanceElement.setAttribute("class","money");
        amountElement.parentNode.insertBefore(balanceElement,amountElement.nextSibling);      
      }        
    },
    addBalanceCells: function() {
      var balance = parseFloat(EggBalance.getCurrentBalance());
      var rowElements = document.evaluate("//table[@class='grid']/tbody/tr", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
      var amountElements = document.evaluate("//table[@class='grid']/tbody/tr/td[@class='money']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);    
      for (var i = amountElements.snapshotLength-1; i >= 0 ; i--) {
        var amountElement = amountElements.snapshotItem(i);        
        var amount = parseFloat(amountElement.innerHTML.substring(1));
        
        var balanceElement = document.createElement('td');
              
        balanceElement.setAttribute("class","money");
        balanceElement.innerHTML="£"+Math.round(balance*Math.pow(10,2))/Math.pow(10,2).toString();
        if (balanceElement.innerHTML.indexOf(".")==-1) {
          balanceElement.innerHTML = balanceElement.innerHTML+".00";        
        } else if (balanceElement.innerHTML.indexOf(".")==balanceElement.innerHTML.length-2) {
          balanceElement.innerHTML = balanceElement.innerHTML+"0";
        }      
        amountElement.parentNode.appendChild(balanceElement);
        balance = balance - amount;
      }  
    }
  }
  GM_log('Running Egg balance GreaseMonkey script');
  EggBalance.addColumn();
  EggBalance.addBalanceCells();;
})();

 

I've never really been much of a front-end/javascript type developer so I'm sure there are plenty of holes to be picked with the code but it does the job if you want to try the same thing.

Technorati Tags: ,

You'll notice that the source listing above isn't very copy/paste friendly and I've done that for one very good reason...

warning-general-2 You should never, ever, execute some arbitrary script against pages without fully trusting and understanding what it does and that goes in triplicate for logged in online banking sessions.  You couldn't ask for anything much more dangerous. 

That said, the source is there for you to enter and should still mean you get an understanding for what it does.  I'm not providing a downloadable file because people will install it without thinking which I will not be responsible for.  If you want to try the script on IE then there is a Grease Monkey IE plugin but I've not tested the script for compatibility so I couldn't say whether it works.

It does lead me on to my next thought though which is that if it is pretty easy to do this then how about taking it to the next level and mashing up some of the good stuff that the personal finance sites do directly on to your bank page.  In particular I'm thinking of the Wesabe API to pull in friendly transaction names etc.  A sort of mountain and Muhammad scenario.

If I get chance to take a look then I'll post the results.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Comments