(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 which is an 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… Medium Enhanced Stats open source There have been couple of observations and which I would like to share with you to help you to get to the results faster and prevent repeating my mistakes! lessons learned Ship early, add features and listen to the users Leverage the modern JavaScript Predict and ask for reasonable set of permissions from the start Automate the collection of specific feedback Realize that fixing of a bug can take longer than you would expect 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 tag with a formatted text. Over time it evolved into full blown component with many features and much better design! title 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 this fact enables us to get a bit fancy and use WebComponents without much worries as they are well supported by the Chrome! Martin Hochel 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 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. auto update 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 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… storage 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 which can be used to collect this kind of feedback. The implementation involves setting of an uninstall URL for every new user (the event) and also for every existing user updating to a latest version of the extension (the event). setUninstallURL install update 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 the case with extension development. NOT 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 . This addon does exactly what you would expect it to do and it does it well! Install Chrome Extensions 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 addon first and then simply navigate to standard Chrome Web Store and install desired extension in the same way as when using Google Chrome! Install Chrome Extensions Are You Writing On Medium? The extension which was an original inspiration for this article is called . Its main goal is to provide additional information and convenience when working with the very basic Medium stats page. Medium Enhanced Stats Feel free to try it out at ! The extension itself is so you can explore how it works in greater detail… Chrome Web Store open sourced on GitHub 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… _Today, I am going to share with you the most important lessons I have learned by building Release Butler — a Twitter…_hackernoon.com The 7 Biggest Lessons I’ve Learned By Building A Twitter Bot 🐤🤖 _Introducing Release Butler — A Twitter Bot That Helps You To Stay Up To Date With Releases Of Popular Frontend…_medium.com How To Stay Up To Date With Releases Of Popular Frameworks _Budgets is one of the less known features of the Angular CLI which helps you to keep application bundle sizes in check…_medium.com How Did Angular CLI Budgets Save My Day And How They Can Save Yours

Too Long; Didn't Read

Making security fun one episode at a time

The 6 Pro Tips For Building Great Chrome Extensions

Too Long; Didn't Read

Tomas Trajan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The 6 Pro Tips For Building Great Chrome Extensions

Too Long; Didn't Read

Tomas Trajan

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES