As a society, Americans tend to over-spend online without knowing how much they're actually spending. We wanted to create something that would help give a psychological weight to prices to counteract impulse purchases.

What it does

This Chrome extension takes a price on a webpage such as Amazon and converts the price into an amount of time based on salary. To perform this, the extension takes in the user's salary per hour and uses that value to compute how much time an item is worth.

For example, if a user works for $15 per hour and chooses to buy a 12-pack of Soylent for $32 dollars, then the price would be represented as 2.13 hours. The purpose behind this extension is to help limit spending and to encourage consumer responsiblity.

The extension's interface uses a small icon next to the price to display the time-cost. This method is non-invasive and allows users to look at the cost quickly while still seeing the original cost.

How we built it

We made it using jQuery, the Chrome extensions API, and PicnicCSS.

Challenges we ran into

  • Form submission: you can't listen to the onclick of a button marked as a submit button in a form, rather you must listen to the submit of the entire form (we spent an hour debugging this)
  • Injecting css and js that wouldn't pollute the website's layout
  • A proper manner for easily identifying prices across e-commerce websites (we designed a regex expression)

Accomplishments that we're proud of

  • Cute little piggy icon!
  • Unobtrusive UI -- it's up to you to use it or lose it
  • Efficient -- doesn't waste CPU recomputing prices every time the user interacts with the page

What we learned

  • How to actually make a Chrome extension properly
  • Regular Expression basics
  • jQuery basics
  • Using CSS instead of JS

What's next for Real Cost

  • Integration with more sites
  • Publishing on the Chrome Web Store

Built With

  • ballooncss
  • chrome-extensions-api
  • jquery
  • picnicss
Share this project: