Inspiration

With the rise of online-shopping and the fact that most Canadians are currently locked in their homes, it has become difficult to ignore the amount of unnecessary purchases that consumers make on a daily basis. The lock-downs and convenience of online-shopping has led to a rise in impulse-purchases which affects people of all ages. This issue has inspired our team to develop CrewsControl — a web application and browser extension inspired by actor Terry Crews, that will help consumers curb impulse-buying habits.

What it does

In the web app, users create and log into their account where they can set their monthly online shopping goals and specific spending limits for each purchase category. The main feature of CrewsControl is the Chrome extension that will help you stay within the limits of your budget as you browse the internet. It reads the total purchase price in your cart, compares it to the budget you set, and if the price is higher than your budget, our favourite actor — Terry Crews — will pop up to ask you to reconsider the purchase.

How I built it

The chrome extension was built with HTML, CSS, and JS as well as the chrome APIs chrome.declarativeContent, chrome.storage, and chrome.runtime. We leveraged a few handy functions in Javascript in order to first detect whether a user was situated in an Amazon cart and later to extract their cart’s subtotal. Once we had the subtotal, we compared the value to the user’s budget (which they can toggle using the extension window!) and applied the window.open function to remind the user that they’re spending more money than they wanted to. The web app was built with React and bootstrap.

Challenges I ran into

Our biggest challenge was that we needed a way to store and update our budget variable since our window only pops up when the user is spending over the budget. After attempting to solve this problem using local variables within our system, we used the chrome.storage API on the suggestion of mentor Jeff Hui!

Accomplishments that I'm proud of

What I learned

-Figuring out how to create a Chrome Extension for the first time -Allowing users to update their budget across different cart checkout sites -Using Cloud storage for the first time

What's next for CrewsControl

-Adding user accounts -Recognizing the total price on any cart checkout site -Add more budget categories -Decrementing remaining budget

Built With

Share this project:

Updates