I've been working on a new little side project recently (more info soon) which involves a Chrome Devtools extension. These are Chrome extensions that aren't targeted at changing your usual browsing experience like a normal extension but are actually aimed at modifying or providing extra behaviour for the Chrome Devtools panel. It's a little bit meta.

The theory behind them isn't that tricky and if you have any experience with standard Chrome extensions, you'd probably 'get' devtools extensions quite easily. Unfortunately, I was coming in with no prior knowledge at all and got quite lost for a few days. The docs are very helpful and the Google Group is handy but it still took me a while.

The main area I had difficulty with was the message passing. Sending info from my panel in the devtools window to the page being inspected and vice versa proved to be... complicated. I've used message events before but it still took me a while to figure out what was going where. It seems there are three individual execution contexts:

• The Panel
• The Background
• The Page

They each have access to different bits of the Chrome Extension API and the inspected page. I won't go into details of that here as others have explained it better. What I will do, though, is share this project - Devtools Extension Starter Kit. This does nothing more than create a panel containing three buttons. The first executes a snippet of JS in the context of the inspected page, the second attaches a complete JS file to the inspected page (allowing execution) and the third replaces the entire inspected page with a button. When you click on this button, it will send data back from the inspected page to the devtools panel.

Essentially, it's all the communication channels I found I needed for my extension and should be a useful starting point for anyone wanting to do something similar.

I also heard today about a new Yeoman generator that makes building Chrome Extensions easier. It would probably have made the first bit of my investigations a lot easier if I'd known about that beforehand.

• Devtools Extension Starter Kit

Regular readers will have noticed there hasn't been anything much to read regularly here for a while. That's because I occasionally like to remind myself I'm not actually a geek, I just play one on TV. The rest of the time, I have totally different hobbies, one of which is drawing. The last time I seriously sat down and devoted several hours to drawing anything besides cartoons and application diagrams was in 2011 when I drew Oskar. Seeing as he grows pretty fast, it was about time for another.

Here are some shots of the progress:

• 
• 
• 

And the finished drawing:

• 

Of course, this isn't drawn from a live posing session. There is no way Oskar would sit still for even 2 minutes, never mind the 10 hours it took to draw this. Jenni took an amazing photo of Oskar in the Westberlin coffee shop which provided the perfect reference.

Continuing my attempts to convince the world that CSS testing is a good thing, I wrote an article for .net Magazine. Issue 240, to be precise. Page 88 to be exact.

It's one of the few things I've done recently that I can actually point my Mum at and say "That. That there, that's what I do for a living". Which is nice.

I recognise that fella...

• 

With Andre Jay Meissner who's also in the same issue

•