DEV Community

Kai Neuwerth
Kai Neuwerth

Posted on

My experiences with building a Google Chrome extension

Over 4 years ago I've released my first Google Chrome extension. I'm talking about PageLiner. Later on more about the bad rating! 😉 Please don't blame me for all the horrible jQuery stuff and hungarian notation in there. 4 years ago jQuery was still the thing for me and it just works. But I'm aware of the fact, that it can be done much cleaner and more elegant.

So, what is it for? PageLiner allows you to place guide lines on a website like you know it from Adobe Photoshop. It's helpful to see if all elements on a website are properly aligned or to measure distances between guide lines. So it's perfect for frontend developers.

I've started by shouting it out to my collegues and in some software communities and so my userbase started to grow slowly.

The first issues that reached me were just some visual bugs caused by the CSS that was used on some pages that affected the rendering of the guide lines. Pretty easy to fix.

As the userbase growed I noticed that some users from other countries are also using PageLiner and because it was only available in German at that point, I decided to implement a really easy internationalization method with Javascript that simply reads the data-i18n attribute of elements and replaces its node text.

<span data-i18n="POPUP_TOGGLE_HELPLINES"></span>
Enter fullscreen mode Exit fullscreen mode
$('[data-i18n]').each(function () {
    var sIdent = this.getAttribute('data-i18n'),
        sTranslation = '';

    if (sIdent === 'VERSION') {
        sTranslation = chrome.runtime.getManifest().version;
    }
    else {
        sTranslation = chrome.i18n.getMessage(sIdent)
    }

    if (!sTranslation.length) {
        console.error('Could not find message string by ident "' + sIdent + '"!');
        return;
    }

    $(this).text(sTranslation);
});
Enter fullscreen mode Exit fullscreen mode

That made the userbase grow slightly faster. But at some day the userbase just exploded! 💥 Here is the graph that shows the massive increase of users, reviews and bad ratings:

PageLiner statistics

The extension got reviewed by many Russian persons. Comments like "remove this virus" and "I can't uninstall this extension". I had no idea what was going on and contacted google.
They could do nothing about it. Google just deleted those reviews with swearwords.
I tried to contact the reviewers via Google+ or Hangouts and someone with a technical background replied. We analized it a bit and found out that someone grabbed my extension, modified it, extended it with malware and installed it on other clients as OEM extension, so that it can't be removed in Google Chrome itself. Some months later the userbase went back and everything was okay, except the bad reviews.

One year later the same thing happened but even heavier:

PageLiner statistics

There were many threads in russian anti virus forums asking how to uninstall the extension. Months later the userbase went back again to a consistent level of 6000 users. I guess the anti virus vendors have implemented a check for the malware extension and could remove it.

Currently there aren't so many changes in the extension but that's okay for me. I'm really proud that I have created an extension that is used by so many real people everyday.

In case of questions I would love to answer them below in the comments! Have you ever created a browser extension? Share it!

Hopefully that was interesting in some way and you enjoyed my little cerebration. 🙂

If you want to have a look at the code behind this extension, you can find it here:

GitHub logo Crease29 / pageliner

📐 Google Chrome extension to create guide lines on a website.

 PageLiner Join the chat at https://gitter.im/WebChimp-DE/pageliner

Chrome extension version Chrome extension user count Chrome extension price Chrome extension rating count

If you like this extension, I would be glad if you buy me a beer 🍺 😁 Flattr this git repo Donate via PayPal

Google Chrome extension to create guide lines on a website.

View in Chrome Web Store

If you have any suggestions or bugs, please create an issue or use the support form in Chrome Web Store. Thank you!

Features

Add guide lines from the rulers

Hover over one of the rulers and start dragging a new guide line from there, like you know it from Photoshop.

Add guide lines with shortcuts

  • Alt+H adds a horizontal guide line at your cursor position and selects it for keyboard movement.
  • Alt+V adds a vertical guide line at your cursor position and selects it for keyboard movement.
  • Alt+A adds a horizontal and a vertical guide line at your cursor position.

Move guide lines with keyboard

  1. Add a guide line.
  2. Click on…

Top comments (3)

Collapse
 
idoshamun profile image
Ido Shamun • Edited

I have created Daily Now, a Chrome and Firefox extension for developers to stay up to date with all the latest news.

Building a Chrome Extension is some kind of a hybrid between web and mobile applications. You get to build your application with web technologies but on the contrary you have to deal with bureaucracy, submitting updates, filling changelog and more.

At the end of the day I totally agree with you that the most satisfying thing is that many people use the extension/product and find it viable.

dailynow.co/

Collapse
 
crease29 profile image
Kai Neuwerth

Thank you very much for sharing your experiences! I also use your extension and really like it.

Was it the first browser extension you developed?

Collapse
 
idoshamun profile image
Ido Shamun

Actually it is my first extension but I have a rich background in web applications development. We are a team of 3 people hacker, hustler and designer :P