5 things I learned developing my first Chrome extension

In 2012 I attended a few conferences, where people were talking a lot about Chrome extensions and how they can make our “lives on internet” just a bit easier. Understanding the concepts behind development of Chrome extensions and having some programming knowledge, I figured I’d try something out, as it shouldn’t be so hard and I’d be learning some things in the process. But there were a couple of things I didn’t catch in the talks I attended, and I had to learn the hard way — by doing them.

The idea

There’s nothing more fun for a designer than the “idea-brainstorming” part of a project. I had literally dozens of notes with ideas about things I hated so much, and the browser could actually solve for me. Selecting a link’s text without clicking on it? Bad. Closing an annoying pop-up via an icon of size 5x5? Good luck! 1,5lbs to kg? 32 inches in cm? 10 A.M. PDT to CET? OK. Google, and back…

But all I had was a couple of hours through the weekend (I had more burning things than to play with Chrome extensions at that time). So, which idea do I pick? Well, I thought, the idea must be simple enough, so that I can handle the coding myself (ie. no complicated server-side communication needed, just good ol’ plain JS). OK. That’s a good start. Then, I figured, as with most of the “great” ideas, somebody must have done it before me. So I went to check the Chrome webstore for extensions that solve those same problems I had. Pretty much so. A lot of similar extensions were actually there, just slightly different of what I’d expect (and ugly, but more about that later). Bummer. Just a few things left to try out, and with the risk that I might be the only one thinking that that’s a pain that the browser can solve for me…

OK. So let’s go with the “universal-converter” idea this time. I know it’s too much, so how about just converting the time? The browser knows my location, ie. the timezone, and it can parse time from the pages I’m visiting and convert them automatically for me. Sounds good! Let’s start coding…

The execution

Four hours down the research and coding phase, I’m getting a feeling this may be bigger than I thought. A couple of libraries available dealing with the problem, but DateJS seemed old and outdated, while MomentJS too big for what I’m trying to achieve. Factoring in all the possible combinations that time can be represented in, I might need a pretty solid and fast content parser as well.

Time for dinner… I keep thinking, whether I should continue with this converter thing using a library, or rather write the stuff from scratch. Another four hours past and I’ve still got a very limited version of what I want.

Sunday morning, I’m all fresh and ready to continue coding. At this moment, I’m pretty sure the weekend won’t be enough, so I’m starting to look for ways to bootstrap this thing into a total MVP. In the meantime I need to jump to some important issues this commercial project I’m working on is having. I open Basecamp and there’s a long list of things to do. Basecamp has this nice little feature that lets you double click on the pages top and bottom corners and it automatically scrolls up or down. Up, down, next. Up, down, next… Done. Back to my extension project… Up, down. Oops, nope. That was Basecamp, this doesn’t work elsewhere. Huh? Shouldn’t it just work everywhere?

Sounded like a new idea for my ideas drawer. But I somehow got too excited (and bored from the converter idea) that I decided to give it a try right away. Two hours and the thing is ready and working. I call it “Click2Scroll” and it has 21 lines of code.

function scroll(to) {
if (window.getSelection)
window.getSelection().removeAllRanges();
else if (document.selection)
document.selection.empty();
$(“html, body”).animate({ scrollTop: to }, “slow”);
return false;
}
$(‘body’).dblclick(function(e) {
var x = $(window).width() * 0.66;
var ytop = $(window).height() * 0.33;
var ybottom = $(window).height() * 0.66;
if (e.pageX > x) {
if ((e.pageY — $(this).scrollTop()) < ytop) {
scroll(0);
} else if ((e.pageY — $(this).scrollTop()) > ybottom) {
scroll($(document).height());
}
}
});

To publish an extension on the Chrome webstore you need pretty much just two things: a developer account and a ZIP archive of your source files. Easy, done. Call it a day.

The launch

The new week is here. With new tasks and left-overs of past weeks. But I’m looking forward to the end of the day to check out how my first Chrome extension is doing. 285 impressions and 3 installations for the day. Okay-ish. Day 2: 1 installation. Day 3: 4. End of week: same story. Now I’m thinking, I must have missed something from those talks I went to. Going through the slides and notes, I make sure I’ve done everything right. I’m sure the problem must be elsewhere. I start asking a few friends to check, whether they can find my extension on the webstore. “Hello, Fred! Yeah, it’s me…”. “Uh, it’s called Click2scroll, can you find it?”. “Nope?!”. “Yeah, with a number 2 in between.”. “Aha, nope, no spaces”. “Yeah, that’s it…”.

OK. It’s probably a good idea to change the name to something less messy. Version 2 of the extension, this time I go with “Fast Page Scroll”. Why didn’t I think of this earlier? Not cool enough of a name, probably, but anyway, hope it works. Next week stats: double the impressions and installations. Good job for just a name change!


Another month goes by and things are pretty stable. This time I’m thinking it’s the product idea that sucks. (So I go back to the converter extension development for a while, but more about that on a future article). Over the weekend I decide to give “Fast Page Scroll” another try. I realize that the webstore has an option for translation of extensions and it prioritises items based on language support. Luckily my extension has just tow things that need translation: title and description. Using Google translation I make a clone of the extension in 17 most popular world languages in less than an hour and put it back to the webstore.


Surprise. Over 20000 impressions and 30 installation daily. Again, not bad for an activity that cost me less than an hour. And the extensions it’s still keeping up on the same numbers until today.

Statistics from the Chrome webstore 01–04.2016

Lessons learned

I’ve written a couple of other Chrome extensions since 2012, all of which have gone roughly through the same route as my first one. But most importantly, the lessons I learned in the process (and I missed in those conference talks) have helped me a lot in my day-to-day decisions as a designer.

Lesson 1: Exploit your ideas quickly

People tend to like their own ideas and stick to them just for the sake of it. A designer must learn to know when it’s the right time to change an idea. This can be hard for many reasons. People around you will see that as a lack of focus and they might force you to stick to your original plan. The more you go down a path, the larger the investment you make and the bigger your ego to continue. And so on. You need to exploit ideas quickly and evaluate them early enough to still be able to afford change.

Lesson 2: Force your own limits

More often than not we have limits, especially when working for other people. Budgets, milestones, your boss’ expectations, or your colleagues holidays. But with your own projects limits are vague or missing. Learn to force your own limits. For me this works by staying busy with other projects that have hard limits. And they force the limits to my own projects too.

Lesson 3: Don’t try to be cool

Designers are creative people, who like cool stuff. We try to add something extra, useful and elegant. But that’s just our ego speaking (again). Focus on the hard facts. Name and describe a product for what it is. The extras will come by itself.

Lesson 4: Learn from the data (and data only)

Talks, articles, Google. They all give you ingredients that you need to put together on your own. After that, it’s your own meal. Taste it and figure out what’s missing. Ask other people to taste it and learn from them. Learn from hard data and forget anticipation, you will (almost) always be wrong.

Lesson 5: Disrupt growth

If we all had a million dollars for marketing… Well, if we couldn’t change the product with that money, we’d still fail. Learn to disrupt growth through little steps. May be it’s just a small change that will make a big difference. Figure out a couple of these steps and you will go a long way.

P.S. Here’s a link to the scrolling extension, if you want to try it out. Thanks, Jonathan Arnold.

Show your support

Clapping shows how much you appreciated Xhevi Qafmolla’s story.