InkDrop

• 

  Banner

• 

  Example Website Annotated

• 

  Example Website Annotated

💡 Inspiration

Throughout our time at school, we are often assigned various online articles or books to read and annotate. This generally becomes inconvenient as we aren't able to directly express or remember what we've just read through a digital workspace. This chrome extension, however, tackles that very problem, making annotations very convenient and efficient with comforting tools suited for all.

📚 What it does

This chrome extension enables users to annotate any sort of online article or book. Right-clicking on the page and clicking our tool produces a draggable popup with different tools designed to make your experience efficient. The note-taking or drawing tool can make annotating less tedious and problematic.

🔨 How we built it

We used Typescript and React on top of the Chrome extension development API. All DOM manipulation is done directly through an injected React wrapper. Since React has an excellent state management API, it was much easier for us to make our extension reactive to page changes and user interaction.

🧪 Challenges we ran into

The biggest challenge we ran into was making sure our injected React wrapper didn't interfere with the other DOM elements to not disturb the interaction between the user and the website they intend to use. We were able to fix this issue with CSS by using the z-index and position properties to our advantage.

⭐️ Accomplishments that we're proud of

We are especially proud of the overall toolbar design and implementation on any sort of page. The simplicity of using this tool makes it accessible for about any age range, which is something worth working for.

🧠 What we learned

We individually learned new things whether that was how to make a functioning chrome extension that meets your desires or just how to make look smooth and efficient to run. We also learned that making things that are most convenient and easy to use for the majority is what really makes our tools a success.

💭 What's next for InkDrop

We wish to receive a good bit of feedback as it helps us to determine whether we need to further develop and improve this extension or perhaps branch off and add other related accessories that are sufficiently demanded.

Built With

• chrome
• react
• typescript
• webpack