Description as a Tweet:

MagniBee is a Google extension that enhances the reading experience of webpages! It can magnify selected words into desired font size. Come try it!

Inspiration:

We realize that it is very inconvenient when we zoom a webpage, it doesn't enlarge the text at the same time. The unnatural ratio between the font size and the other designs of the webpage is annoying. By making certain words or sentences larger, MagniBee supports us to read the webpage more clearly and helps us to find the main idea of the info faster.

What it does:

MagniBee is a chrome extension that can enhance the reading experience by enlarging the font size of the webpage. We also made a homepage for the extension.

How we built it:

We started by listing the features we desired for this project. Then, we designed the icon and other art elements by Procreate. We began coding on Visual Studio Code along with multiple tutorials. Once we encountered some conflicts, we consulted with the Internet.

Technologies we used:

  • HTML/CSS
  • Javascript

Challenges we ran into:

Building the main function--magnifying selected text in any webpage--is the main challenge we faced in our project. It was difficult to figure out how to find the selected text's location in the html file because every webpage is different. We were able to get the selected text, but failed to find the location of it. Because of the time consuming, we changed the plan. Instead of applying the function to all the webpages, we were able to magnify selected text on the test page, which is in the homepage of our chrome extension.

Accomplishments we're proud of:

We made an icon for our chrome extension. It is a combination of magnifier glass and bee. The element of bee and color green was influenced by this Hackathon event. We are also proud of accomplishing the main function of our chrome extension. The webpage was also a great achievement because we have never built a webpage from scratch before.

What we've learned:

We familiarized the process of making chrome extensions. We believed that our skills such as javascript, css, and html improved a lot. We had a deeper understanding of chrome extension and webpage building process.

What's next:

Right now, our project can only change the font size in the tested webpage. We first plan to figure out how to change selected text's font size in all webpages. How to find the selected text's location in html file in the key question that needs to be solved.

After solving this main issue, we plan to enhance our extension into an annotation tool because we believe that the enlarged text can help people catch the main point when they reread the webpage. Therefore, by setting a third-party login, such as connecting with user's google cloud, is a good way to save user's annotations while reading.

Built with:

We used Github for collaboration. We used Procreate to design icon and art elements. Visual Studio Code is the main editor we used for coding purposes.

Prizes we're going for:

  • PowerSquare Qi Wireless Phone Charger
  • Hydroflasks
  • Nintendo Switches
  • Apple AirPods 3rd Gen
  • JBL Clip Bluetooth Speakers
  • $500 total to the winning team
  • Meta Portals

Team Members

YuQian Shi
Elvira Xiong

Table Number

Table TBD