planet-nifty.co.uk » Daily Grind

Traffic Light: A Chrome extension to watch for specific URLs…

Russ — Sat, 28 Jan 2012 21:47:49 +0000

As a web developer I often find myself working with multiple servers that show identical websites on different URLs. Typically this is a case of test servers and live servers for particular websites - but this can get confusing. The website on a test server is pretty much identical to a live server in every way but if you get confused about which server you’re looking at you can make mistakes like changing the config of the live server and looking at the test server for changes. Which is not good.

So I’ve knocked up a little chrome extension that watches which URLs I’m visiting in each tab and shows a little warning icon depending on which URL I’m visiting. It’s hardly a work of art, but it is a neat little introduction to the very basics of creating a google chrome browser extension using page actions and background pages.

So lets take a look at it shall we?

For the sake of testing, the job for this extension will be to show a different coloured icon in the browser address bar when I visit any of three different web URLs and show nothing if the URL isn’t already configured.

The URLs I’m testing with are these;

http://www.planet-nifty.co.uk/

http://if-host.co.uk/

http://www.RussWilde.com/

But you’ll be able to substitute in your own URLs or other tests as you go through the code.

Google Chrome Extensions 101

To begin with, lets look at creating an extension that Chrome will install. There’s some good examples in the official getting started tutorial, so do give that a look too.

To make a chrome extension that will install you need some very simple things;

A folder containing all of your extension’s files.
A file called ‘manifest.json’ in the root of that folder.

I’m going to assume you know how to create a folder on your computer and look at the manifest.json file instead. If you’re not familiar with the JSON format, it is a lightweight data-interchange format designed to be easy for humans to read and write and easy for computers to read and generate. It’s a handy format to write in and very easy to learn.

Here’s the JSON file for the extension we’re making…

{
  "name": "Traffic Lights",
  "version": "1.0",
  "description": "Watch the URL for specific servers.",
  "background_page":"background.html",
  "page_action": {
    "default_icon": "icon-green.png",
    "default_title":"Unwatched server",
    "default_popup":"popup.html"
  },
  "permissions": [
    "tabs", "http://*/*"
  ]
}

In a nutshell this manifest file instructs Chrome that this plugin is called Traffic Lights, it is version 1.0 and provides a description – this is the data that is shown to the user when they visit the Wrench Menu > Tools > Extensions page. Like this:

After those details, we include a background_page definition, a page_action definition and set up some very loose permissions on tabs. We’ll look at these items next…

The page_action

The page action is a particular type of object that Chrome uses to display a small icon inside the browser address bar, right next to the ‘bookmark’ star. These are fixed in size at 19px x 19px and can be pretty much any type of graphic that Chrom is capable of displaying in a web page. We can change the icons programatically as well, which we’ll look at later on.

In our page action definition, we define the default icon for our extension (icon-green.png), set a default title for the icon (this is displayed in a tooltip that pops up when the user hovers their mouse over the icon) and we define the contents of a popup to display when the icon is clicked – popup.html. These file urls are relative to the folder in which your extension lives by the way, so we need to create a popup.html and an icon-green.png in our folder along side the manifest.json file. I’ll leave it up to your creativity to manage that. Here’s the code for my popup.html – this could do some fancy stuff for configuring the extension, but for now we will just display some boring information:

Traffic Lights Popup

Traffic Lights

This plugin watches for specific URL patterns and shows a coloured icon on the address bar. Currently the following URLs are matched...

*.planet-nifty.co.uk (coloured red)
*.if-host.co.uk (coloured amber)
*.russwilde.com (coloured green)

Here’s how it looks when the popup is displayed:
That’s our somewhat rudimentary orange icon there as well. Notice that the popup content is entirely HTML and can be styled up with CSS and made to look lovely – even though that’s not what I’ve done here.

Thanks to the configuration in our manifest.json file, we don’t have to do anything else to make that popup work once our extension is installed (we’ll look at installing it later on).

The background_page

The background_page is an html page that is opened in the background when your extension is running. It doesn’t get displayed to the user, but it has the same functionality as an HTML page in every other sense. This is most commonly used for running javascript for your extension which performs essential background work to make things operate correctly. The background_page in our project – background.html – runs some javascript to observe the updating of browser tabs and act on the update where necessary.

In our case, we want to watch when tabs in Chrome are updated, check the URL against our list of URLs to show an icon on and, where necessary, display the icon. Here’s the code – it’s not exactly brilliant, but it fits our basic requirements:



  
    Background operation for Traffic Lights

… Like I said, not brilliant, but it will do the simple job we’re trying to achieve.

Let’s take a quick look at what we’re doing here:
As you can see, the html page is just a carrier for a short section of JavaScript which does all the work. The first command chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {…}) attaches a callback function to the Chrome Tab Updated event – this gets called at a various points during the tab lifecycle, including when the URL changes for whatever reason. The function accepts a few parameters; we’re particularly interested in the tabId – which is used to identify which tab was updated (and later which tabs will display the icon), the changeInfo which contains the tab URL when it changes and finally a handle to the tab object itself which always has the URL available.

I must confess to being lazy in creating my code here; I think I could interrogate the changeInfo object each time the tab gets updated, check to see if the URL has changed, and only update the icon if necessary, but I’ll leave that to you to change at your leisure.

The callback function performs some pretty rudimentary checks on the URL to match against our list and, when the URL is a match, sets the icon graphic to the appropriate colour, sets the tooltip text and sets the icon to show for the given tabId – note that the icon will not display by default on other tabs, so we don’t have to include a clause to hide the icon when it isn’t necessary.

That’s It!

That’s all there is to our extension, add a few icon graphics and we’re set. Let’s install that bad boy and see it in action!!

Installing your extension is easy…
Let’s just check that we’ve got everything – you should have a folder on your computer containing manifest.json, background.html, popup.html and three 19px x 19px images named icon-red.png, icon-amber.png and icon-green.png – ideally containing some kind of graphic of the named colour. Right? Good! You’ve got Chrome too right? Okay.

Open Google Chrome, click on the wrench menu button and select Tools > Extensions and the extensions manager opens in a new tab. If you’ve not got the ‘developer mode’ checkbox ticked, now is the time to tick it. Next click “Load unpacked extension” and Chrome will prompt you for a folder location of your extension. Browse to the folder that contains your manifest.json file and click open. Your extension will be installed into Chrome and activated. It should look like this:

Now just visit some of our special URLs to see the icon appear in the address bar.

Hooray!

If you’ve been reading without following along at home, you can download the sources for this project here:

Planet-Nifty-traffic-light-chrome-extension
(You’ll also find a netbeans nbproject folder in there which you can ignore and/or delete if you so wish).

So there you go; We’ve assembled a simple extension for google chrome that does something which could be useful and installed it into google chrome. I’d welcome your feedback, complaints etc. in the comments below.

Russ

Zero.

Russ — Sat, 05 Nov 2011 19:27:56 +0000

Well, it happened. After months and months – actually a couple of years. My countdown has hit zero and I’ve reached the end of my invisalign treatment… Or so I thought.

Right now, I’m at the end of my first round of ‘refinements’ and I’m allowed a few more if I want to make further changes. I’m actually pretty happy with the result. Looking back at how my teeth were at the start of this thing, I can definitely see a real improvement.

Am I finished?
I’m not sure, to be honest. I’m very interested in not having to wear these things in my mouth anymore and the idea of saying “Yes, that’s it. They’re done.” is very appealing. But I’m still not 100% sure that one final tooth has positioned itself perfectly or not. I’ve discussed it with my dentist and he’s pretty confident that it’s as good as it is going to get. He even showed me the arch of my teeth from above with a clever little camera and, if you happen to be inside of my mouth, you’ll agree the alignment is perfect. From the front, on the other hand, it does look just a little bit out of alignment. My dentist thinks it is because the tops of the teeth are now a little zig-zagged because they’ve all been repositioned. Which he will fix when we’re done with aligners by levelling them all off for me.

You know what?! I’m going to call them done. If I stop now, I’ll still have a smile two million percent better than it was and that is a massive improvement. If I go through another load of refinements, I will still be wearing aligners in the New Year and there’s no guarantee that they will actually make any difference whatsoever. I’ll see if I can get a lovely smiley face picture that matches the one from my original starting post, to show you some before and after shots. You’ll be shocked at how far I’ve come. In the meantime here’s a crappy webcam picture to tide you over:

An Open Letter To The National Lottery

Russ — Sat, 06 Aug 2011 10:35:23 +0000

Dear National Lottery,

I just wanted to draw your attention to a little problem I’ve run across as a subscriber to your online services; Over the past week I have received at least three e-mails from yourselves which were identical except for the date. The e-mail reads something like this;

This is a service message to advise you that we expect to see an increasingly high volume of traffic to the National Lottery website in the hours leading up to the close of the EuroMillions draw at 7.30pm tonight.

If it is your intention to purchase a ticket for any draw-based game today, we would recommend that you do so as early as possible in order to avoid any disappointment.

Yours sincerely,

National Lottery Customer Care Team

www.national-lottery.co.uk

Seem familiar? I’m sure you’ve seen it around.

Since I work for an online retailer, I do appreciate the benefits of sending out e-mails to remind customers of your existence and I’m sure a campaign like this is quite profitable.

However, I can’t help but see this as an exploitation of your own terms and conditions. I know that you are bound by UK law regarding customer privacy, which means that, when I tell you I don’t want to receive advertising or marketing e-mails from you, your company or its affiliates, I know you’re not allowed to send any of that stuff to me or pass on my details without my consent. This e-mail however is thinly disguised as a “service message” which, in your own terms constitutes part of the service I am subscribed to and not direct marketing. Your web server is going to be busy, you say? I might not be able to use the service later, you say? So I should get all my gambling done early and avoid the rush, you think? Well, aren’t you considerate for warning me?

My problem is this;

“Advertising is a form of communication intended to persuade an audience (viewers, readers or listeners) to purchase or take some action upon products, ideals, or services” – Advertising – Wikipedia

I think your call to action in the above e-mail fits neatly into this definition of advertising, despite being qualified with “If it is your intention to… [blah blah blah]“. I know, the Advertising Standards Agency’s new online remit wouldn’t agree with me on this, but I still feel like my trust in you to not bother me with “come and gamble today” messages has been violated.

If you’re genuinely worried that a run of last minute gambling will bring down your website on these big lottery draw days then I humbly suggest you do something about it rather than waste time and resources on broadcasting about how unprepared you are for the coming onslaught.

I’m sure a company who, last year, banked over £31 million in profits and paid dividends of over £33 million to it’s shareholders – funded by the 70% of UK adults who regularly play National Lottery games - can afford to invest in some more scalable server technology.¹

I know you’re basically a Canadian Teacher’s union pension scheme in disguise nowadays, but come on. Buy some more servers and quit spamming me.

Sincerely Yours

Russ Wilde

¹ Statistics taken from the Camelot Stakeholder Report 2010.

So I wrote this URL shortener…

Russ — Tue, 07 Jun 2011 22:28:57 +0000

So there I was, procrastinating over a very important job that I have still to finish and I got to wondering about the short codes used for URL shortening services – you know, these ones; http://abc.com/1a4c

So I decided to make on of my own…

As is so often the case when you start researching cool mathematical stuff for a neat function, it turns out that someone’s already done all the work. In this case, I learned about the PHP base_convert function which can neatly convert boring base 10 numbers to lovely base 35 numbers (actually, it will convert from any base number to any other base up to base 35), which is marvellous. I had originally started drafting another function to generate short-codes of a larger collection of symbols, but the codes might not always be reliable when passed through various internet chanels – I don’t think it is safe to rely on case-sensitivity for example, which would have massively extend the code range – So I decided to use the base_convert function which uses letters and numbers to represent base35 numbers.

I figure, if I use short-codes from 1 to 5 digits in base 35, that still gives me over 52.5 million codes before I have to figure a way for extending the code-base. I’ll probably run out of database before then anyway.

Once you’ve got short codes from decimal numbers sorted out the rest is a walk in the park really;

Collect Urls to be shortened
Store them in a database with a numerical index
Use the index number for each url to generate a shortcode
~~Do some fancy url rewriting to redirect each shortcode to it’s destination url~~

Since my Url rewriter is for me and not for insane “SEO specialists”. I’ve made some concessions in the way it works;

Urls aren’t redirected with a 301 http code. In fact each url in the shortener presents a page with a javascript redirect that bounces the user to their destination after a short delay. The waiting page shows the precise page that the user is about to visit, giving them a chance to change their mind and hammer the back button. After all, these short codes could be leading you anywhere.

Not redirecting with a 301 also means that I can collect more accurate analytics from each link as I can see every visit to that ‘bounce page’ before the user is passed on to their final destination. A 301 redirect is designed to be cached by browsers and subsequent visits would then bypass our page altogether, meaning we wouldn’t count all visits to our shortened urls.

The other concession I had to make was this – my url shortener doesn’t produce very short urls – regrettably the very short domain names are really damned expensive. So, for the time being, I’ve plugged it up at a short subdomain of an existing short-ish URL from my collection:

http://u.if-host.co.uk/

It currently has no stylesheet ’cause I wrote it in an afternoon, but please do try it out. Feedback will be gratefully received in the comments on this post.
Also if anybody has a cool short URL they’re not using, I would be happy to host this service on that url for you.

Incidentally, it’s my Birthday on Friday. There’s going to be cake, one way or another (and probably both – oh man I love de cake!).

New Hosting…

Russ — Tue, 24 May 2011 18:56:45 +0000

Just a little note to say that we’re currently migrating to some new hosting. There won’t be any down-time – not that it matters I suppose, but if you’re reading this version of this post, you’re talking to the NEW server.

Three Excellent Reasons to Smash Your TV

Russ — Wed, 16 Mar 2011 20:50:07 +0000

Being somewhat sick of TV and television advertising, I no longer watch TV at all. Actually it’s been a couple years since I last watched a show on TV and I thought that I would share with you three good reasons to try going without yourself…

1. Adverts warp your mind

For over 100 years, advertising executives have been telling you and your forebears what to buy and, in their time, they have evolved the black art of advertising a long long way. From Albert Lasker‘s salesmanship in print to hugely expensive internet viral campaigns these people are constantly working to find new ways to get products into your mind and money out of your wallet.

I think XKCD put it perfectly:

“If someone has paid $X to have the word “free” typeset for you and N other people to read, their expected value for the money that will move from you to them is at least $ X / N + 1″

– XKCD Comic: Advertising

I must assume the same is true of GBP and TV advertising too. I’ve noticed a correlation between products I’ve purchased after seeing advertising for the product and products I regret buying:

In fact, I’m so aware of this correlation that I often actively choose not to buy products I see in TV advertisements simply because I expect to be so brutally disappointed by the product. On one occasion I went out of my way to buy a product that was a direct competitor to the one in the advert (that’s how I got into Android mobiles).

2. You’ll still hear about 90% of what happens from people who do watch TV

Being one of (approximately) fifty-six UK citizens who are lucky enough to actually have a job, I work with an office full of people. One of the most common conversations I overhear between my colleagues is along the linkes of “Did you see [Popular Reality Show] last night?”. I may be an office dullard, but I know that I can get enough information on what’s going on in the world of popular entertainment by forcing my way into these conversations.

3. The most memorable, controversial and enjoyable moments are already on the Internet

Especially in the UK, almost anything worth seeing on TV is either;

On the internet roughly three months before it is aired on TV – OR
On the internet within thirty seconds after it has been aired.

Considering that any TV station that wants to succeed these days has to offer some kind of ‘watch online’ service. I think it’s not unreasonable to expect that anything seen on TV should be available online from one web service or another.

So there you have it, Smash your TV today and you will no longer wonder why you bought things that you didn’t really want. You’ll still be able to catch up on what is going on in popular reality show. You can even watch the occasional good show online and, best of all, You can have the immense satisfaction of smashing a valuable and fragile piece of electrical trickery… Not to mention the three-plus hours of time you will recover every evening from not-watching.

Microsoft diskpart, your friend in times of need.

Russ — Sun, 14 Nov 2010 21:56:38 +0000

Once again I find myself regretting having purchased an Apple mac. For the third time now, my mac book has wrapped the partition of my usb backup drive (a Maxtor 500 gig usb external drive) in an ‘unknown partition’ rendering the drive inaccessible to just about any computer I plug it into. So here’s how I got the drive working again…

In my usual Google trawling i found that a lot of people are having similar problems with external drives connected by usb. The problem seems to revolve around mac OS wrapping the partitions on the external drive in some kind of protective partition. After using the and ejecting the drive, the hardware can’t seem to un-mount for some reason. No amount of waiting or repeated ‘ejecting’ of the drive will successfully demount it. So, naturally, I shut the computer down — surely the drive must be safely demounted and parked when the machine shuts itself down right?

Apparently not, the drive is now inaccessible to Mac OS, Windows and Ubuntu machines as the partitions are apparently locked inside an unknown partition occupying the entire drive. It’s nice to know my backups are safe with Time Machine doing the driving(!).

After the first time this happened, I now know my data on the dive is lost for good. To get the drive working again – to get rid of that protective partition – requires some low-level cleaning of the drive which isn’t always doable for external drives. I have read that some people have had success recovering the drive by connecting it via firewire, on drives where firewire facilities exist. Sadly, I don’t have a firewire drive. Another option is to split open the USB enclosure, stick the drive into a computer and perform a low level partition and format using manufacturers software, I didn’t want to break my pretty little seamless enclosure and I don’t own a working desktop computer to put the drive in nowadays anyway. So I’m screwed. Right?

My last-ditch attempts at getting my drive working came down to this: Microsoft DiskPart.

Leave it to Microsoft to create a utility that can fix a problem created by Apple.

Here’s how I get my drive working again;

I plugged the drive into my Windows XP laptop (I don’t have windows 7 yet, so I couldn’t say whether this will work in 7, it probably will).

I opened up a command prompt and entered the command to launch the Microsoft diskpart utility.

diskpart

I should probably mention that diskpart is a destructive utility that should be used with great care as you can pretty easily break your working drives and partitions with little or no warning.

Diskpart is a terminal style application that works interactively to fix or break your hard drives. The first command you should try is the help command (or just type a question mark).

help

The help lists out the collection of commands that can be used. My facourites are list, select, clean and create.

List
The list command will list out drives, partitions and volumes depending on which you want, it takes one parameter which can be, you guessed it; disk, partition or volume. you’ll need to tell diskpart which drive you want to work with before doing anything interesting, so first up I used

list disk

to get a list of drives. Each one is named disk 0, disk 1 etc. My internal harddrive was disk 0 and the usb drive was disk 1 (I could tell by the capacity). So the next thing to do is tell diskpart that we want to work with the external drive

select disk 1

Then annihilate any partitions on there including that pesky and immovable partition using the ‘clean’ command.

clean

Clean doesn’t take any parameters, which is why it’s important to make sure you’ve selected the correct drive first.

All that remained was to create a new partition ready for formatting using the

create

command. Create takes one parameter; which type of partition you want to create, which I leave to your judgement. After the partition is created, the drive is suddenly available in the windows computer management / disk management snap in and can be formatted and managed normally. It’s worth getting a full format and a scan for bad sectors in before sticking any valuable data on there of course.

Oh and never plug it into mac os again. Ever.

You are spammer number 1,000 congratulations

Russ — Wed, 11 Aug 2010 07:15:19 +0000

This post was originally scheduled for Tue 15th but it seems to be raining spam out there in internet land.

By my estimates, today will see our 1,000th spam comment on this glorious website, so I thought I’d share a few words to mark the occasion…

Ahem…

Kindly f*ck off!

Sorry folks, I have very short patience for even commercial advertising, but comment spam is possibly the most annoying thing I’ve ever encountered (except Quentin Tarantino of course). So I want to finally set the record straight…

I don’t want to rent SEO services from a company who don’t have real email addresses, I don’t want to buy cheap pharmaceuticals online, I’m quite happy with the size of my penis, the quotes from books would be marginally interesting if I didn’t get each one three times, I’m not interested in seeing 40 links to spammy and virus infested sites, I don’t want to confirm my bank account details with you, I can’t help you transfer international funds, I don’t want a job receiving money, I’m not going to email you for pictures of naked celebrities and that massive post in Russian doesn’t even make sense in Russian.

… phew, did I miss anyone? Oh well.

I wonder if spammers get this much spam.

Definition: The Breakfast of Champions

Russ — Wed, 14 Jul 2010 20:06:38 +0000

The Breakfast of Champions – a term originally used to describe any potentially nutritious breakfast cereal endorsed by a sporting hero, is now used to describe a completely ridiculous breakfast containing at least 2000 calories and boasting no nutritional value.

For example, ricycles and doughnuts cereal.

Dee-lish!

Jumping off the Apple bandwagon

Russ — Tue, 06 Jul 2010 17:47:54 +0000

Because of my commitment to try every smartphone ever made, and because yet another apple problem had left me rubbing my sore and abused wallet. I have officially jumped off the Apple bandwagon and bought myself an HTC desire.

My iPhone is off to be recycled somewhere, may it rest in pieces.