Forem: Kai Neuwerth

My experiences with building a Google Chrome extension

Kai Neuwerth — Mon, 17 Sep 2018 20:26:38 +0000

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>

$('[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:

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:

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:

Crease29 / pageliner

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

PageLiner

If you like this extension, I'd be really happy to receive an honest review and/or a tiny donation 🤗🥰 That means a lot to me!

PayPal
Bitcoin (BTC): 1PD2v5chdNR67kjpWAyKYZ5U6oSFqpRiVs
Dogecoin (DOGE): D5oEU9VbQ8jY8BGcrVoMLUxXzD26VMJzqM
Ethereum (ETH): 0xEE3057Cc44F93DC20423a682AFB35e93C4A134fd
Litecoin (LTC): LXbNG6VdCyqWmgvKZxyr4QinfiFiq8ebyb
Ripple (XRP): rnVEhBpThdY9Vs8sYJdoXxH9oFRC84LDyw
Stellar Lumen (XLM): GCLNBSZWFQZLALMMNKTCUMXHI5QMEGN5XE2SH6HG63HKXTGUINFYI7OI

Google Chrome and Edge extension to create guidelines on a website.

▶ View in Chrome Web Store

▶ View in Mozilla 🦊 Firefox Add-Ons Store

▶ View in Microsoft Edge-Add-Ons 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 guidelines from the rulers

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

Add guidelines with shortcuts

Alt+H adds a horizontal guideline at your cursor position and selects it for keyboard movement.
Alt+V adds…

View on GitHub

How old have you been when you started programming and what was your first project?

Kai Neuwerth — Thu, 16 Aug 2018 08:29:10 +0000

When I was about 14 I got in touch with Photoshop and "designed" some themes for Woltlab Burning Board 2 (if someone of you even knows this) in my sparetime. After the designing I also wanted to write the templates and CSS for it. I adopted some other CMS and did the same there but my dream was always to become a web designer. So I did an internship and realized that I can't force myself to be creative 8 hours per day.

I did another internship in the same company as developer. I knew HTML and CSS quite okay but PHP came on top. My first project there was a guestbook with an administration panel. Simple CRUD things with self written BB code parser (str_replace ROCKED 🤘!!!), fancy gif smileys, pagination and SQLi + XSS prevention (I exaggerate a bit 😛).

I'm curious what your first project was!

I'm a fullstack web developer in ecommerce, Ask Me Anything!

Kai Neuwerth — Wed, 15 Aug 2018 09:57:40 +0000

I started my training back in 2009, finished it in 2012 working in a company that had a LAMPP-stack CMS as product with many modules for different industries (such as hotels, hospitals and call centers).

After that I moved to an agency that made online shops based on OXID eShop. Really interesting clients and challenges!

After that I decided to move to a bigger city (Hamburg, Germany) and I got employeed as lead fullstack developer in an agency that also creates online shops but based on Shopware. Writing plugins, APIs and whatever the customer needs. That's where I am now.

My little personal website

Kai Neuwerth — Tue, 14 Aug 2018 11:08:19 +0000

Hi devs,

this is my first post on dev.to and I don't know if it is the right place to share my personal website but I want to give you a little insight what I found interesting while building it.

So on a free sunday I just had the idea to create a tiny personal site to be a bit creative, share my social network accounts and SSH & OpenPGP keys.

I finalized the "design" and wrote down the HTML, CSS & JS. I tested the PageSpeed score with GTmetrix and had a pretty bad score. Fortunately GTmetrix provides some really good guides on how to improve certain criterias. Activated some caching here, enabled some webserver mods there and optimized some assets over there: Neat!

After that I digged a bit deeper in performance on the loading. There was this flash of contents that really annoyed me.
Maybe you see, that there is a video looping in the background (maybe not in Safari because Apple blocks auto-playing videos 🤦). So I had to bridge that time before the background video was loaded. The simple solution was just to take the first frame of the background video as background image. That worked great! 🙂

I also added some dns-prefetch tags to improve the loading of external assets:

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.googletagmanager.com">

Overall it was interesting to see how granular, even the smallest website, can be optimized.

If you have any questions, critique, improvements or similar experiences, I'd be glad if you just answer here!

The code of my website is also, for sure:

Crease29 / kai.neuwerth.me

🎨 My personal website

🎨 My personal website: kai.neuwerth.me

This repository holds my own static website. You can see the production state right here.

I'm sorry, that I can't ship the background video that is running there because of the license, but I'm sure you will pick your own background video anyways. 😊 Just place it in the assets/webm/ directory and link it in the index.html.

Set up for development

git clone git@github.com:Crease29/kai.neuwerth.me.git
cd kai.neuwerth.me
npm install
grunt build

Feel free to use this codebase

I'd be happy if you just like this setup and "theme" and use it for your own website. Feel free to leave an issue if you have problems or just want to share what you have done out of it. 😊 ✌️

View on GitHub

Thanks for reading this!

Kai