Building A Browser Extension With The Crowdbotics Chrome Extension Scaffold
Expenses App is a Chrome extension build with Crowdbotics that helps users easily manage their finances right from their browser.
Recently, I had the opportunity to use the Crowdbotics Beta Application Builder to scaffold, deploy, and launch a browser extension in the Chrome App Store.
Crowdbotics uses a combination of machine learning and domain-expert developers to help you build production-quality applications faster. The Crowdbotics Application Builder allows you to build basic versions of popular apps, with various languages and frameworks — such as Django, Node, Solidity, and more — with the help of a pre-developed templates. In addition to providing the initial template, Crowdbotics provides a GitHub-ready directory and deploys your app to Herkou.
From the various types of web application scaffolds available on the Crowdbotics platform, I decided to develop a Browser Extension, which I have never developed before and have no experience developing. With the help of the scaffold provided by Crowdbotics, I was able to quickly and easily develop an expense tracking app and publish to the Chrome Web Store.
Expenses App is a Chrome extension that help users easily manage their finances right from their browser.
With Expenses App, it is possible to add new expenses, remove them from the list, and also see graphs of the expenses saved. Managing your expenses through a browser extension is very handy because you can simply open the extension and start adding your expenses, without the need for a website or an external application.
The functionality of the App is really simple, you can change to any screen by selecting in the tab menu.
The App is composed of 4 main screens
- Authentication
- Home
- Expenses
- Chart
Authentication
This is the first screen a user sees is a prompt to sign in with their Google account.
When a user clicks the “Sign-in button”, a new page opens for the Google OAtuh 2.0 authentication . After the authentication process occurs, the user will be automatically redirected to the Home screen.
Home
This screen displays all your saved expenses.
From this view, you can also remove an expense, by clicking the trash icon.
Expenses
The Expenses screen contains a form with three fields: description, price, and category.
This form allows the user to add new expenses. To save an expense it is necessary to fill all the fields and then click on the Save button. Expenses saved are immediately added to a Firebase database.
Chart
The Chart screen allows you to visualize expenses by category, and toggle between bar or line charts. The chart displays expenses by category. The sum of category expenses are grouped and displayed as one item.
To develop this browser extension the following technologies were used:
● Firebase Google Authentication
● Firebase Google Database
● Javascript
● Bootstrap
● CSS/HTML
Contributions to this project are very welcome and can be done by sending pull requests to this Github repository.
The browser extension was published to the Chrome Store and can be installed through this link: https://chrome.google.com/webstore/detail/igor-expenses-app/bedddifakjpgjbcbkcpalncdjajfplkl
If you have questions or feedback on this Chrome application, add it to the comment, or you can via the project thread on the Crowdbotics discussion board.
If you want to create web applications with the help of a lot of features and pre-developed functionalities, visit the Crowdbotics Application Builder, and start developing your own web applications.
Thanks for reading!
