My experiences with building a Google Chrome extension
Tags: chrome, extension, showdev
Published: 2018-09-17 20:26:38

---
title: My experiences with building a Google Chrome extension
published: true
description: 
tags: chrome, extension, showdev
---

Over 4 years ago I've released my first Google Chrome extension. I'm talking about [PageLiner](https://chrome.google.com/webstore/detail/pageliner/nepakmljodobhlbbkpobblnifmhclemh). 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.

```html
<span data-i18n="POPUP_TOGGLE_HELPLINES"></span>
```

```javascript
$('[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);
});
```

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](https://thepracticaldev.s3.amazonaws.com/i/ajar8kepemhgdfyoewam.png)

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](https://thepracticaldev.s3.amazonaws.com/i/s1ami1ltj1kfer3b4k2t.png)

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 Crease29/pageliner %}