Here I Crumb!

• 

  Here I Crumb!

• 

  Pop-up upon click

• 

  Adding in custom word

• 

  The Here I Crumb! Batter (the team)

Inspiration 🤩

I lack the words to describe this. If only we had a tool that was useful for expanding vocabulary...

What it does 🤔

Here I Crumb! aims to enhance the user’s breadth of French vocabulary.

This Chrome extension functions to get users to get comfy with three French words and their English translations over the span of a full day before dawn returns. It generates three new french words a day, along with their english translations and places of usage. This can allow users to broaden their vocabulary over time in a quick and useful manner. This extension makes use of the chrome.storage API to allow the user to add their own custom words into the list, and have it sync across browsers. This allows for the experience to be consistent across all the users devices.

How we built it 👾

Here I Crumb! Was built with Javascript, HTML, CSS, and Python to realize functions, build visuals, and process data. We also created a manifest JSON file to outline the permissions and requirements of this project in order to integrate it into Chromium browsers as an extension.

Challenges we ran into 😤

The original plan was to create a separate website to store all of our words and associated information there, however, due to Google’s Same Root Only (SRO) policy, this was unfeasible. A possible way around this may have been to create a custom api that would serve data from a server, however, this is above our current skill levels. Another plan was to utilize a seperate JSON file to store the word list, but unfortunately, neither of us knew jQuerey and we could not find any alternatives. As such, we elected to simply include all the words in a very long list. It’s not ideal, but it works for the time being as we search for other more sustainable solutions. One of the tools that we used in this project, chrome.storage, had previously caused major problems for one of us at another hackathon. It is used to store user data and sync it across all devices that the user uses the browser on. However, we were unable to access the stored data as it was the value of a promise. This was the same exact dilemma that had delayed the previous project. However, this time we were able to succeed in pulling the stored data from the API, and it behaves exactly as intended. For one of us, this was a huge first, and for the other, redemption for the previous project by overcoming the problem.

Accomplishments that we're proud of 🤙

• We finally conquered chrome.storage, which obliterated our past hackathon project! 🤯 • This was one of us’ first time applying HTML and CSS in a project • Finally fulfilled our promise to Mme Hoffschmidt ❤️ • Broke the world record number of Chrome tabs • Only brute forced one element– a massive wall of text… 🤌 • Stayed awake without caffeine

What we learned 😎

• We only had each other. We are now excellent Googlers and Stack Overflowers • We learned to use git (properly)

What's next for Here I Crumb! 🍞

• Incorporating jQuery so data can be stored in a separate JSON file instead of being stored directly in script files • More languages • Homepage customization → images, more colors, patterns • Allow user to prioritize words → appear more frequently

Built With

• chrome.storage
• css
• html
• javascript
• python