Inspiration
I wanted to create an educational tool that would help students learn from each other and continue to interact during quarantine. This browser extension is working towards doing just that!
What it does
CoAnnote is (almost) a collaborative note-taking service and it could easily grow into this! At present, it allows users to sign into a Firebase-based service, create categories, and place notes on websites. Unfortunately, however, these notes do not presently sync.
How I built it
CoAnnote is a Chromium and Firefox extension. Starting with tutorials related to extension development, we built CoAnnote into a nearly-functional note-taking app. For authentication and storage, we used Google's Firebase. A companion website is, similarly, hosted through Firebase. To implement the note-taking and authentication features, I used a library I have started building to make similar projects easier.
Challenges I ran into
It was surprisingly difficult to integrate Firebase authentication and data storage into a browser extension! We spent hours attempting to load the Firebase libraries, only to find, later that it was a permissions issue! Similarly, we used a pop-up HTML page to allow the user to sign-in and manage server communication. Unfortunately, Chrome closed the popup, stopping the scripts we were using to communicate with Firebase.
Accomplishments that I'm proud of
Users can sign in, and sync a limited amount of data to the web!
What I learned
I learned how to integrate Firebase tools into Firefox and Chrome browser extensions! This was surprisingly more difficult than expected -- without the proper permissions, the Firebase libraries did not execute, even after downloading their source files!
What's next for Hack-20
Much more work can be done on this project than we did this weekend. Finishing authentication and possibly even publishing the extension are my goals!
Log in or sign up for Devpost to join the conversation.