Inspiration
We've listened to our friends worry about their online purchases time and time again. We figured we should build them something to reassure them while we're away at hackathons.
What it does
The Chrome extension has two modes: encouragement (functional!) and restraint (in development). When the encouragement mode is enabled, Inner Voice provides high-level reassurance about a product once you add it to your Amazon cart. In restraint mode, Inner Voice convinces you you're better off without buying that set of expensive pencils.
How we built it
We used React to set up the extension. We created a component that sends information about the product and the desired tone to the OpenAI API.
Challenges we ran into
- Using React as a content script. Content scripts have the functionality to access elements of the DOM. In our case, to query for "add to cart" onClick events and display snackbar popup. To achieve the same thing, we had to eject React components and configure build options.
- Persistent state management. React has built-in state management (useState), but the state gets deleted on every instance on opening the popup/browserAction. A solution would be relying on chrome's build-in persistent storage through background script communication.
- Extracting the correct text (and only the correct text) from the OpenAI API responses was tough. Parsing the data from the response inside queries often returned errors. Eventually, we found a way to save it in a variable.
What we learned
- Fundamentals of React development
- Fundamentals for TailwindCSS
- Fundamentals of Chrome Extension development
- Limitations to a React solution to Extension development
- Integration of the OpenAI API
What's next for our team
Eyas is graduating from Carleton University with a Bachelor of Computer Science this year. He's passionately working on personal projects while working at an Ottawa-based public relations firm. Always open to new opportunities!
Jaleelah is in her third year of study at the University of Ottawa pursuing a B.Sc. in Computer Science [Co-op]. She is currently working as a Malware Research Assistant at Nokia and will be looking to enter more cybersecurity competitions and teams in the future.
Built With
- chrome
- css
- html
- javascript
- mui
- openai
- react
- reactquery
- tailwind
Log in or sign up for Devpost to join the conversation.