This article was written in 2015. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Add content to a browser error page

The network connection at my job sometimes doesn’t work. There seems to be some sort of conflict between some wifi access points and my computer specifically. The problem is that this doesn’t occur all the time. As you might understand, it doesn’t occur when the network support crew calls you back to further investigate the issue. So we agreed that I will call him back next time it happens.

But where do I store his number? I could add it to my address book, but do I remember his name next week? There must be a smarter way that immediately shows his number when there’s no internet connection. I though about creating an OSX notification, but I don’t like those.

When there’s no internet connection your browser shows you a generic error page. This seems like the perfect place to show the telephone number. But where is that page? How do you alter the content? I couldn’t really find it, so I tried a different approach that works. I used user style sheets.

Browsers used to have this wonderful obscure option to use user style sheets. A style sheet that lets you override styles for specific websites. Very handy to make fonts bigger for instance, or to enhance contrast on badly designed sites. Nowadays you need a plugin for these stylesheets. I use the User Style Manager addon for Firefox. And with these few lines of very specific code I now see the phone number I need whenever I have no internet connection:

#errorTitle + #errorLongContent #errorShortDesc::before {
    content: ‘No internet connection? Call John on 01 23 456 789’;