CodeProject Beautifier extension for Chrome

Introduction

Chrome extension to hide ads, rename 'Community' and 'The Weird And The Wonderful' links.

Using the code

To install the extension in Chrome, first copy the code and save it as CodeProjectBeautifier.user.js

You then have two methods by which the extension may be installed. You can:

1. Drag and drop the file onto the main content window of Chrome. 
2. Browse the containing folder then click CodeProjectBeautifier.user.js

In each case, you must accept the security warning to proceed. 

UPDATE [29/08/2012]  

A recent update to Google Chrome has narrowed the ways by which an extension is installed in a bid to filter malicious extensions from the marketplace. This update now makes it impossible to install an extension from a website other than google's own.

However, we can still install extensions that exist on the local machine. 

To install this extension, you must now drag-n-drop it onto the Extensions page - chrome://chrome/extensions/ 

Dropping this file anywhere else will do nothing! 

Extension Code  

// ==UserScript==
// @name           CodeProject Beautifier
// @description    Hides CodeProject Ads, Changes Link Text
// @author         enhzflep
// @match           http://www.codeproject.com/*
// ==/UserScript==

// short-hand function - use byId instead of document.getElementById
function byId(e) {return document.getElementById(e);}

// Hide Messages notification
// -------------------------------
// id of <span> tags to hide: 
//        ctl00_ctl00_MemberMenu_Messages_NotificationDiv 
//        ctl00_MemberMenu_Messages_NotificationDiv
// it seems the ID of the span changes from page to page.
// These are the only 2 variants I've seen so far.
function hideNotifications()
{
    var spelling1 = byId('ctl00_ctl00_MemberMenu_Messages_NotificationDiv');
    var spelling2 = byId('ctl00_MemberMenu_Messages_NotificationDiv');
    
    if (spelling1)
        spelling1.style.visibility = 'hidden';
    else if (spelling2)
        spelling2.style.visibility = 'hidden';
}

// hides all elements with an class of lqm_ad - these are the containers used to hold ads 
function hideAds()
{
    var tgtDivList = document.getElementsByClassName('lqm_ad');
    var j = tgtDivList.length;
    for (i=0; i<j; i++)
        tgtDivList[i].style.visibility = 'hidden';
}

// searches the text of all links on the page
//  if a match is found in the searchArray, it's replaced with the element in the
//  replaceArray with the same index.
function replaceLinkText(searchArray, replaceArray)
{
    var linkNodes = document.getElementsByTagName('a');
    var numNodes, i, curNode, curText;

    linkCount = 0;
    numNodes = linkNodes.length;

    for (i=0; i<numNodes; i++)
    {
        curNode = linkNodes[i];
        if (curNode.childNodes.length != 0)
        {
            y = curNode.childNodes[0];
            curText = y.nodeValue;
            
            for (var sI=0, sL=searchArray.length; sI<sL; sI++)
                if (curText == searchArray[sI])
                {
                    y.nodeValue = replaceArray[sI];
                    linkCount++;
                }
        }
    }
}

// extensions main function
function main()
{
    var searchArray = ["The Weird and The Wonderful", 
          "The Weird & The Wonderful", "Community"];
    var replaceArray = ["Code Horrors", "Code Horrors", "The Lounge"];

    hideNotifications();
    hideAds();
    replaceLinkText(searchArray, replaceArray);
}

//extension entry-point
main(); 

Points of Interest

I discovered that not only do browsers supports user style-sheets, but that Chrome also supports user-javascript. 

With the addition of the GreaseMonkey plugin, FireFox users can also take advantage of user-javascript.

History  

• First release - 30 July 2012.
• Updated - 29 Aug 2012.