how to

Blog posts tagged 'how to'

Create a Google Chrome Extension

Mar 25 11

I’ve been meaning to look into creating a Google Chrome extension for a while.

Earlier this week, I successfully RickRoll’d Rob Ashton on twitter, which in turn, after a RT, RickRoll’d several others. Many of whom replied with tweets like

So, that got me thinking.

What if there was a way to stop you being RickRoll’d. Then I remembered I wanted to learn how to create a Google Chrome Extension… The two ideas fused, and RickMeNot was born.

Step 1 – Create a Manifest File

I created a RickMeNot directory (and init a git repo, of course…)

Then, create a new file using <insert your favourite text editor here>

All  extensions, installable web apps and themes have a manifest file.
This is a JSON file, needs to be called, quite descriptively, manifest.json.

Read more on Manifest Files

The manifest.json for RickMeNot looks like this

Most of this is fairly self explanatory.

What we’re basically doing, is setting the name, version and description of the extension.

We then specify the background_page.

A background page, is basically a long running script that manages a task in the background, while the extension is active.

This particular extension won’t need a fancy button (Browser Action) or anything like that, so we only need to specify our background page.


One thing to take not of is the permissions array.

This particular extension needs to be able to access the urls of tabs etc… so, we’ll need permission to use “tabs”.

Background Page

Ok. So we have our manifest file that tells the extension what to do, so now we need to create a file that tells it how. This will be where the main functionality of this extension is.

Although this is a .html it doesn’t have to contain the usual doctype and other tags.

It simply needs a <script> and </script> tag, with all the script for the code in between.

Let’s start real simple:

<script> chrome.tabs.onUpdated.addListener(tab_updated); </script>

What this does, is add an event handler for the tabs.onUpdated event.

As expected, this fires when a tab (any tab) is updated.

Note: I’ve called our callback tab_updated – this can of course be called anything.

Our tab_updated function looks like this:

Ok- so what this does, is loop through all the values in our (as yet undefined) rickUrls and checks if the tab.url (the value from the passed in tab object) is equal to one of the values in our array.

If it does, it updates the tabs url (think of this as a redirect) to “savedFromARickRoll.html” (more on this later)

Populating our array using body onload

So, now we need to populate our rickUrls array.

While our background page doesn’t have to have HTML tags, it can. It can also contain some client side executed javascript.

In this instance, we’re most interested in executing the body onload event

In our background.html we simply add:

Our “init” function is in between the <script> </script> tags and looks like:

In version 0.1, we’re just hardcoding a few of the known youTube URL’s

In later versions, I’ll rewrite this to check an external file / service or something to get an up-to-date list of them.

Putting It All Together

This is what our background.html looks like:

Files within an Extension

An extension can contain files, like our savedFromARickRoll.html, and you can reference them locally.

This also applies to images (see the image in our savedFromARickRoll.htmlnoRickRoll.jpg)

You can’t however, refer to anything else on disk (c:\ or anything like that)

This is obviously for security reasons.


I’ve put all the source for this post on GitHub

You can download it here:

What’s next…

I’ve got a couple of follow up posts planned on this.

Firslty, a short one on how to list your extension in the Google Apps Marketplace (will add link as soon as it’s ready)

Also, when I get time, I’ll write a post along the lines of calling external services to get a list of updated Rick URLs

How to change the language on a Buffalo LinkStation from Japanese to English

Sep 23 09

I recently had massive problems with my LinkStation and had to flash the firmware on it….

When I finally got it up and running again, my admin screen was in Japanese!!

I followed the instructions on the FAQ –

I thought I’d just put a few pics up to illustrate it a little better:

Step 1

Log in to your admin panel
You’ll see the screen below:

Step 2

Click the 2nd option on the left, as shown here with a red arrow:

 Link station admin screen in Japanese

Step 3

Change the text in the box indicated by the first arrow (not sure why, but that’s what the FAQ says….)

Then, change the first drop down (indicated by arrow) to English, and the second drop down to CP437.

Click the button at the bottom.

Exit the browser, and restart.


Link station admin screen in Japanese

Using Acronis – Migrate Easy to move contents of a hard drive

Sep 9 09

My Dell E6400 came with a 160gb hard drive – a Western Digital Scorpio Black to be precise.

This was perfectly adequate, however for the volume of music I have, I needed something larger.

I got hold of a 320gb Seagate Momentus off of eBay, and decided to swap.

I didn’t fancy re-installing all the software I’d set up on my current 160gb hard drive, so I came across Acronis Migrate Easy – which is exactly for people like me – want to move from one hard drive, to another.






























Fitting a backlit keyboard to a Dell E6400

Sep 8 09

Both of the Dell E6400 laptops I’ve owned came without the backlit keyboard (first one was stolen in Ibiza)

So, both times, I have retro-fitted a backlit keyboard.
The process is simple, and I’ll show you how below. They don’t need any drivers – they light up when you press a key, and dim to save battery after a minute or so.

Dell provides a Service Manual, with good instructions on doing this also –

If you want one, please contact me
I can usually get hold of them for around £20 – £25, plus delivery.


Step 1

Remove the battery. Fairly self explanatory. Just in case you’re not sure…. here’s a picture:

Dell e6400 - Battery removed

Step 2

Locate the little plastic clips that hold the led cover on (the bit on the front that runs across the top – above the keyboard, below the screen hinges)

Use something plastic and ease them out.

The led cover should pop off.

Dell e6400 - Use something plastic to pop out the clips holding the led cover on

Step 3

There are two small Philips head screws under the led cover that hold the keyboard in place.

Unscrew them, be careful not to lose them (my first laptop had one screw when I put it back together, thanks to me not heeding above advice)

Dell e6400 - Remove 2 screws holding keyboard in

Step 4

Theres a little plastic tab in the middle, at the top (see blue arrow)
Use this to gently pull the keyboard towards the top (as indicated by red arrows)
The keyboard should pop out of its connections at the bottom, and easily come away.

Dell e6400 - Remove keyboard by gently pulling upwards

Dell e6400 - No Keyboard

Step 5

Without sounding like a Hanes manual, refitting the new keyboard, is the opposite of removal.

Turn on your laptop, and press one of the keys – it should light up!