Brian and I come across a lot of words that we don't know. However, it is rather distracting to pull up another tab to quickly search it. So, let's insert this definition inline!

What it does

After installing the extension, you can highlight a word to bring up a tooltip menu. This popup has two buttons: 1) insert definition and 2) save to study list.

1) Insert definition: Inserts the definition inline in a parenthesis next to the word (Sources info from Wikipedia or a dictionary).

2) Save to study list: Saves the word and definition to user's chrome storage. The user can then click on the extension icon to bring up the list of all saved words and definitions


Alt+A - Automatically insert the definition for the highlighted text

Alt+S - Automatically save the highlighted text to the study-list

How we built it

We read the chrome extension documentation, wrote the software design doc, and just slowly cracked it.

Challenges we ran into

A lot of asynchronous challenges. Since chrome API is async, it got a bit funky once we added async callbacks. We solved it by writing converting callbacks to promises.

Accomplishments that we're proud of

Getting a functional chrome extension up and running! Fast dictionary lookup speed! We built something we are going to use ourselves!

What we learned

Chrome extension setups. As web devs, we also learned about the nature of javascript in the browser a lot better after being exposed to the isolated content-scripts and the persistent, singular background service worker.

What's next for Definition-Inline-Inserter

1) As CS students, some definitions on Wikipedia will not cut it. Many times, a blackbox definition is better (defining what something does as opposed to what something is). We are looking forward to building our one blackbox dictionary for as many CS technologies and terms or build a community-driven CS dictionary. If the word highlighted is found in the future CS dictionary, we insert that. 2) Highlighter tool in the popup

Share this project: