Writing a bookmarklet

A bookmarklet is a piece of javascript that you store as a bookmark. It’s a neat way of adding functionality to a web page that you don’t control. As part of my job, my team develops code in branches and after it has passed testing it needs to be ported to the trunk. Although we generate a branch report using CruiseControl which lists outstanding code ports, the page doesn’t have any totals on it. I’d like to be able just to view the totals of outstanding ports for my team. Although I could ask our build team to change how the page is generated, you can actually achieve this fairly simply using a bookmarklet. Here is the code I wrote:

javascript:(function(){
    /* count the occurences of each person */
    /* the branch report is in a pre formatted tag */
    var reportInfo = document.getElementsByTagName("pre");
    var textContent = reportInfo[0].innerHTML;
    var names = ["jsmith","jbloggs","tblair","gbrown"];
    var results = "";
    /* count the occurences of a name by splitting */
    /* the string on it and subtracting one from the total */
    for (var i=0; i<names.length; i++) {
        var count = textContent.split(names[i] + "@").length;
        if (count &gt; 0) {
            count = count - 1;
        }
        results = results + names[i] + ": " + count + "<br&gt;";
    }
    /* create a div to display the results */
    var s=document.createElement('div');
    s.innerHTML=results;
    s.style.color='black';
    s.style.padding='20px';
    s.style.position='fixed';
    s.style.zIndex='9999';
    s.style.fontSize='1.0em';
    s.style.border='2px solid black';
    s.style.right='40px';
    s.style.top='40px';
    s.style.background='white';
    document.body.appendChild(s);
})();

You can see that it is pretty easy to count the occurrences of the developer names by using the trick of splitting a string on the name and then subtracting one from the length of the resulting array. After that you just create a new div on the page to display the results.