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';
}

// See update to article below
// 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(); 

UPDATE [11th April 2014]

Following changes made some time ago to CodeProject, the add-blocking feature ceased to function. After finding some time and inclination tonight, I discovered that the <iframe> elements used to contain the ads were loaded some time after the page had loaded. They also no longer contained a class-name of lqm_ad, instead containing the text 'dmad' as a part of their id. This meant there was nothing to find just after the page loaded (and even if the content was there, we would no longer target it). Consequently, I've modified the hideAds function. It now adds an event listener to the window object, watching for all modifications to the DOM tree. In the body of that handler we can again check for the presence of anything distracting and unwanted.

You should now use the following code as a replacement/supplement to the hideAds function.

function hideAds()
{
    onDomChanged();
    window.addEventListener('DOMSubtreeModified', onDomChanged, false);
}

function onDomChanged(e)
{
    var iframes = document.getElementsByTagName('iframe');
    var i, n = iframes.length;
    for (i=0; i<n; i++)
    {
        if (iframes[i].id.indexOf('dmad') != -1)
        {
            var parentNode = iframes[i].parentNode;
            parentNode.removeChild(iframes[i]);
        }
    }
}

Points of Interest

I discovered that not only do browsers support 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
• Updated - 11 April 2014