Chrome extension case study

The idea came up instantly: we needed to make a Chrome extension that would nowadays monitor the status of any crypto-currency, would be understandable, and with fast response rate, so we could get updated quotes immediately. We started naturally with branding and design. As we said in our article about the startup branding kit, a logo is a necessary base for any product.

Tracker branding

Naming, logo, and color scheme, we decided to limit ourselves to that. The product still does not correspond to a full-fledged startup, as it is, in fact, an extension. Nevertheless, we had to emphasize its distinctive characteristics.

In the question of naming, we decided not to be strange, and we set ourselves a simple task, which we also intended to solve.

When we discussed this project, the word “database” was always on the list. Having analyzed the definition of “database,” we matched it to the idea of the product, and the puzzle came together. It was our naming, simple and clear.

Based on the naming, we began to develop a logo and smoothly approached the question of the tracker’s color scheme. All details should be ecologically combined in one infrastructure; without the necessary shades, we can not develop a logo. So let’s reveal the philosophy of each existing color in our service, there are only three:

• blue, the psychology of color is associated with confidence and safety in product use;
• green because it fits well with blue;
• pink was used as a substitute for red for the negative graph.

The logo represents a diagram in the form of the letter “M,” which logically corresponds with the name of the product, also points symbolizing the beginning and end of this diagram, and transmits the connection between the user and the service. Here we used two colors: blue and green.

Design it!

When we were designing the UI, we first limited ourselves in functionality, and then we started to design it. In chronology, we created everything in a such order:

• a field for easy search of any cryptographic currency;
• a section with the chosen crypt-currency, where the main information is given at the moment;
• a “show more” button with an opening list of other cryptocurrencies.

It should be noted that if you click on the currency in the list, a window with a chart will open. Here we used the green color to select an increasing value, and the pink color to choose a negative value, respectively.

As we intended, the functionality is minimal and clear. Then the product passed into the hands of the development team, where the implementation of all the conceived take place.

Let’s proceed with the development

For our work, we used ReactJS framework, Chart.js library for drawing charts, data is provided by CoinCap service [https://coincap.io/] through WebSocket protocol, which allows us to always display actual data in real-time and with a minimum number of requests to the server. Here you can see information about the API dock.

Using these tools, we wrote the visual part of the extension based on its design. Our choice was made to React because it is a rather popular framework with an exciting concept, and we use it for most of our projects. A nice bonus of this technology was that we contributed into translation of ReactJS documentation to our national language. The choice was obvious.

Then it was time to add real data into our application. We chose the CoinCap API according to several distinctive criteria: it has all needed functionality and quite straightforward documentation, that’s all our dev needed. Also, the availability of Websocket was critical for us, because, in the financial trackers, it’s simply unacceptable to present obsolete data.

After that it was time to optimise front-end. When you’re receiving server updates every second you need to be careful with updating UI and made sure you’re re-rendering only elements that has to be updated, not the whole application. Having settled the current moments, we have moved on to the final stages: connected the charts, add a custom autofill component, and created the functionality to let users to add currencies to the favorites. The autofill field was essential for us to improve the user experience and to protect the service from errors if the user entered the wrong name.

Let’s move on to downloading the extension

We had little experience in developing extensions for the browser, and of course, the question arose: how to run it? We tell you everything in order.

First of all, let’s deal with such a need as the manifest.json file. This is the only file that must be in every extension that uses Web Extension APIs. Using manifest.json, you define basic metadata about the extension, such as name and version. You can also describe some aspects of the functionality.

Once manifest file is settled, let’s configure the Webpack Configuration section. If you haven’t heard about webpack before, it’s a program that gets application files that you uses during development and bundles it into production-ready application. All you need to do is specify an entry point into your application (it may even be an HTML file with <script> tags, but usually entry point is JavaScript file), and Webpack will analyze the files and combine them into one output JavaScript file containing everything you need to run your application.

Once we’ve sorted out the main technical issues, we’ll move on to uploading the application in Chrome. For this purpose, a folder is created, and on the Chrome://extensions service page, there is a button “Download unpacked extension.” Using it, select a folder, and the extension is immediately displayed in the list of “widgets” near the address bar.

Congratulations, your extension is now in Chrome, you can now test, modify, and track all changes. But this process is not over, because you now need to add your creation to Chrome Webstore, as a zip archive, and with basic product information. This process doesn’t take much time, once moderators check your add-on for vulnerabilities, they will add it to the store.

Metabase extension tracker and its plans for the future

We love this project, and as loving creators, we plan to develop it further. Very soon, Metabase tracker will go through the rite of functionality extension, move to other browsers, and of course, we will look for possible variants of tracker implementation on mobile devices. And if you want to work with the extension now, we suggest you follow the links:

• Chrome Web Store here you can install the extension.
• GitHub is an open-source repository, where you can report an issue, propose the change or just review the code.

If you want to build your own extension check out official google tutorial or reach out to us, we would love to help you ❤️.