The 6 Pro Tips For Building Great Chrome Extensions

(Original 📸 by Rob Lambert)

Browser extensions give us the ability to enhance services that we love but do not control…

Medium is one of the best platforms for online publishing with unparalleled writing experience! As much as I love writing on the Medium I have to say that the provided statistics are extremely basic and lack even the simplest stuff like a summary row with total count of the views, reads, etc…

This frustration leads to the creation of Medium Enhanced Stats which is an open source Chrome extension. The extension is currently used by more than 100 people and took around 3 months to develop even though it was far from full time engagement…

There have been couple of observations and lessons learned which I would like to share with you to help you to get to the results faster and prevent repeating my mistakes!

1. Ship early, add features and listen to the users
2. Leverage the modern JavaScript
3. Predict and ask for reasonable set of permissions from the start
4. Automate the collection of specific feedback
5. Realize that fixing of a bug can take longer than you would expect
6. Every Chrome extension can be used also as an Opera addon

1. Ship Early, Add Features And Listen To The Users

Release early! Build something functional in the most basic form and release it. As cliche as it may sound it is actually a great piece of advice. Ship something and keep building on top of that based on user feedback.

Perfection from the start is not necessary and can be actually harmful. Passing time will slowly uncover a lot of opportunities for improvement and optimisations which might not have been so obvious in the beginning!

Evolution of the “Total reach popup” feature as an example of “Ship early” approach

The original “Total reach popup” was implemented as a simple title tag with a formatted text. Over time it evolved into full blown component with many features and much better design!

2. Leverage The Modern JavaScript (No Browsers, No Cry…)

Modern JavaScript is great! The ES6 stuff, modules, async methods, you name it… The only thing holding web back is the need to support some of the older browsers. This is usually solved by introducing a whole galaxy of tools like transpilers and bundlers in standard frontend projects.

Chrome extension development is different! Chrome is a evergreen browser so every user can be assumed to run the latest version which supports all the great stuff! This enables us to write good old (ehm new😅) JavaScript and just run it as it is.

Directly include and run plain JavaScript file? Seems like we have come full circle!

Example of using new JavaScript features without the need for transpilation

Also, as I was reminded by Martin Hochel this fact enables us to get a bit fancy and use WebComponents without much worries as they are well supported by the Chrome!

3. Predict And Ask For Reasonable Set Of Permissions From The Start

Most Chrome extensions will need to ask for at least some of the permissions to be able to do anything useful. For example, being able to make requests to the target website or sending logs to our server can be pretty useful.

User has to confirm set of requested permissions during the initial extension installation. Similarly, user has to confirm any additional permission that we add in future versions of our extension.

This unfortunately disables default auto update behaviour and can significantly prolong update timeframe. In the worst case scenario it can even lead to high uninstall rates because of the mistrust on the user’s side.

It is much better to ask for a reasonable set of permission from the start instead of asking for a new permission with every new release!

For example, during the development of Medium Enhanced Stats I could have foreseen the need for logging and the related URL permission even though it was added much later.

Similarly, it would made sense to ask for storage permission which is needed to implement any “over time” features like checking if user has reached the next milestone or how have the views changed compared to the last month…

Permissions currently used by Medium Enhanced Stats

Follow me on Twitter to get notified about the newest Angular blog posts and interesting frontend stuff

4. Automate The Collection Of Specific Feedback

Getting quality feedback is one of the most important things in the whole software development endeavour

The more feedback we can get the faster we can fix all the issues which are not obvious to us as developers but are painstakingly clear for the end users!

Wouldn’t it be great to get feedback from users who uninstalled our extension? I mean, they liked it enough to install it in the first place so something must have gone wrong...

• Was it riddled by bugs?
• Did it keep crashing?
• Did they expect it to do something else?

The truth is we have no clue and the best way to figure this out is to give users the opportunity to vent their frustration in the most frictionless way possible!

Chrome extensions provides us with a feature that enables us to setUninstallURL which can be used to collect this kind of feedback. The implementation involves setting of an uninstall URL for every new user (the install event) and also for every existing user updating to a latest version of the extension (the update event).

Implementation of the uninstall feedback collection

The uninstall URL can then point to the fancy form on our website or even to a modest Google Form which can work just fine while requiring very little investment to get it up and running! ROI 🤑🤑🤑

Example of a Google extension uninstall feedback collection with help of Google Forms

5. Realize That Fixing Of A Bug Can Take Longer Than You Would Expect (Mobile Devs Know…)

We’re used to being able to fix bugs immediately, at least in the web application development. The fix is live immediately after it was deployed for all new user sessions. This is NOT the case with extension development.

Fixing the bug is just the beginning. Once fixed we have to create a new release that needs to be published in the Chrome Web Store. The fix may still take quite some time until it will be distributed to all our users. Check out the following versions chart. It can easily take more than five days until the majority of the users update to the next version!

It can take quite some days until user upgrade to the next version of the extension

This brings us to the conclusion that we have to pay extra attention during the testing because the problems we may introduce can take quite some time to fix once they appear on the end user machines!

6. Every Chrome Extension Can Be Used Also As An Opera Addon!

Not everybody uses Google Chrome and that’s all right! Unfortunately this limits the potential user base of a Chrome extensions straight from the start. Luckily there is a way to broaden this user base without any additional effort!

Opera comes with an addon system similar to the Chrome extensions. One of the available addons is called Install Chrome Extensions. This addon does exactly what you would expect it to do and it does it well!

Medium Enhanced Stats seems to be working perfectly using this approach but always test carefully before recommending your users to try this approach!

The installation flow for Opera users is to install the Install Chrome Extensions addon first and then simply navigate to standard Chrome Web Store and install desired extension in the same way as when using Google Chrome!

Are You Writing On Medium?

The extension which was an original inspiration for this article is called Medium Enhanced Stats. Its main goal is to provide additional information and convenience when working with the very basic Medium stats page.

Feel free to try it out at Chrome Web Store! The extension itself is open sourced on GitHub so you can explore how it works in greater detail…

That’s It For Today!

I hope you enjoyed this article! Please support this guide with your 👏👏👏 to help it spread to a wider audience 🙏 and don’t hesitate to ping me if you have any questions using the article responses or by sending a DM on Twitter @tomastrajan.

And never forget, future is bright

Obviously the bright future! (Starcraft 🤟🏻)

If you made it this far, feel free to check out some of my other articles about Angular & frontend software development…

The 7 Biggest Lessons I’ve Learned By Building A Twitter Bot 🐤🤖_Today, I am going to share with you the most important lessons I have learned by building Release Butler — a Twitter…_hackernoon.com

How To Stay Up To Date With Releases Of Popular Frameworks_Introducing Release Butler — A Twitter Bot That Helps You To Stay Up To Date With Releases Of Popular Frontend…_medium.com

How Did Angular CLI Budgets Save My Day And How They Can Save Yours_Budgets is one of the less known features of the Angular CLI which helps you to keep application bundle sizes in check…_medium.com