David's blog: Greasemonkey

Thursday, May 2nd, 2013

Annoying popups on NationalMemo.com

A friend posted a link to an article on NationalMemo.com. I went ahead and clicked the link because I was interested in the article, even though I absolutely hate NationalMemo.com’s website.

If you go to NationalMemo.com, you’ll encounter one of their annoying popups (click to embiggen) Why do I hate NationalMemo.com? Because of their stupid popups.

I might be more inclined to sign one of National Memo’s petitions if there were a link to it in a box next to the article, but by completely obscuring the web page, I am not only disinclined to sign their petition but I’m also disinclined to even visit their poorly thought out website at all.

And I’m not the only person who thinks this.

If you’re not a web developer, or if you think National Memo’s just not worth the bother, the solution is just that—no longer clicking on links going to NationalMemo.com.

However, tools are available to make NationalMemo.com stop its rude behavior, and doing so really doesn’t take long.

What do you need? Greasemonkey, an add-on for Mozilla Firefox that allows you to add your own bits of JavaScript to any web page you visit, in order to change its appearance or behavior.

If you use Google Chrome, you can try TamperMonkey; it’s supposed to be Greasemonkey UserScript-compatible, but I’ve not tried it myself. If you use Microsoft IE, you can try IE7Pro, but why are you using IE? (Yes, my NationalMemo.com screenshot was done with IE, but that’s because I have Adblock Plus (Firefox) / Adblock Plus (Chrome) installed in the browsers I regularly use, and so the popup National Memo tries to force on me is just blank in those browsers.)

Then you just need to create a quick UserScript for NationalMemo.com. Looking at the source of a NationalMemo.com page, you can see that they have a JavaScript function named lbx_show_lightbox_custom() that displays their popup (which they call a “lightbox”). With the power of Greasemonkey, we can replace NationalMemo.com’s lbx_show_lightbox_custom() function and no longer see their stupid popup.

To figure out how to do this, I googled around some for replacing javascript using Greasemonkey, and I found this very helpful page by Squak Mountain Consulting that explained how to do exactly what I wanted.

Using Squak’s example, I came up with the following UserScript:

// ==UserScript==
// @name DisableNationalMemo_lightbox
// @namespace http://www.davidlauri.com/
// @description Turn off the annoying lightbox that National Memo displays
// @include http://www.nationalmemo.com/*
// @version 1
// ==/UserScript==

// set up the javascript function we want to replace
var scriptCode = new Array();
scriptCode.push('function lbx_show_lightbox_custom(){');
scriptCode.push(' return false;');
scriptCode.push('}');

// put the script in a new script element into the DOM
var script = document.createElement('script'); // create the script element
script.innerHTML = scriptCode.join('\n'); // add the script code to it
scriptCode.length = 0; // recover the memory we used to build the script

// find the first <head> tag on the page and then add the new script just below it
document.getElementsByTagName('head')[0].appendChild(script);

A hint for testing this script on NationalMemo.com is that you should find and delete your NationalMemo.com cookies. They only do their stupid popup once (per day? per week? I don’t know), so if you visit their site first and then set up the UserScript, you won’t actually know if it’s their site deciding that you’ve already seen their stupid popup or if it’s your UserScript disabling their lightbox function.

Was it really worth the time it took to deal with NationalMemo.com’s stupid popup? Probably not, but I had fun finding a solution.

Wednesday, May 23rd, 2012

How to improve a government ~~form~~ website (part 5)

The Greene County Recorder website (click to embiggen) is a marvel of intriguing web design Today’s government form that can be improved (see earlier improvable government forms) is actually not a form but rather a website, specifically the Greene County Recorder website, a site so rife with intriguing design choices that one might hardly know where to begin.

The document search page on the Greene County Recorder website, before and after
a tweak with Greasemonkey:

Before (with grey labels):

(click to embiggen)

After (with bold green ones):

(click to embiggen)

However, I do know where to begin, namely with the Document Search page. A co-worker came to me because he had a hard time seeing some of the result page’s labels, specifically those that are in light grey on a white background. This intriguing design choice isn’t just a matter of taste; it’s really rather difficult to read light grey on white.

Luckily the Interwebs offer us the ability to override web designers’s choices which we find “intriguing” (or with which we simply disagree). The tool that comes to mind for this job is Greasemonkey, an add-on originally for Firefox that allows web surfers to install or write scripts that change the look or behavior of a web page. Do you prefer Google Chrome? Greasemonkey user scripts are supported directly in Chrome. (Do you prefer IE? Why?! If you insist you can try this.)

You can find lots of Greasemonkey user scripts already written for popular websites, but I didn’t bother trying to find one for the Greene County Recorder website because, already having extensive experience with Javascript and CSS, I have no trouble rolling my own Greasemonkey scripts. This blog post is not intended to cover that topic fully (Google is your friend if you want to learn how) but rather is just to report on what I did about the Greene County Recorder website’s stupid choice of grey text on white.

An easy option for using Greasemonkey to change a web page’s appearance is to inject some custom CSS that overrides how certain elements appear. Luckily one smart thing the Greene County Recorder’s web designer did was to enclose each of the offensive grey labels in a SPAN tag tied to a particular CSS class: <span class="style1">. So all we have to do is change the CSS applied to the “style1” class. (Actually after I first tested this, I realized there was also one DIV with the “style1” class.)

So here’s a user script that changes all the style1 class SPANs and DIVs from light grey to bold and green (honoring the Greene County Recorder’s web designer’s overall choice of colors):

// ==UserScript==
// @name Fix grey labels on Greene County Recorder website
// @namespace http://www.davidlauri.com
// @description Change formatting of style1 class SPANs on Greene County Recorder website
// @include https://www.co.greene.oh.us/recorders/*
// @include https://co.greene.oh.us/recorders/*
// ==/UserScript==

(function () {
//EDIT ME

var newstyle = "span.style1, div.style1 { color: #006400 ! important; font-weight: 900 ! important; font-size: 105% ! important; } ";

//END EDIT ME

var ss = document.createElement("style");
var t = document.createTextNode(newstyle);

var root = (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]);
ss.appendChild(t);
root.appendChild(ss);
})();

If you too use the Greene County Recorder website and dislike their grey labels, you can install this Greasemonkey user script on your computer. If you”d prefer the grey labels be some color other than green or formatted in some other way, you can copy the script above and modify the line between the lines that say “EDIT ME” and “END EDIT ME.”