When you're browsing the internet, sometimes you run into pages filled with distracting images, colors, and links. Or the text is hard to read. Or, you're curious about what a certain word represents or sounds like and you lack the motivation to use the search engine. Or, you want to change the color scheme of a website so that it's easier on the eyes or in dark mode. Visionary can do all of that. We designed Visionary with the elderly and people with dyslexia and those who have difficulty focusing in mind. But, Visionary can help anyone who wants to read websites and articles effectively.

What it does

Visionary works by modifying the webpage you're currently on with options you can toggle in the pop-up menu. It can remove hyperlinks and images. It can change the font, text size, and text spacing of the whole website. You can customize these factors to fit your reading needs.

Research has shown that associating words to images provides a frame of reference to remember a word by, which can help children learn vocabulary and better understand an article. If users highlight a certain word while using Visionary, they can instantly receive an image that represents the word and hear a pronunciation of it.

Users can also highlight text and download a text file of their highlighted notes.

How we built it

We built Visionary with the Chrome extensions API, Google Custom Search JSON API, and HTML, CSS, Bootstrap, JavaScript, and JQuery. We used Speak.js for text-to-speech.

Challenges we ran into

It was our first time developing a chrome extension, using the Google Custom Search API, and using JQuery. Initially, there were some challenges with setting up communication between foreground and background and popup scripts, but we managed to connect them. We also had some initial trouble using Chrome storage to save the user's settings, but we were able to implement it.

Implementing the text-to-speech function was difficult as most text-to-speech APIs depended on a native web API or required JavaScript files from external websites or sources, which is a violation of the Content Security Policy for Chrome extensions, so we looked for a way around that. We managed to do so and were able to allow users to hear a pronunciation of a highlighted word while seeing an image of it.

Accomplishments that we're proud of

  • Implementing the functions we were hoping to implement.
  • Creating a seamless way to find images to any given word.
  • Successfully applying text-to-speech in a Chrome extension.
  • Developing a clean and pretty UI.
  • Creating a functioning Chrome extension.

What we learned

  • Messaging between background, foreground, and pop-up scripts for Chrome extensions.
  • Interacting with a webpage from an extension.
  • Using JQuery and the Custom Search API.
  • Making GET requests to an API.
  • Parsing JSON data from an API to retrieve image links.

What's next for Visionary

  • Creating a database of images to allow for crowdsourcing of images for better accuracy and rare words.
  • Developing a machine learning algorithm to allow for image retrieval from phrases and sentences and increase the accuracy of image retrieval from a word.
  • Cross-platform compatibility so that the extension can be used on other browsers as well.
  • Exporting highlighted text files as Google Docs rather than simple text files.

Built With

Share this project: