CRYPTOCURRENCY PRICE TRACKER
Cryptocurrency Price Tracker is a Chrome Extension which provides valuable data on the leading cryptocurrencies, such as the current price in US Dollar and percentage (%) change in the last 1 hour. This extension will be handy for those who are trading cryptocurrencies. Real-time data updates will provide critical information to crypto traders and help them make decisions with accurate data.
As I have mentioned above the languages used for creating this extension, it is clear that knowledge of front-end technologies is required to build our own extension.
The structure of any Chrome Extension is shown below:
Extensions start with their manifest. The manifest.json is a JSON formatted file that provides important information such as name, version, description, icon of the extension and many more. We can also include permissions in the manifest files if it requires to access bookmarks, browsing data, cookies, downloads, etc.
Overall design of the extension will be well structured and defined in the popup.html. In this extension, there is a navbar in which the Extension Name and the last updated time of the prices are displayed. For displaying the prices (in USD) and percentage change in 1hour, the data are outputted as a table content. To make the data engaging, the negative percentage is displayed in red colour with a downward arrow and the positive percentage is displayed in green colour with an upward arrow.
The API call, executing data and the problem solving is done in popup.js. To get the data for a certain cryptocurrency, we have used the CoinMarketCap public API. Then, the required data are extracted from the JSON file (here, price in USD and percentage change in 1 hour). Separate variables store data for prices and percentage change. Using DOM property of innerHTML, the data are displayed in div id and the style.color helps us set the colour to be shown for percentage change.
For custom styling custom.css defines all the styling properties. In addition to it, the Materialize CSS framework makes the extension look more minimalistic.
As I had no previous knowledge of developing Chrome Extension, this project was both a learning experience and very rewarding to finish. Coding it for the first time and understanding the workflow of it was initially tough to understand, but after working on it for a while it became easier and easier. Aside from that initial learning curve, debugging a few JS logics was a challenge for me, but after trouble shooting and sticking with it, I was able to sort out all of the issues and produce the Cryptocurrency Price Tracker you see today.
This is what the Chrome Extension looks like:
How do you install this extension? Follow this guide!
1. Download the extension file from my Github repository.
2. After the file is downloaded and extracted, you’ll see folder named btc-chrome-extension.
3. Launch Chrome Browser, type chrome://extensions in the address bar and turn on Developer Mode (if it is not turned on).
4. Once it's turned on, there will be an option for load unpacked , after you click on it there will be a popup prompting you to choose your project folder. Locate to the directory where you've extracted the project. Here, named as btc-chrome-extension.
5. If you've uploaded the correct folder, you'll see that the extension is added.
That’s it!! The Google Chrome Extension will be added to the address bar and you’ll see a corresponding icon for it.
Thanks for downloading and using Sumit Banik's Chrome Extension, his Cryptocurrency Price Tracker!
If you'd like to learn to code or talk to Sumit, you can find him on the ForkedBlock Discord group, here: https://discord.gg/Kbh8WRX